Skip to content

Instantly share code, notes, and snippets.

@mrkpatchaa
Last active August 5, 2020 13:52
Show Gist options
  • Save mrkpatchaa/6f625dcb76899186d327bdf6fd5e2531 to your computer and use it in GitHub Desktop.
Save mrkpatchaa/6f625dcb76899186d327bdf6fd5e2531 to your computer and use it in GitHub Desktop.
Javascript Tricks

Some JavaScript Tricks

// Pure JS Object
// To create a pure object use
const obj = Object.create(null);
// instead of
const obj = {};
// 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
})
// 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
}
})
window.addEventListener("load", () => {
// use navigator.onLine to get ccurrent status
window.addEventListener("online", () => {
// Status changed to online.
});
window.addEventListener("offline", () => {
// Status changed to offline.
});
});
// 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());
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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment