# Useful Javascript Snippets &
Functions Megalist
By [coinvest](https://paragraph.com/@gytibor) · 2023-09-16
---
Here’s a curated list of useful javascript functions and snippets I’ve collected throughout the years.
Standard Variables
------------------
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);
Strip Tags, but Javascript
--------------------------
This function uses regex to remove HTML from strings.
let new_string = string.replace(/(<([^>]+)>)/gi, "");
Convert a string to camelCase
-----------------------------
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'
Get URL
-------
This little snippet will return the full URL path.
var url = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search
Validate Email
--------------
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;
}
Remove Duplicates from an arry
------------------------------
Here we remove duplicate items from an array. Compiled by Svein [**Petter Gjøby**](https://javascript.christmas/2019/3).
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;
});
Get URL
-------
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**](https://css-tricks.com/snippets/javascript/format-currency/).
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;
}
Reload an iFrame
----------------
Force a frame to reload. This example uses jQuery.
$('iframe').attr('src', $('iframe').attr('src'));
jQuery: Force External Links to Open in a New Window
----------------------------------------------------
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');
});
}
});
jQuery: Methods of targeting external links
-------------------------------------------
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
}
});
Fancy, styled console.logs
--------------------------
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;");
Run after Page has laoded
-------------------------
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;
}
}
Does Element Have Class?
------------------------
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
toggleClass, but Javascript
---------------------------
Toggles a class for an HTML element.
const toggleClass = (el, className) => el.classList.toggle(className);
Usage:
toggleClass(document.querySelector('p.classname'), 'classname');
addClass, but Javascript
------------------------
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')"
Force an element to autofocus once the page has loaded.
-------------------------------------------------------
Straightforward HTML to force an input to be focused.
Check if Array Contains X
-------------------------
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
}
html\_entities, but in Javascript
---------------------------------
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, '"');
}
Strip numbers from a string
---------------------------
Simple one liner to strip numbers from a string using regex.
newString = someString.replace(/[0-9]/g, '');
Is jQuery Loaded?
-----------------
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 Touch
------------
Detect whether the device has touch capabilities.
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
hasTouch = true;
window.removeEventListener('touchstart', setHasTouch);
}, false);
Checks if the target value exists in a JSON object
--------------------------------------------------
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;
})
);
};
GET Requests
------------
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
);
POST Requests
-------------
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
);
Enforce HTTPS with Javascript
-----------------------------
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();
Insert HTML After Target Element
--------------------------------
Inserts an HTML string after the end of the specified element.
const insertAfter = (el, htmlString) =>
el.insertAdjacentHTML('afterend', htmlString);
Usage:
insertAfter(document.getElementById('myId'), 'after
');
Insert HTML Before Target Element
---------------------------------
Inserts an HTML string before the start of the specified element.
const insertBefore = (el, htmlString) =>
el.insertAdjacentHTML('beforebegin', htmlString);
Usage:
insertBefore(document.getElementById('myId'), 'before
');
Check if String is Alphanumeric
-------------------------------
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
Slugify a String
----------------
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'
Pluralize
---------
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'
Run a Function X Times
----------------------
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
Copy Text to Clipboard
----------------------
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)
}
Fetch, with Error Handling
--------------------------
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.
---
*Originally published on [coinvest](https://paragraph.com/@gytibor/useful-javascript-snippets-functions-megalist)*