<100 subscribers
Here’s a curated list of useful javascript functions and snippets I’ve collected throughout the years.
Get and set standard window and document and set them as variables
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; alert(x + ' × ' + y);
This function uses regex to remove HTML from strings.
let new_string = string.replace(/(<([^>]+)>)/gi, "");
Use String.prototype.match() to break the string into words using an appropriate regexp.
const toCamelCase = str => { let s = str && str .match( /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g ) .map(x => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase()) .join(''); return s.slice(0, 1).toLowerCase() + s.slice(1); };
Usage:
toCamelCase('some_database_field_name'); // 'someDatabaseFieldName' toCamelCase('Some label that needs to be camelized'); // 'someLabelThatNeedsToBeCamelized' toCamelCase('some-javascript-property'); // 'someJavascriptProperty' toCamelCase('some-mixed_string with spaces_underscores-and-hyphens'); // 'someMixedStringWithSpacesUnderscoresAndHyphens'
This little snippet will return the full URL path.
var url = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search
This uses reges to validate an email address.
function checkEmail(email) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (!reg.test(email)) return false; return true; }
Here we remove duplicate items from an array. Compiled by Svein Petter Gjøby.
const array = [1, 1, 1, 3, 3, 2, 2]; // Method 1: Using a Set const unique = [...new Set(array)]; // Method 2: Array.prototype.reduce const unique = array.reduce((result, element) => { return result.includes(element) ? result : [...result, element]; }, []); // Method 3: Array.prototype.filter const unique = array.filter((element, index) => { return array.indexOf(element) === index; });
This function will round numbers to two decimal places, and ensure that the returned value has two decimal places. For example 12.006 will return 12.01, .3 will return 0.30, and 5 will return 5.00. From Chris Coyier’s site.
function CurrencyFormatted(amount) { var i = parseFloat(amount); if(isNaN(i)) { i = 0.00; } var minus = ''; if(i < 0) { minus = '-'; } i = Math.abs(i); i = parseInt((i + .005) * 100); i = i / 100; s = new String(i); if(s.indexOf('.') < 0) { s += '.00'; } if(s.indexOf('.') == (s.length - 2)) { s += '0'; } s = minus + s; return s; }
Force a frame to reload. This example uses jQuery.
$('iframe').attr('src', $('iframe').attr('src'));
Pretty much what the title says, this will make any external link on the page open in a new window; useful for content sites.
$('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } });
Here’s some alternative methods of targeting external links with jQuery.
// Technique #1 $('a').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass("external"); // Technique #2 $.expr[':'].external = function(obj) { return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname); }; $('a:external').addClass('external'); // Technique #3 $('a:not([href^="http://your-website.com"]):not([href^="#"]):not([href^="/"])').addClass('external'); // Technique #4 $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if (!a.test(this.href)) { // This is an external link } });
Make your console.log() output pop.
console.log("%cBuilt by 351 Studios", "background-color:#FFCD02;color:#333333;padding:0.3em 1em;font-weight:900;line-height:1.5em;font-size:2em;");
Force your function to run after page load.
if (window.attachEvent) { window.attachEvent('onload', yourFunctionName); } else { if (window.onload) { var curronload = window.onload; var newonload = function(evt) { curronload(evt); yourFunctionName(evt); }; window.onload = newonload; } else { window.onload = yourFunctionName; } }
Use Element.classList and DOMTokenList.contains() to check if the element has the specified class.
const hasClass = (el, className) => el.classList.contains(className);
Usage:
hasClass(document.querySelector('p.classname'), 'classname'); // returns true
Toggles a class for an HTML element.
const toggleClass = (el, className) => el.classList.toggle(className);
Usage:
toggleClass(document.querySelector('p.classname'), 'classname');
A function to add a class to an element.
function addClass(id, new_class) { var i, n=0; new_class = new_class.split(","); for (i=0; i < new_class.length; i++) { if ((" " + document.getElementById(id).className + " ").indexOf(" " + new_class[i] + " ") == -1 ){ document.getElementById(id).className+=" "+new_class[i]; n++; } } return n; }
Usage:
onclick="addClass('changeme', 'round')"
Straightforward HTML to force an input to be focused.
<textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea>
See if a value is contained in an array.
/** * Array.prototype.[method name] allows you to define/overwrite an objects method * needle is the item you are searching for * this is a special variable that refers to "this" instance of an Array. * returns true if needle is in the array, and false otherwise */ Array.prototype.contains = function ( needle ) { for (i in this) { if (this[i] == needle) return true; } return false; } // Now you can do things like: var x = Array(); if (x.contains('foo')) { // do something special }
htmlentities() is a PHP function which converts special characters (like <) into their escaped/encoded values (like <). This allows you to show to display the string without the browser reading it as HTML.
function htmlEntities(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }
Simple one liner to strip numbers from a string using regex.
newString = someString.replace(/[0-9]/g, '');
Sometimes you just need to check for jQuery with Javascript. Here’s a useful method:
if (typeof jQuery == 'undefined') { // jQuery IS NOT loaded, do stuff here. }
Detect whether the device has touch capabilities.
var hasTouch; window.addEventListener('touchstart', function setHasTouch () { hasTouch = true; window.removeEventListener('touchstart', setHasTouch); }, false);
Checks if keys is non-empty and use Array.prototype.every() to then check its keys to internal depth of the object.
const hasKey = (obj, keys) => { return ( keys.length > 0 && keys.every(key => { if (typeof obj !== 'object' || !obj.hasOwnProperty(key)) return false; obj = obj[key]; return true; }) ); };
Makes a GET request to the passed URL.
const httpGet = (url, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('GET', url, true); request.onload = () => callback(request.responseText); request.onerror = () => err(request); request.send(); };
Usage:
httpGet( 'https://urlgoeshere.com', console.log );
Makes a POST request to the passed URL.
const httpPost = (url, data, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('POST', url, true); request.setRequestHeader('Content-type', 'application/json; charset=utf-8'); request.onload = () => callback(request.responseText); request.onerror = () => err(request); request.send(data); };
Usage:
const post = { user: 1, id: 222, title: 'Marko Bajlovic', body: 'Galaxies globular star cluster muse about the carbon in our apple pies two ghostly white figures in coveralls and helmets are soflty dancing courage of our questions.' }; const data = JSON.stringify(post); httpPost( 'https://urlgoeshere.com', data, console.log );
Redirects the page to HTTPS if it’s currently in HTTP.
const httpsRedirect = () => { if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]); };
Usage:
httpsRedirect();
Inserts an HTML string after the end of the specified element.
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
Usage:
insertAfter(document.getElementById('myId'), '<p>after</p>');
Inserts an HTML string before the start of the specified element.
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
Usage:
insertBefore(document.getElementById('myId'), '<p>before</p>');
Inserts an HTML string before the start of the specified element.
const isAlphaNumeric = str => /^[a-z0-9]+$/gi.test(str);
Usage:
isAlphaNumeric('hello123'); // true isAlphaNumeric('123'); // true isAlphaNumeric('hello 123'); // false (space character is not alphanumeric) isAlphaNumeric('#$hello'); // false
Converts a string to a URL-friendly slug.
const slugify = str => str .toLowerCase() .trim() .replace(/[^\w\s-]/g, '') .replace(/[\s_-]+/g, '-') .replace(/^-+|-+$/g, '');
Usage:
slugify('Hello World?'); // 'hello-world'
Returns the singular or plural form of the word based on the input number, using an optional dictionary if supplied.
const pluralize = (val, word, plural = word + 's') => { const _pluralize = (num, word, plural = word + 's') => [1, -1].includes(Number(num)) ? word : plural; if (typeof val === 'object') return (num, word) => _pluralize(num, word, val[word]); return _pluralize(val, word, plural); };
Usage:
pluralize(0, 'apple'); // 'apples' pluralize(1, 'apple'); // 'apple' pluralize(2, 'apple'); // 'apples' pluralize(2, 'person', 'people'); // 'people' const PLURALS = { person: 'people', radius: 'radii' }; const autoPluralize = pluralize(PLURALS); autoPluralize(2, 'person'); // 'people'
Iterates over a callback n times
const times = (n, fn, context = undefined) => { let i = 0; while (fn.call(context, i) !== false && ++i < n) {} };
Usage:
var output = ''; times(5, i => (output += i)); console.log(output); // 01234
Send a string to the clipboard.
function copyToClipboard() { const copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("copy"); }
or
//new API function copyToClipboard() { navigator.clipboard.writeText(document.querySelector('#myInput').value) }
Break down a fetch step by step. If the response is good, the response will be returned as JSON. If a 404 or any non-network issue error occurs, the response code will be returned. Promises will be rejected and catched to (error => console.error(Fetch Error =\n, error))).
const fetch = require('node-fetch'); let multifetch = async () => { let urls = [ "https://flathub.org/stats/52", "https://flathub.org/stats/2018/06/03.json", "https://flathub.org/stats/52", "https://flathub.org/stats/2018/06/03.json" ] // urls.map( e => fetch(e) // .then(response => response.json()) // parses response to JSON // .catch(error => console.error(`Fetch Error =\n`, error))) for (let e of urls) { fetch(e) .then(response => response.ok ? response : response.status) // parses response to JSON .then(res => console.log(res)) .catch(error => console.error(`Fetch Error =\n`, error)) } } multifetch(); // async/await version let data = await fetch(url) .then(res => res.ok ? res : res.status) .catch(error => console.error(`Fetch Error =\n`, error));
Hope some of these you find useful on your programming travels.
