Javascript Tricks

0-jasascript-tricks.md

Some JavaScript Tricks

ccreate-pure-js-object.js

// Pure JS Object
// To create a pure object use
const obj = Object.create(null);
// instead of
const obj = {};

detect-ad-blocker.js

// From https://flaviocopes.com/how-to-detect-adblocker/
let adBlockEnabled = false
const ad = document.createElement('div')
ad.innerHTML = ' '
ad.className = 'adsbox'
document.body.appendChild(ad)
window.setTimeout(function() {
  if (ad.offsetHeight === 0) {
    adblockEnabled = true
  }
  ad.remove()
  console.log('Blocking ads? ', adblockEnabled)
  }
}, 100)

// Place at the bottom, or ilsten to DOMContentLoaded event
document.addEventListener('DOMContentLoaded', (event) => {
  //the event occurred
})

detect-dark-mode.js

// From https://flaviocopes.com/javascript-detect-dark-mode/
window.matchMedia('(prefers-color-scheme: dark)').matches

// Exemple on image
const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

// Detect change
window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

detect-network-change.js

window.addEventListener("load", () => {
  // use navigator.onLine to get ccurrent status

  window.addEventListener("online", () => {
    // Status changed to online.
  });

  window.addEventListener("offline", () => {
    // Status changed to offline.
  });
});

regex.js

// A List Of Helpful Regex Examples

let re;

//this looks for the string between the slashes. it'll match hello but not HeLlo.
re = /hello/;
//the lower case i means be case insensitive. this will match HellO.
re = /hello/i;


// explaination for common search characters

re = /^h/i; //the ^ means must start with this. if pos 0 is not the letter/number, then this fails. This matches "hello" but not "Why hello!"
re = /ld$/i; //$ means that the string must end with this character or number. this matches 'hello world' but not 'hello worlds'
re = /^hello$/i; //must start and end with hello. this matches 'hello' but not 'hello world'
re = /^hello$/ig; // the lower case g means global. It means it searches the entire string to find multiple matches.
re = /^h.llo$/i; //the "." is basically a wild card for one char. 'hallo' would match this search
re = /h.*llo/i; //* is wild card for many char. 'heeeeeeeeeeeello' would match this search. same with 'heasdfasdfasdfllo'
re = /gre?a?y/i; //the ? means an optional char. it can be either of the char behind a ? or empty
re = /gre?a?y\?/i; // the \ esc meta chars to treat as literals. 

re = /gr[ae]y/i; // must be an e or a
re = /[^GF]ray/i; // will match anything EXCEPT GF
re = /[A-Z]ray/; // will match any upper case letter
re = /[a-z]ray/; // will match any lower case letter
re = /[A-Za-z]ray/; // will match any letter
re = /[A-Za-z0-9]ray/; // will match any letter or num

// Braces {} - Quantifiers
re = /He[a-z]{3}/i; // must occur exatctly {m} times. looks at prev char/regex
re = /He[a-z]{2,3}/i; // must occur between range. looks at prev char/regex
re = /He[a-z]{2,}/i; // must occur at least m times.

// Parentheses () - Grouping
re = /([0-9]x){3}/; // matches num then letter x 3x
re = /^([0-9]x){3}$/; // matches ONLY exactly num x 3x b/c of ending dollar sign

// shorthand chars
re = /\w/; //word char
re = /\w+/; //plus = one or more words
re = /\W/; //non-word char
re = /\d/; //match any digit
re = /\d+/; //match any digit 0 or more times
re = /\D+/; //match any non-digit

const str = 'Hello World! My Name Is Tyler.';
//const str = 'grey';

class Regex {
	constructor(str, re) {
		this.str = str;
		this.re = re;
	}
	mytest() {
		if (this.re.test(this.str)) {
			return [this.re.exec(this.str), `${this.str} contains the regex search of: ${this.re.source}`];
		} else {
			return `No luck! Hopefully, ${this.str} should not match ${this.re.source}`;
		}
	}
}

const result = new Regex(str, re);
console.log(result.mytest());

remove-duplicates.js

const array = [1,2,3,4,2,3,4,2,3,4,5,6,7,6,7,6,7,8,9];

// 
[...new Set(array)];

//
array.filter((item, index) => array.indexOf(item) === index);

//
array.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item], []);

//
Array.from(new Set(array));