312 lines
122 KiB
HTML
312 lines
122 KiB
HTML
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="./style.css"><title>String - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
|
|
if(node.value.toLowerCase().trim() === ''){
|
|
document.querySelector('nav').querySelectorAll('li').forEach(x => x.style.display = '');
|
|
document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
|
|
return;
|
|
}
|
|
let matchingTags = [];
|
|
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
|
|
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
|
if(data.includes(true)){
|
|
x.style.display = '';
|
|
matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
|
|
}
|
|
else x.style.display = 'none';
|
|
});
|
|
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
|
|
x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
|
|
})
|
|
}
|
|
function scrollToTop(){
|
|
const c = document.querySelector('.card-container').scrollTop;
|
|
if (c > 0) {
|
|
window.requestAnimationFrame(scrollToTop);
|
|
document.querySelector('.card-container').scrollTo(0, c - c / 4);
|
|
}
|
|
};
|
|
function scrollTo(element, to, id, duration) {
|
|
if (duration <= 0) return;
|
|
var difference = to - element.scrollTop;
|
|
var perTick = difference / duration * 40;
|
|
|
|
setTimeout(function() {
|
|
element.scrollTop = element.scrollTop + perTick;
|
|
if (element.scrollTop === to) {
|
|
window.location.href = "#"+id;
|
|
return;
|
|
}
|
|
scrollTo(element, to, id, duration - 40);
|
|
}, 40);
|
|
};
|
|
function loader() {
|
|
if (window.location.href.split('#').length > 1)
|
|
setTimeout(() => document.getElementById(window.location.href.split('#')[1]).scrollIntoView(), 0);
|
|
registerClickListener();
|
|
if(window.innerWidth >= '768')
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === 'String')[0].offsetTop;
|
|
else
|
|
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === 'String')[0].offsetTop;
|
|
}
|
|
function registerClickListener() {
|
|
document.addEventListener('click', function (event) {
|
|
if ( event.target.classList.contains('collapse') ) {
|
|
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
|
}
|
|
else if (event.target.classList.contains('menu-button')) {
|
|
document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
|
document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
|
|
event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
|
|
}
|
|
else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
|
|
document.querySelector('nav').classList = '';
|
|
document.querySelector('[type="search"]').classList = '';
|
|
document.querySelector('.menu-button').classList = 'menu-button';
|
|
}
|
|
else if (event.target.classList.contains('social')){
|
|
if (event.target.classList.contains('fb')){
|
|
window.location = "https://www.facebook.com/30secondsofcode";
|
|
}
|
|
else if (event.target.classList.contains('instagram')) {
|
|
window.location = "https://www.instagram.com/30secondsofcode";
|
|
}
|
|
else if (event.target.classList.contains('twitter')) {
|
|
window.location = "https://twitter.com/30secondsofcode";
|
|
}
|
|
}
|
|
else if (event.target.classList.contains('copy-button')) {
|
|
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = text.trim();
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand("Copy");
|
|
document.body.removeChild(textArea);
|
|
let tst = document.createElement('div');
|
|
tst.classList = 'toast';
|
|
tst.innerHTML = 'Snippet copied to clipboard!';
|
|
document.body.appendChild(tst);
|
|
setTimeout(function() {
|
|
tst.style.opacity = 0;
|
|
setTimeout(function() {
|
|
document.body.removeChild(tst);
|
|
},300);
|
|
},1700);
|
|
}
|
|
}, false);
|
|
}</script></head><body onload="loader()" class="card-page"><a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><button class="menu-button"></button><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search"><nav><h4 class="collapse">Adapter</h4><ul><li><a tags="adapter,function,intermediate" href="./adapter#ary">ary</a></li><li><a tags="adapter,function,intermediate" href="./adapter#call">call</a></li><li><a tags="adapter,function,array,intermediate" href="./adapter#collectinto">collectInto</a></li><li><a tags="adapter,function,intermediate" href="./adapter#flip">flip</a></li><li><a tags="adapter,function,intermediate" href="./adapter#over">over</a></li><li><a tags="adapter,function,intermediate" href="./adapter#overargs">overArgs</a></li><li><a tags="adapter,function,promise,intermediate" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a></li><li><a tags="adapter,function,intermediate" href="./adapter#pipefunctions">pipeFunctions</a></li><li><a tags="adapter,function,promise,intermediate" href="./adapter#promisify">promisify</a></li><li><a tags="adapter,function,intermediate" href="./adapter#rearg">rearg</a></li><li><a tags="adapter,intermediate" href="./adapter#spreadover">spreadOver</a></li><li><a tags="adapter,function,intermediate" href="./adapter#unary">unary</a></li></ul><h4 class="collapse">Array</h4><ul><li><a tags="array,function,beginner" href="./index#all">all</a></li><li><a tags="array,function,beginner" href="./index#allequal">allEqual</a></li><li><a tags="array,function,beginner" href="./index#any">any</a></li><li><a tags="array,string,utility,intermediate" href="./index#arraytocsv">arrayToCSV</a></li><li><a tags="array,intermediate" href="./index#bifurcate">bifurcate</a></li><li><a tags="array,function,intermediate" href="./index#bifurcateby">bifurcateBy</a></li><li><a tags="array,intermediate" href="./index#chunk">chunk</a></li><li><a tags="array,beginner" href="./index#compact">compact</a></li><li><a tags="array,object,intermediate" href="./index#countby">countBy</a></li><li><a tags="array,intermediate" href="./index#countoccurrences">countOccurrences</a></li><li><a tags="array,recursion,intermediate" href="./index#deepflatten">deepFlatten</a></li><li><a tags="array,math,beginner" href="./index#difference">difference</a></li><li><a tags="array,function,intermediate" href="./index#differenceby">differenceBy</a></li><li><a tags="array,function,intermediate" href="./index#differencewith">differenceWith</a></li><li><a tags="array,beginner" href="./index#drop">drop</a></li><li><a tags="array,beginner" href="./index#dropright">dropRight</a></li><li><a tags="array,function,intermediate" href="./index#droprightwhile">dropRightWhile</a></li><li><a tags="array,function,intermediate" href="./index#dropwhile">dropWhile</a></li><li><a tags="array,beginner" href="./index#everynth">everyNth</a></li><li><a tags="array,beginner" href="./index#filterfalsy">filterFalsy</a></li><li><a tags="array,beginner" href="./index#filternonunique">filterNonUnique</a></li><li><a tags="array,function,intermediate" href="./index#filternonuniqueby">filterNonUniqueBy</a></li><li><a tags="array,beginner" href="./index#findlast">findLast</a></li><li><a tags="array,function,intermediate" href="./index#findlastindex">findLastIndex</a></li><li><a tags="array,intermediate" href="./index#flatten">flatten</a></li><li><a tags="array,function,intermediate" href="./index#foreachright">forEachRight</a></li><li><a tags="array,object,intermediate" href="./index#groupby">groupBy</a></li><li><a tags="array,beginner" href="./index#head">head</a></li><li><a tags="array,intermediate" href="./index#indexofall">indexOfAll</a></li><li><a tags="array,beginner" href="./index#initial">initial</a></li><li><a tags="array,intermediate" href="./index#initialize2darray">initialize2DArray</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithrange">initializeArrayWithRange</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithrangeright">initializeArrayWithRangeRight</a></li><li><a tags="array,math,intermediate" href="./index#initializearraywithvalues">initializeArrayWithValues</a></li><li><a tags="array,recursion,intermediate" href="./index#initializendarray">initializeNDArray</a></li><li><a tags="array,math,intermediate" href="./index#intersection">intersection</a></li><li><a tags="array,function,intermediate" href="./index#intersectionby">intersectionBy</a></li><li><a tags="array,function,intermediate" href="./index#intersectionwith">intersectionWith</a></li><li><a tags="array,intermediate" href="./index#issorted">isSorted</a></li><li><a tags="array,intermediate" href="./index#join">join</a></li><li><a tags="array,string,object,advanced" href="./index#jsontocsv">JSONtoCSV</a></li><li><a tags="array,beginner" href="./index#last">last</a></li><li><a tags="array,string,utility,intermediate" href="./index#longestitem">longestItem</a></li><li><a tags="array,object,advanced" href="./index#mapobject">mapObject</a></li><li><a tags="array,math,beginner" href="./index#maxn">maxN</a></li><li><a tags="array,math,beginner" href="./index#minn">minN</a></li><li><a tags="array,function,beginner" href="./index#none">none</a></li><li><a tags="array,beginner" href="./index#nthelement">nthElement</a></li><li><a tags="array,beginner" href="./index#offset">offset</a></li><li><a tags="array,object,function,intermediate" href="./index#partition">partition</a></li><li><a tags="array,recursion,advanced" href="./index#permutations">permutations</a></li><li><a tags="array,intermediate" href="./index#pull">pull</a></li><li><a tags="array,advanced" href="./index#pullatindex">pullAtIndex</a></li><li><a tags="array,advanced" href="./index#pullatvalue">pullAtValue</a></li><li><a tags="array,function,advanced" href="./index#pullby">pullBy</a></li><li><a tags="array,intermediate" href="./index#reducedfilter">reducedFilter</a></li><li><a tags="array,function,intermediate" href="./index#reducesuccessive">reduceSuccessive</a></li><li><a tags="array,function,intermediate" href="./index#reducewhich">reduceWhich</a></li><li><a tags="array,beginner" href="./index#reject">reject</a></li><li><a tags="array,intermediate" href="./index#remove">remove</a></li><li><a tags="array,random,beginner" href="./index#sample">sample</a></li><li><a tags="array,random,intermediate" href="./index#samplesize">sampleSize</a></li><li><a tags="array,intermediate" href="./index#shank">shank</a></li><li><a tags="array,random,intermediate" href="./index#shuffle">shuffle</a></li><li><a tags="array,math,beginner" href="./index#similarity">similarity</a></li><li><a tags="array,math,intermediate" href="./index#sortedindex">sortedIndex</a></li><li><a tags="array,math,function,intermediate" href="./index#sortedindexby">sortedIndexBy</a></li><li><a tags="array,math,intermediate" href="./index#sortedlastindex">sortedLastIndex</a></li><li><a tags="array,math,function,intermediate" href="./index#sortedlastindexby">sortedLastIndexBy</a></li><li><a tags="array,sort,advanced,intermediate" href="./index#stablesort">stableSort</a></li><li><a tags="array,math,intermediate" href="./index#symmetricdifference">symmetricDifference</a></li><li><a tags="array,function,intermediate" href="./index#symmetricdifferenceby">symmetricDifferenceBy</a></li><li><a tags="array,function,intermediate" href="./index#symmetricdifferencewith">symmetricDifferenceWith</a></li><li><a tags="array,beginner" href="./index#tail">tail</a></li><li><a tags="array,beginner" href="./index#take">take</a></li><li><a tags="array,intermediate" href="./index#takeright">takeRight</a></li><li><a tags="array,function,intermediate" href="./index#takerightwhile">takeRightWhile</a></li><li><a tags="array,function,intermediate" href="./index#takewhile">takeWhile</a></li><li><a tags="array,intermediate" href="./index#tohash">toHash</a></li><li><a tags="array,math,beginner" href="./index#union">union</a></li><li><a tags="array,function,intermediate" href="./index#unionby">unionBy</a></li><li><a tags="array,function,intermediate" href="./index#unionwith">unionWith</a></li><li><a tags="array,beginner" href="./index#uniqueelements">uniqueElements</a></li><li><a tags="array,function,intermediate" href="./index#uniqueelementsby">uniqueElementsBy</a></li><li><a tags="array,function,intermediate" href="./index#uniqueelementsbyright">uniqueElementsByRight</a></li><li><a tags="array,math,intermediate" href="./index#uniquesymmetricdifference">uniqueSymmetricDifference</a></li><li><a tags="array,intermediate" href="./index#unzip">unzip</a></li><li><a tags="array,function,advanced" href="./index#unzipwith">unzipWith</a></li><li><a tags="array,beginner" href="./index#without">without</a></li><li><a tags="array,math,intermediate" href="./index#xprod">xProd</a></li><li><a tags="array,intermediate" href="./index#zip">zip</a></li><li><a tags="array,object,intermediate" href="./index#zipobject">zipObject</a></li><li><a tags="array,function,advanced" href="./index#zipwith">zipWith</a></li></ul><h4 class="collapse">Browser</h4><ul><li><a tags="browser,array,intermediate" href="./browser#arraytohtmllist">arrayToHtmlList</a></li><li><a tags="browser,intermediate" href="./browser#bottomvisible">bottomVisible</a></li><li><a tags="browser,string,advanced" href="./browser#copytoclipboard">copyToClipboard</a></li><li><a tags="browser,advanced" href="./browser#counter">counter</a></li><li><a tags="browser,utility,beginner" href="./browser#createelement">createElement</a></li><li><a tags="browser,event,advanced" href="./browser#createeventhub">createEventHub</a></li><li><a tags="browser,url,beginner" href="./browser#currenturl">currentURL</a></li><li><a tags="browser,intermediate" href="./browser#detectdevicetype">detectDeviceType</a></li><li><a tags="browser,intermediate" href="./browser#elementcontains">elementContains</a></li><li><a tags="browser,advanced" href="./browser#elementisvisibleinviewport">elementIsVisibleInViewport</a></li><li><a tags="browser,object,intermediate" href="./browser#formtoobject">formToObject</a></li><li><a tags="browser,beginner" href="./browser#getimages">getImages</a></li><li><a tags="browser,intermediate" href="./browser#getscrollposition">getScrollPosition</a></li><li><a tags="browser,css,beginner" href="./browser#getstyle">getStyle</a></li><li><a tags="browser,css,beginner" href="./browser#hasclass">hasClass</a></li><li><a tags="browser,utility,advanced,promise,advanced" href="./browser#hashbrowser">hashBrowser</a></li><li><a tags="browser,css,beginner" href="./browser#hide">hide</a></li><li><a tags="browser,url,intermediate" href="./browser#httpsredirect">httpsRedirect</a></li><li><a tags="browser,beginner" href="./browser#insertafter">insertAfter</a></li><li><a tags="browser,beginner" href="./browser#insertbefore">insertBefore</a></li><li><a tags="browser,beginner" href="./browser#isbrowsertabfocused">isBrowserTabFocused</a></li><li><a tags="browser,array,beginner" href="./browser#nodelisttoarray">nodeListToArray</a></li><li><a tags="browser,event,advanced" href="./browser#observemutations">observeMutations</a></li><li><a tags="browser,event,intermediate" href="./browser#off">off</a></li><li><a tags="browser,event,intermediate" href="./browser#on">on</a></li><li><a tags="browser,event,advanced" href="./browser#onuserinputchange">onUserInputChange</a></li><li><a tags="browser,utility,intermediate" href="./browser#prefix">prefix</a></li><li><a tags="browser,utility,intermediate" href="./browser#recordanimationframes">recordAnimationFrames</a></li><li><a tags="browser,url,beginner" href="./browser#redirect">redirect</a></li><li><a tags="browser,function,advanced,promise,url" href="./browser#runasync">runAsync</a></li><li><a tags="browser,intermediate" href="./browser#scrolltotop">scrollToTop</a></li><li><a tags="browser,string,intermediate" href="./browser#serializeform">serializeForm</a></li><li><a tags="browser,beginner" href="./browser#setstyle">setStyle</a></li><li><a tags="browser,css,beginner" href="./browser#show">show</a></li><li><a tags="browser,css,intermediate" href="./browser#smoothscroll">smoothScroll</a></li><li><a tags="browser,beginner" href="./browser#toggleclass">toggleClass</a></li><li><a tags="browser,event,intermediate" href="./browser#triggerevent">triggerEvent</a></li><li><a tags="browser,utility,random,intermediate" href="./browser#uuidgeneratorbrowser">UUIDGeneratorBrowser</a></li></ul><h4 class="collapse">Date</h4><ul><li><a tags="date,beginner" href="./date#dayofyear">dayOfYear</a></li><li><a tags="date,math,string,utility,intermediate" href="./date#formatduration">formatDuration</a></li><li><a tags="date,intermediate" href="./date#getcolontimefromdate">getColonTimeFromDate</a></li><li><a tags="date,intermediate" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a></li><li><a tags="date,beginner" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a></li><li><a tags="date,utility,beginner" href="./date#isafterdate">isAfterDate</a></li><li><a tags="date,utility,beginner" href="./date#isbeforedate">isBeforeDate</a></li><li><a tags="date,utility,beginner" href="./date#issamedate">isSameDate</a></li><li><a tags="date,beginner" href="./date#isweekday">isWeekday</a></li><li><a tags="date,beginner" href="./date#isweekend">isWeekend</a></li><li><a tags="date,math,beginner" href="./date#maxdate">maxDate</a></li><li><a tags="date,math,beginner" href="./date#mindate">minDate</a></li><li><a tags="date,intermediate" href="./date#tomorrow">tomorrow</a></li><li><a tags="date,intermediate" href="./date#yesterday">yesterday</a></li></ul><h4 class="collapse">Function</h4><ul><li><a tags="function,intermediate" href="./function#attempt">attempt</a></li><li><a tags="function,object,intermediate" href="./function#bind">bind</a></li><li><a tags="function,object,intermediate" href="./function#bindkey">bindKey</a></li><li><a tags="function,intermediate" href="./function#chainasync">chainAsync</a></li><li><a tags="function,object,utility,beginner" href="./function#checkprop">checkProp</a></li><li><a tags="function,intermediate" href="./function#compose">compose</a></li><li><a tags="function,intermediate" href="./function#composeright">composeRight</a></li><li><a tags="function,intermediate" href="./function#converge">converge</a></li><li><a tags="function,recursion,intermediate" href="./function#curry">curry</a></li><li><a tags="function,intermediate" href="./function#debounce">debounce</a></li><li><a tags="function,intermediate" href="./function#defer">defer</a></li><li><a tags="function,intermediate" href="./function#delay">delay</a></li><li><a tags="function,utility,beginner" href="./function#functionname">functionName</a></li><li><a tags="function,intermediate" href="./function#hz">hz</a></li><li><a tags="function,advanced" href="./function#memoize">memoize</a></li><li><a tags="function,beginner" href="./function#negate">negate</a></li><li><a tags="function,intermediate" href="./function#once">once</a></li><li><a tags="function,intermediate" href="./function#partial">partial</a></li><li><a tags="function,intermediate" href="./function#partialright">partialRight</a></li><li><a tags="function,promise,intermediate" href="./function#runpromisesinseries">runPromisesInSeries</a></li><li><a tags="function,promise,intermediate" href="./function#sleep">sleep</a></li><li><a tags="function,advanced" href="./function#throttle">throttle</a></li><li><a tags="function,intermediate" href="./function#times">times</a></li><li><a tags="function,intermediate" href="./function#uncurry">uncurry</a></li><li><a tags="function,array,intermediate" href="./function#unfold">unfold</a></li><li><a tags="function,intermediate" href="./function#when">when</a></li></ul><h4 class="collapse">Math</h4><ul><li><a tags="math,beginner" href="./math#approximatelyequal">approximatelyEqual</a></li><li><a tags="math,array,beginner" href="./math#average">average</a></li><li><a tags="math,array,function,intermediate" href="./math#averageby">averageBy</a></li><li><a tags="math,intermediate" href="./math#binomialcoefficient">binomialCoefficient</a></li><li><a tags="math,beginner" href="./math#clampnumber">clampNumber</a></li><li><a tags="math,beginner" href="./math#degreestorads">degreesToRads</a></li><li><a tags="math,array,beginner" href="./math#digitize">digitize</a></li><li><a tags="math,beginner" href="./math#distance">distance</a></li><li><a tags="math,array,advanced" href="./math#elo">elo</a></li><li><a tags="math,recursion,beginner" href="./math#factorial">factorial</a></li><li><a tags="math,array,beginner" href="./math#fibonacci">fibonacci</a></li><li><a tags="math,recursion,beginner" href="./math#gcd">gcd</a></li><li><a tags="math,intermediate" href="./math#geometricprogression">geometricProgression</a></li><li><a tags="math,beginner" href="./math#hammingdistance">hammingDistance</a></li><li><a tags="math,beginner" href="./math#inrange">inRange</a></li><li><a tags="math,beginner" href="./math#isdivisible">isDivisible</a></li><li><a tags="math,beginner" href="./math#iseven">isEven</a></li><li><a tags="math,utility,beginner" href="./math#isnegativezero">isNegativeZero</a></li><li><a tags="math,beginner,intermediate" href="./math#isprime">isPrime</a></li><li><a tags="math,recursion,beginner" href="./math#lcm">lcm</a></li><li><a tags="math,utility,advanced" href="./math#luhncheck">luhnCheck</a></li><li><a tags="math,beginner" href="./math#mapnumrange">mapNumRange</a></li><li><a tags="math,array,function,beginner" href="./math#maxby">maxBy</a></li><li><a tags="math,array,intermediate" href="./math#median">median</a></li><li><a tags="math,array,beginner" href="./math#midpoint">midpoint</a></li><li><a tags="math,array,function,beginner" href="./math#minby">minBy</a></li><li><a tags="math,intermediate" href="./math#percentile">percentile</a></li><li><a tags="math,beginner" href="./math#powerset">powerset</a></li><li><a tags="math,array,intermediate" href="./math#primes">primes</a></li><li><a tags="math,beginner" href="./math#radstodegrees">radsToDegrees</a></li><li><a tags="math,utility,random,intermediate" href="./math#randomintarrayinrange">randomIntArrayInRange</a></li><li><a tags="math,utility,random,beginner" href="./math#randomintegerinrange">randomIntegerInRange</a></li><li><a tags="math,utility,random,beginner" href="./math#randomnumberinrange">randomNumberInRange</a></li><li><a tags="math,intermediate" href="./math#round">round</a></li><li><a tags="math,utility,intermediate" href="./math#sdbm">sdbm</a></li><li><a tags="math,array,intermediate" href="./math#standarddeviation">standardDeviation</a></li><li><a tags="math,array,beginner" href="./math#sum">sum</a></li><li><a tags="math,array,function,intermediate" href="./math#sumby">sumBy</a></li><li><a tags="math,intermediate" href="./math#sumpower">sumPower</a></li><li><a tags="math,beginner" href="./math#tosafeinteger">toSafeInteger</a></li><li><a tags="math,beginner" href="./math#vectordistance">vectorDistance</a></li></ul><h4 class="collapse">Node</h4><ul><li><a tags="node,string,utility,beginner" href="./node#atob">atob</a></li><li><a tags="node,string,utility,beginner" href="./node#btoa">btoa</a></li><li><a tags="node,utility,string,intermediate" href="./node#colorize">colorize</a></li><li><a tags="node,beginner" href="./node#createdirifnotexists">createDirIfNotExists</a></li><li><a tags="node,intermediate" href="./node#hasflags">hasFlags</a></li><li><a tags="node,utility,promise,intermediate" href="./node#hashnode">hashNode</a></li><li><a tags="node,type,intermediate" href="./node#isduplexstream">isDuplexStream</a></li><li><a tags="node,type,intermediate" href="./node#isreadablestream">isReadableStream</a></li><li><a tags="node,type,intermediate" href="./node#isstream">isStream</a></li><li><a tags="node,intermediate" href="./node#istravisci">isTravisCI</a></li><li><a tags="node,type,intermediate" href="./node#iswritablestream">isWritableStream</a></li><li><a tags="node,json,intermediate" href="./node#jsontofile">JSONToFile</a></li><li><a tags="node,array,string,beginner" href="./node#readfilelines">readFileLines</a></li><li><a tags="node,string,beginner" href="./node#untildify">untildify</a></li><li><a tags="node,utility,random,intermediate" href="./node#uuidgeneratornode">UUIDGeneratorNode</a></li></ul><h4 class="collapse">Object</h4><ul><li><a tags="object,function,intermediate" href="./object#bindall">bindAll</a></li><li><a tags="object,recursion,intermediate" href="./object#deepclone">deepClone</a></li><li><a tags="object,recursion,intermediate" href="./object#deepfreeze">deepFreeze</a></li><li><a tags="object,intermediate" href="./object#deepget">deepGet</a></li><li><a tags="object,recursion,advanced" href="./object#deepmapkeys">deepMapKeys</a></li><li><a tags="object,intermediate" href="./object#defaults">defaults</a></li><li><a tags="object,recursion,intermediate" href="./object#dig">dig</a></li><li><a tags="object,array,type,advanced" href="./object#equals">equals</a></li><li><a tags="object,function,intermediate" href="./object#findkey">findKey</a></li><li><a tags="object,function,intermediate" href="./object#findlastkey">findLastKey</a></li><li><a tags="object,recursion,intermediate" href="./object#flattenobject">flattenObject</a></li><li><a tags="object,intermediate" href="./object#forown">forOwn</a></li><li><a tags="object,intermediate" href="./object#forownright">forOwnRight</a></li><li><a tags="object,function,intermediate" href="./object#functions">functions</a></li><li><a tags="object,intermediate" href="./object#get">get</a></li><li><a tags="object,function,intermediate" href="./object#invertkeyvalues">invertKeyValues</a></li><li><a tags="object,intermediate" href="./object#lowercasekeys">lowercaseKeys</a></li><li><a tags="object,function,intermediate" href="./object#mapkeys">mapKeys</a></li><li><a tags="object,function,intermediate" href="./object#mapvalues">mapValues</a></li><li><a tags="object,type,intermediate" href="./object#matches">matches</a></li><li><a tags="object,type,function,intermediate" href="./object#matcheswith">matchesWith</a></li><li><a tags="object,array,intermediate" href="./object#merge">merge</a></li><li><a tags="object,intermediate" href="./object#nest">nest</a></li><li><a tags="object,array,beginner" href="./object#objectfrompairs">objectFromPairs</a></li><li><a tags="object,array,beginner" href="./object#objecttopairs">objectToPairs</a></li><li><a tags="object,array,intermediate" href="./object#omit">omit</a></li><li><a tags="object,array,function,intermediate" href="./object#omitby">omitBy</a></li><li><a tags="object,array,intermediate" href="./object#orderby">orderBy</a></li><li><a tags="object,array,intermediate" href="./object#pick">pick</a></li><li><a tags="object,array,function,intermediate" href="./object#pickby">pickBy</a></li><li><a tags="object,intermediate" href="./object#renamekeys">renameKeys</a></li><li><a tags="object,beginner" href="./object#shallowclone">shallowClone</a></li><li><a tags="object,array,string,intermediate" href="./object#size">size</a></li><li><a tags="object,array,intermediate" href="./object#transform">transform</a></li><li><a tags="object,logic,array,intermediate" href="./object#truthcheckcollection">truthCheckCollection</a></li><li><a tags="object,advanced" href="./object#unflattenobject">unflattenObject</a></li></ul><h4 class="collapse">String</h4><ul><li><a tags="string,beginner" href="#bytesize">byteSize</a></li><li><a tags="string,array,intermediate" href="#capitalize">capitalize</a></li><li><a tags="string,regexp,intermediate" href="#capitalizeeveryword">capitalizeEveryWord</a></li><li><a tags="string,regexp,beginner" href="#compactwhitespace">compactWhitespace</a></li><li><a tags="string,array,utility,intermediate" href="#csvtoarray">CSVToArray</a></li><li><a tags="string,array,object,advanced" href="#csvtojson">CSVToJSON</a></li><li><a tags="string,array,intermediate" href="#decapitalize">decapitalize</a></li><li><a tags="string,browser,regexp,intermediate" href="#escapehtml">escapeHTML</a></li><li><a tags="string,regexp,intermediate" href="#escaperegexp">escapeRegExp</a></li><li><a tags="string,intermediate" href="#fromcamelcase">fromCamelCase</a></li><li><a tags="string,utility,beginner" href="#indentstring">indentString</a></li><li><a tags="string,utility,browser,url,intermediate" href="#isabsoluteurl">isAbsoluteURL</a></li><li><a tags="string,regexp,intermediate" href="#isanagram">isAnagram</a></li><li><a tags="string,utility,beginner" href="#islowercase">isLowerCase</a></li><li><a tags="string,utility,beginner" href="#isuppercase">isUpperCase</a></li><li><a tags="string,array,function,utility,beginner" href="#mapstring">mapString</a></li><li><a tags="string,utility,regexp,intermediate" href="#mask">mask</a></li><li><a tags="string,beginner" href="#pad">pad</a></li><li><a tags="string,intermediate" href="#palindrome">palindrome</a></li><li><a tags="string,intermediate" href="#pluralize">pluralize</a></li><li><a tags="string,regexp,intermediate" href="#removenonascii">removeNonASCII</a></li><li><a tags="string,array,beginner" href="#reversestring">reverseString</a></li><li><a tags="string,beginner" href="#sortcharactersinstring">sortCharactersInString</a></li><li><a tags="string,beginner" href="#splitlines">splitLines</a></li><li><a tags="string,recursion,advanced" href="#stringpermutations">stringPermutations</a></li><li><a tags="string,utility,regexp,beginner" href="#striphtmltags">stripHTMLTags</a></li><li><a tags="string,regexp,intermediate" href="#tocamelcase">toCamelCase</a></li><li><a tags="string,regexp,intermediate" href="#tokebabcase">toKebabCase</a></li><li><a tags="string,regexp,intermediate" href="#tosnakecase">toSnakeCase</a></li><li><a tags="string,regepx,intermediate" href="#totitlecase">toTitleCase</a></li><li><a tags="string,beginner" href="#truncatestring">truncateString</a></li><li><a tags="string,browser,beginner" href="#unescapehtml">unescapeHTML</a></li><li><a tags="string,utility,regexp,advanced" href="#urljoin">URLJoin</a></li><li><a tags="string,regexp,intermediate" href="#words">words</a></li></ul><h4 class="collapse">Type</h4><ul><li><a tags="type,beginner" href="./type#gettype">getType</a></li><li><a tags="type,array,regexp,beginner" href="./type#is">is</a></li><li><a tags="type,array,intermediate" href="./type#isarraylike">isArrayLike</a></li><li><a tags="type,beginner" href="./type#isboolean">isBoolean</a></li><li><a tags="type,array,object,string,beginner" href="./type#isempty">isEmpty</a></li><li><a tags="type,function,beginner" href="./type#isfunction">isFunction</a></li><li><a tags="type,beginner" href="./type#isnil">isNil</a></li><li><a tags="type,beginner" href="./type#isnull">isNull</a></li><li><a tags="type,math,beginner" href="./type#isnumber">isNumber</a></li><li><a tags="type,object,beginner" href="./type#isobject">isObject</a></li><li><a tags="type,object,beginner" href="./type#isobjectlike">isObjectLike</a></li><li><a tags="type,object,intermediate" href="./type#isplainobject">isPlainObject</a></li><li><a tags="type,function,array,string,intermediate" href="./type#isprimitive">isPrimitive</a></li><li><a tags="type,function,promise,intermediate" href="./type#ispromiselike">isPromiseLike</a></li><li><a tags="type,string,beginner" href="./type#isstring">isString</a></li><li><a tags="type,beginner" href="./type#issymbol">isSymbol</a></li><li><a tags="type,beginner" href="./type#isundefined">isUndefined</a></li><li><a tags="type,json,intermediate" href="./type#isvalidjson">isValidJSON</a></li></ul><h4 class="collapse">Utility</h4><ul><li><a tags="utility,array,type,beginner" href="./utility#castarray">castArray</a></li><li><a tags="utility,regexp,intermediate" href="./utility#cloneregexp">cloneRegExp</a></li><li><a tags="utility,beginner" href="./utility#coalesce">coalesce</a></li><li><a tags="utility,intermediate" href="./utility#coalescefactory">coalesceFactory</a></li><li><a tags="utility,string,intermediate" href="./utility#extendhex">extendHex</a></li><li><a tags="utility,browser,string,url,intermediate" href="./utility#geturlparameters">getURLParameters</a></li><li><a tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a></li><li><a tags="utility,url,browser,intermediate" href="./utility#httpget">httpGet</a></li><li><a tags="utility,url,browser,intermediate" href="./utility#httppost">httpPost</a></li><li><a tags="utility,browser,intermediate" href="./utility#isbrowser">isBrowser</a></li><li><a tags="utility,function" href="./utility#mostperformant">mostPerformant</a></li><li><a tags="utility,function,beginner" href="./utility#ntharg">nthArg</a></li><li><a tags="utility,string,intermediate" href="./utility#parsecookie">parseCookie</a></li><li><a tags="utility,string,math,advanced" href="./utility#prettybytes">prettyBytes</a></li><li><a tags="utility,random,beginner" href="./utility#randomhexcolorcode">randomHexColorCode</a></li><li><a tags="utility,intermediate" href="./utility#rgbtohex">RGBToHex</a></li><li><a tags="utility,string,intermediate" href="./utility#serializecookie">serializeCookie</a></li><li><a tags="utility,beginner" href="./utility#timetaken">timeTaken</a></li><li><a tags="utility,intermediate" href="./utility#tocurrency">toCurrency</a></li><li><a tags="utility,math,beginner" href="./utility#todecimalmark">toDecimalMark</a></li><li><a tags="utility,math,intermediate" href="./utility#toordinalsuffix">toOrdinalSuffix</a></li><li><a tags="utility,math,intermediate" href="./utility#validatenumber">validateNumber</a></li><li><a tags="utility,regexp,intermediate" href="./utility#yesno">yesNo</a></li></ul><h4 class="static-link"><a href="./archive">Archive</a></h4><h4 class="static-link"><a href="./glossary">Glossary</a></h4><h4 class="static-link"><a href="./contributing">Contributing</a></h4><h4 class="static-link"><a href="./about">About</a></h4><div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div></nav><main class="col-centered"><span id="top"><br/><br/></span><h2 class="category-name">String</h2><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="bytesize">byteSize</h4><p>Returns the length of a string in bytes.</p><p>Convert a given string to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob"><code>Blob</code> Object</a> and find its <code>size</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">byteSize</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">([</span>str<span class="token punctuation">]).</span>size<span class="token punctuation">;</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">byteSize</span><span class="token punctuation">(</span><span class="token string">'😀'</span><span class="token punctuation">);</span> <span class="token comment">// 4</span>
|
|
<span class="token function">byteSize</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">);</span> <span class="token comment">// 11</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="capitalize">capitalize</h4><p>Capitalizes the first letter of a string.</p><p>Use array destructuring and <code>String.prototype.toUpperCase()</code> to capitalize first letter, <code>...rest</code> to get array of characters after first letter and then <code>Array.prototype.join('')</code> to make it a string again. Omit the <code>lowerRest</code> parameter to keep the rest of the string intact, or set it to <code>true</code> to convert to lowercase.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">capitalize</span> <span class="token operator">=</span> <span class="token punctuation">([</span>first<span class="token punctuation">,</span> <span class="token operator">...</span>rest<span class="token punctuation">],</span> lowerRest <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
first<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> <span class="token punctuation">(</span>lowerRest <span class="token operator">?</span> rest<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">).</span><span class="token function">toLowerCase</span><span class="token punctuation">() :</span> rest<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">));</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">capitalize</span><span class="token punctuation">(</span><span class="token string">'fooBar'</span><span class="token punctuation">);</span> <span class="token comment">// 'FooBar'</span>
|
|
<span class="token function">capitalize</span><span class="token punctuation">(</span><span class="token string">'fooBar'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// 'Foobar'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="capitalizeeveryword">capitalizeEveryWord</h4><p>Capitalizes the first letter of every word in a string.</p><p>Use <code>String.prototype.replace()</code> to match the first character of each word and <code>String.prototype.toUpperCase()</code> to capitalize it.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">capitalizeEveryWord</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\b[a-z]/g</span><span class="token punctuation">,</span> char <span class="token operator">=></span> char<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">());</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">capitalizeEveryWord</span><span class="token punctuation">(</span><span class="token string">'hello world!'</span><span class="token punctuation">);</span> <span class="token comment">// 'Hello World!'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="compactwhitespace">compactWhitespace</h4><p>Returns a string with whitespaces compacted.</p><p>Use <code>String.prototype.replace()</code> with a regular expression to replace all occurrences of 2 or more whitespace characters with a single space.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">compactWhitespace</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\s{2,}/g</span><span class="token punctuation">,</span> <span class="token string">' '</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">compactWhitespace</span><span class="token punctuation">(</span><span class="token string">'Lorem Ipsum'</span><span class="token punctuation">);</span> <span class="token comment">// 'Lorem Ipsum'</span>
|
|
<span class="token function">compactWhitespace</span><span class="token punctuation">(</span><span class="token string">'Lorem \n Ipsum'</span><span class="token punctuation">);</span> <span class="token comment">// 'Lorem Ipsum'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="csvtoarray">CSVToArray</h4><p>Converts a comma-separated values (CSV) string to a 2D array.</p><p>Use <code>Array.prototype.slice()</code> and <code>Array.prototype.indexOf('\n')</code> to remove the first row (title row) if <code>omitFirstRow</code> is <code>true</code>. Use <code>String.prototype.split('\n')</code> to create a string for each row, then <code>String.prototype.split(delimiter)</code> to separate the values in each row. Omit the second argument, <code>delimiter</code>, to use a default delimiter of <code>,</code>. Omit the third argument, <code>omitFirstRow</code>, to include the first row (title row) of the CSV string.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> CSVToArray <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> delimiter <span class="token operator">=</span> <span class="token string">','</span><span class="token punctuation">,</span> omitFirstRow <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
data
|
|
<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>omitFirstRow <span class="token operator">?</span> data<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">)
|
|
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> v<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>delimiter<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">CSVToArray</span><span class="token punctuation">(</span><span class="token string">'a,b\nc,d'</span><span class="token punctuation">);</span> <span class="token comment">// [['a','b'],['c','d']];</span>
|
|
<span class="token function">CSVToArray</span><span class="token punctuation">(</span><span class="token string">'a;b\nc;d'</span><span class="token punctuation">,</span> <span class="token string">';'</span><span class="token punctuation">);</span> <span class="token comment">// [['a','b'],['c','d']];</span>
|
|
<span class="token function">CSVToArray</span><span class="token punctuation">(</span><span class="token string">'col1,col2\na,b\nc,d'</span><span class="token punctuation">,</span> <span class="token string">','</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// [['a','b'],['c','d']];</span>
|
|
</pre></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="csvtojson">CSVToJSON</h4><p>Converts a comma-separated values (CSV) string to a 2D array of objects. The first row of the string is used as the title row.</p><p>Use <code>Array.prototype.slice()</code> and <code>Array.prototype.indexOf('\n')</code> and <code>String.prototype.split(delimiter)</code> to separate the first row (title row) into values. Use <code>String.prototype.split('\n')</code> to create a string for each row, then <code>Array.prototype.map()</code> and <code>String.prototype.split(delimiter)</code> to separate the values in each row. Use <code>Array.prototype.reduce()</code> to create an object for each row's values, with the keys parsed from the title row. Omit the second argument, <code>delimiter</code>, to use a default delimiter of <code>,</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> CSVToJSON <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">,</span> delimiter <span class="token operator">=</span> <span class="token string">','</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> titles <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)).</span><span class="token function">split</span><span class="token punctuation">(</span>delimiter<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> data
|
|
<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)
|
|
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>v <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> values <span class="token operator">=</span> v<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>delimiter<span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> titles<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">((</span>obj<span class="token punctuation">,</span> title<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">((</span>obj<span class="token punctuation">[</span>title<span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">[</span>index<span class="token punctuation">]),</span> obj<span class="token punctuation">), {});
|
|
});
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">CSVToJSON</span><span class="token punctuation">(</span><span class="token string">'col1,col2\na,b\nc,d'</span><span class="token punctuation">);</span> <span class="token comment">// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];</span>
|
|
<span class="token function">CSVToJSON</span><span class="token punctuation">(</span><span class="token string">'col1;col2\na;b\nc;d'</span><span class="token punctuation">,</span> <span class="token string">';'</span><span class="token punctuation">);</span> <span class="token comment">// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="decapitalize">decapitalize</h4><p>Decapitalizes the first letter of a string.</p><p>Use array destructuring and <code>String.toLowerCase()</code> to decapitalize first letter, <code>...rest</code> to get array of characters after first letter and then <code>Array.prototype.join('')</code> to make it a string again. Omit the <code>upperRest</code> parameter to keep the rest of the string intact, or set it to <code>true</code> to convert to uppercase.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">decapitalize</span> <span class="token operator">=</span> <span class="token punctuation">([</span>first<span class="token punctuation">,</span> <span class="token operator">...</span>rest<span class="token punctuation">],</span> upperRest <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
first<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> <span class="token punctuation">(</span>upperRest <span class="token operator">?</span> rest<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">).</span><span class="token function">toUpperCase</span><span class="token punctuation">() :</span> rest<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">));</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">decapitalize</span><span class="token punctuation">(</span><span class="token string">'FooBar'</span><span class="token punctuation">);</span> <span class="token comment">// 'fooBar'</span>
|
|
<span class="token function">decapitalize</span><span class="token punctuation">(</span><span class="token string">'FooBar'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// 'fOOBAR'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="escapehtml">escapeHTML</h4><p>Escapes a string for use in HTML.</p><p>Use <code>String.prototype.replace()</code> with a regexp that matches the characters that need to be escaped, using a callback function to replace each character instance with its associated escaped character using a dictionary (object).</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">escapeHTML</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
|
|
<span class="token regex">/[&<>'"]/g</span><span class="token punctuation">,</span>
|
|
tag <span class="token operator">=></span>
|
|
<span class="token punctuation">({</span>
|
|
<span class="token string">'&'</span><span class="token punctuation">:</span> <span class="token string">'&amp;'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'<'</span><span class="token punctuation">:</span> <span class="token string">'&lt;'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'>'</span><span class="token punctuation">:</span> <span class="token string">'&gt;'</span><span class="token punctuation">,</span>
|
|
<span class="token string">"'"</span><span class="token punctuation">:</span> <span class="token string">'&#39;'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'"'</span><span class="token punctuation">:</span> <span class="token string">'&quot;'</span>
|
|
<span class="token punctuation">}[</span>tag<span class="token punctuation">]</span> <span class="token operator">||</span> tag<span class="token punctuation">)
|
|
);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">escapeHTML</span><span class="token punctuation">(</span><span class="token string">'<a href="#">Me & you</a>'</span><span class="token punctuation">);</span> <span class="token comment">// '&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="escaperegexp">escapeRegExp</h4><p>Escapes a string to use in a regular expression.</p><p>Use <code>String.prototype.replace()</code> to escape special characters.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">escapeRegExp</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[.*+?^${}()|[\]\\]/g</span><span class="token punctuation">,</span> <span class="token string">'\\$&'</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">escapeRegExp</span><span class="token punctuation">(</span><span class="token string">'(test)'</span><span class="token punctuation">);</span> <span class="token comment">// \\(test\\)</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="fromcamelcase">fromCamelCase</h4><p>Converts a string from camelcase.</p><p>Use <code>String.prototype.replace()</code> to remove underscores, hyphens, and spaces and convert words to camelcase. Omit the second argument to use a default <code>separator</code> of <code>_</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> fromCamelCase <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> separator <span class="token operator">=</span> <span class="token string">'_'</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/([a-z\d])([A-Z])/g</span><span class="token punctuation">,</span> <span class="token string">'$1'</span> <span class="token operator">+</span> separator <span class="token operator">+</span> <span class="token string">'$2'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/([A-Z]+)([A-Z][a-z\d]+)/g</span><span class="token punctuation">,</span> <span class="token string">'$1'</span> <span class="token operator">+</span> separator <span class="token operator">+</span> <span class="token string">'$2'</span><span class="token punctuation">)
|
|
.</span><span class="token function">toLowerCase</span><span class="token punctuation">();</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">fromCamelCase</span><span class="token punctuation">(</span><span class="token string">'someDatabaseFieldName'</span><span class="token punctuation">,</span> <span class="token string">' '</span><span class="token punctuation">);</span> <span class="token comment">// 'some database field name'</span>
|
|
<span class="token function">fromCamelCase</span><span class="token punctuation">(</span><span class="token string">'someLabelThatNeedsToBeCamelized'</span><span class="token punctuation">,</span> <span class="token string">'-'</span><span class="token punctuation">);</span> <span class="token comment">// 'some-label-that-needs-to-be-camelized'</span>
|
|
<span class="token function">fromCamelCase</span><span class="token punctuation">(</span><span class="token string">'someJavascriptProperty'</span><span class="token punctuation">,</span> <span class="token string">'_'</span><span class="token punctuation">);</span> <span class="token comment">// 'some_javascript_property'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="indentstring">indentString</h4><p>Indents each line in the provided string.</p><p>Use <code>String.replace</code> and a regular expression to add the character specified by <code>indent</code> <code>count</code> times at the start of each line. Omit the third parameter, <code>indent</code>, to use a default indentation character of <code>' '</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> indentString <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> count<span class="token punctuation">,</span> indent <span class="token operator">=</span> <span class="token string">' '</span><span class="token punctuation">)</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/^/gm</span><span class="token punctuation">,</span> indent<span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span>count<span class="token punctuation">));</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">indentString</span><span class="token punctuation">(</span><span class="token string">'Lorem\nIpsum'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// ' Lorem\n Ipsum'</span>
|
|
<span class="token function">indentString</span><span class="token punctuation">(</span><span class="token string">'Lorem\nIpsum'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'_'</span><span class="token punctuation">);</span> <span class="token comment">// '__Lorem\n__Ipsum'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="isabsoluteurl">isAbsoluteURL</h4><p>Returns <code>true</code> if the given string is an absolute URL, <code>false</code> otherwise.</p><p>Use a regular expression to test if the string is an absolute URL.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isAbsoluteURL</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token regex">/^[a-z][a-z0-9+.-]*:/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isAbsoluteURL</span><span class="token punctuation">(</span><span class="token string">'https://google.com'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isAbsoluteURL</span><span class="token punctuation">(</span><span class="token string">'ftp://www.myserver.net'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isAbsoluteURL</span><span class="token punctuation">(</span><span class="token string">'/foo/bar'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="isanagram">isAnagram</h4><p>Checks if a string is an anagram of another string (case-insensitive, ignores spaces, punctuation and special characters).</p><p>Use <code>String.toLowerCase()</code>, <code>String.prototype.replace()</code> with an appropriate regular expression to remove unnecessary characters, <code>String.prototype.split('')</code>, <code>Array.prototype.sort()</code> and <code>Array.prototype.join('')</code> on both strings to normalize them, then check if their normalized forms are equal.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isAnagram</span> <span class="token operator">=</span> <span class="token punctuation">(</span>str1<span class="token punctuation">,</span> str2<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">normalize</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">()
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[^a-z0-9]/gi</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)
|
|
.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)
|
|
.</span><span class="token function">sort</span><span class="token punctuation">()
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> <span class="token function">normalize</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token function">normalize</span><span class="token punctuation">(</span>str2<span class="token punctuation">);
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isAnagram</span><span class="token punctuation">(</span><span class="token string">'iceman'</span><span class="token punctuation">,</span> <span class="token string">'cinema'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="islowercase">isLowerCase</h4><p>Checks if a string is lower case.</p><p>Convert the given string to lower case, using <code>String.toLowerCase()</code> and compare it to the original.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isLowerCase</span> <span class="token operator">=</span> str <span class="token operator">=></span> str <span class="token operator">===</span> str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">();</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isLowerCase</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isLowerCase</span><span class="token punctuation">(</span><span class="token string">'a3@$'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isLowerCase</span><span class="token punctuation">(</span><span class="token string">'Ab4'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="isuppercase">isUpperCase</h4><p>Checks if a string is upper case.</p><p>Convert the given string to upper case, using <code>String.prototype.toUpperCase()</code> and compare it to the original.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">isUpperCase</span> <span class="token operator">=</span> str <span class="token operator">=></span> str <span class="token operator">===</span> str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">();</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">isUpperCase</span><span class="token punctuation">(</span><span class="token string">'ABC'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isLowerCase</span><span class="token punctuation">(</span><span class="token string">'A3@$'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
<span class="token function">isLowerCase</span><span class="token punctuation">(</span><span class="token string">'aB4'</span><span class="token punctuation">);</span> <span class="token comment">// false</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="mapstring">mapString</h4><p>Creates a new string with the results of calling a provided function on every character in the calling string.</p><p>Use <code>String.prototype.split('')</code> and <code>Array.prototype.map()</code> to call the provided function, <code>fn</code>, for each character in <code>str</code>. Use <code>Array.prototype.join('')</code> to recombine the array of characters into a string. The callback function, <code>fn</code>, takes three arguments (the current character, the index of the current character and the string <code>mapString</code> was called upon).</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">mapString</span> <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> fn<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">((</span>c<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fn</span><span class="token punctuation">(</span>c<span class="token punctuation">,</span> i<span class="token punctuation">,</span> str<span class="token punctuation">))
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">mapString</span><span class="token punctuation">(</span><span class="token string">'lorem ipsum'</span><span class="token punctuation">,</span> c <span class="token operator">=></span> c<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">());</span> <span class="token comment">// 'LOREM IPSUM'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="mask">mask</h4><p>Replaces all but the last <code>num</code> of characters with the specified mask character.</p><p>Use <code>String.prototype.slice()</code> to grab the portion of the characters that will remain unmasked and use <code>String.padStart()</code> to fill the beginning of the string with the mask character up to the original length. Omit the second argument, <code>num</code>, to keep a default of <code>4</code> characters unmasked. If <code>num</code> is negative, the unmasked characters will be at the start of the string. Omit the third argument, <code>mask</code>, to use a default character of <code>'*'</code> for the mask.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> mask <span class="token operator">=</span> <span class="token punctuation">(</span>cc<span class="token punctuation">,</span> num <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">,</span> mask <span class="token operator">=</span> <span class="token string">'*'</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cc<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span>num<span class="token punctuation">).</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cc<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">.</span>length<span class="token punctuation">,</span> mask<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">mask</span><span class="token punctuation">(</span><span class="token number">1234567890</span><span class="token punctuation">);</span> <span class="token comment">// '******7890'</span>
|
|
<span class="token function">mask</span><span class="token punctuation">(</span><span class="token number">1234567890</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// '*******890'</span>
|
|
<span class="token function">mask</span><span class="token punctuation">(</span><span class="token number">1234567890</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">'$'</span><span class="token punctuation">);</span> <span class="token comment">// '$$$$567890'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="pad">pad</h4><p>Pads a string on both sides with the specified character, if it's shorter than the specified length.</p><p>Use <code>String.padStart()</code> and <code>String.padEnd()</code> to pad both sides of the given string. Omit the third argument, <code>char</code>, to use the whitespace character as the default padding character.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> pad <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> length<span class="token punctuation">,</span> char <span class="token operator">=</span> <span class="token string">' '</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
str<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">((</span>str<span class="token punctuation">.</span>length <span class="token operator">+</span> length<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> char<span class="token punctuation">).</span><span class="token function">padEnd</span><span class="token punctuation">(</span>length<span class="token punctuation">,</span> char<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">pad</span><span class="token punctuation">(</span><span class="token string">'cat'</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">);</span> <span class="token comment">// ' cat '</span>
|
|
<span class="token function">pad</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">),</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token string">'0'</span><span class="token punctuation">);</span> <span class="token comment">// '004200'</span>
|
|
<span class="token function">pad</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">);</span> <span class="token comment">// 'foobar'</span>
|
|
</pre></div><div class="card code-card"><div class="section card-content"><h4><a href="https://frontendmasters.com/courses/js-fundamentals-functional-v2/" target="_blank" rel="noopener noreferrer">Recommended Resource - JavaScript: From Fundamentals to Functional JS</a></h4><p>Learn higher-order functions, closures, scope, master key functional methods like map, reduce and filter and promises and ES6+ asynchronous JavaScript.</p></div></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="palindrome">palindrome</h4><p>Returns <code>true</code> if the given string is a palindrome, <code>false</code> otherwise.</p><p>Convert the string to <code>String.prototype.toLowerCase()</code> and use <code>String.prototype.replace()</code> to remove non-alphanumeric characters from it. Then, use the spread operator (<code>...</code>) to split the string into individual characters, <code>Array.prototype.reverse()</code>, <code>String.prototype.join('')</code> and compare it to the original, unreversed string, after converting it to <code>String.prototype.toLowerCase()</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">palindrome</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> s <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">().</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\W_]/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> s <span class="token operator">===</span> <span class="token punctuation">[</span><span class="token operator">...</span>s<span class="token punctuation">].</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">palindrome</span><span class="token punctuation">(</span><span class="token string">'taco cat'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="pluralize">pluralize</h4><p>Returns the singular or plural form of the word based on the input number. If the first argument is an <code>object</code>, it will use a closure by returning a function that can auto-pluralize words that don't simply end in <code>s</code> if the supplied dictionary contains the word.</p><p>If <code>num</code> is either <code>-1</code> or <code>1</code>, return the singular form of the word. If <code>num</code> is any other number, return the plural form. Omit the third argument to use the default of the singular word + <code>s</code>, or supply a custom pluralized word when necessary. If the first argument is an <code>object</code>, utilize a closure by returning a function which can use the supplied dictionary to resolve the correct plural form of the word.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> pluralize <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">,</span> word<span class="token punctuation">,</span> plural <span class="token operator">=</span> word <span class="token operator">+</span> <span class="token string">'s'</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> _pluralize <span class="token operator">=</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> word<span class="token punctuation">,</span> plural <span class="token operator">=</span> word <span class="token operator">+</span> <span class="token string">'s'</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">].</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span>num<span class="token punctuation">))</span> <span class="token operator">?</span> word <span class="token punctuation">:</span> plural<span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">(</span>num<span class="token punctuation">,</span> word<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">_pluralize</span><span class="token punctuation">(</span>num<span class="token punctuation">,</span> word<span class="token punctuation">,</span> val<span class="token punctuation">[</span>word<span class="token punctuation">]);</span>
|
|
<span class="token keyword">return</span> <span class="token function">_pluralize</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> word<span class="token punctuation">,</span> plural<span class="token punctuation">);
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">pluralize</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">);</span> <span class="token comment">// 'apples'</span>
|
|
<span class="token function">pluralize</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">);</span> <span class="token comment">// 'apple'</span>
|
|
<span class="token function">pluralize</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'apple'</span><span class="token punctuation">);</span> <span class="token comment">// 'apples'</span>
|
|
<span class="token function">pluralize</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'person'</span><span class="token punctuation">,</span> <span class="token string">'people'</span><span class="token punctuation">);</span> <span class="token comment">// 'people'</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token constant">PLURALS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
person<span class="token punctuation">:</span> <span class="token string">'people'</span><span class="token punctuation">,</span>
|
|
radius<span class="token punctuation">:</span> <span class="token string">'radii'</span>
|
|
<span class="token punctuation">};</span>
|
|
<span class="token keyword">const</span> autoPluralize <span class="token operator">=</span> <span class="token function">pluralize</span><span class="token punctuation">(</span><span class="token constant">PLURALS</span><span class="token punctuation">);</span>
|
|
<span class="token function">autoPluralize</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'person'</span><span class="token punctuation">);</span> <span class="token comment">// 'people'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="removenonascii">removeNonASCII</h4><p>Removes non-printable ASCII characters.</p><p>Use a regular expression to remove non-printable ASCII characters.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">removeNonASCII</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[^\x20-\x7E]/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">removeNonASCII</span><span class="token punctuation">(</span><span class="token string">'äÄçÇéÉêlorem-ipsumöÖÐþúÚ'</span><span class="token punctuation">);</span> <span class="token comment">// 'lorem-ipsum'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="reversestring">reverseString</h4><p>Reverses a string.</p><p>Use the spread operator (<code>...</code>) and <code>Array.prototype.reverse()</code> to reverse the order of the characters in the string. Combine characters to get a string using <code>String.prototype.join('')</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">reverseString</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">].</span><span class="token function">reverse</span><span class="token punctuation">().</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token string">'foobar'</span><span class="token punctuation">);</span> <span class="token comment">// 'raboof'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="sortcharactersinstring">sortCharactersInString</h4><p>Alphabetically sorts the characters in a string.</p><p>Use the spread operator (<code>...</code>), <code>Array.prototype.sort()</code> and <code>String.localeCompare()</code> to sort the characters in <code>str</code>, recombine using <code>String.prototype.join('')</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">sortCharactersInString</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">].</span><span class="token function">sort</span><span class="token punctuation">((</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)).</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">sortCharactersInString</span><span class="token punctuation">(</span><span class="token string">'cabbage'</span><span class="token punctuation">);</span> <span class="token comment">// 'aabbceg'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="splitlines">splitLines</h4><p>Splits a multiline string into an array of lines.</p><p>Use <code>String.prototype.split()</code> and a regular expression to match line breaks and create an array.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">splitLines</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex">/\r?\n/</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">splitLines</span><span class="token punctuation">(</span><span class="token string">'This\nis a\nmultiline\nstring.\n'</span><span class="token punctuation">);</span> <span class="token comment">// ['This', 'is a', 'multiline', 'string.' , '']</span>
|
|
</pre></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="stringpermutations">stringPermutations</h4><p>⚠️ <strong>WARNING</strong>: This function's execution time increases exponentially with each character. Anything more than 8 to 10 characters will cause your browser to hang as it tries to solve all the different combinations.</p><p>Generates all permutations of a string (contains duplicates).</p><p>Use recursion. For each letter in the given string, create all the partial permutations for the rest of its letters. Use <code>Array.prototype.map()</code> to combine the letter with each partial permutation, then <code>Array.prototype.reduce()</code> to combine all permutations in one array. Base cases are for string <code>length</code> equal to <code>2</code> or <code>1</code>.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">stringPermutations</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>str<span class="token punctuation">.</span>length <span class="token operator"><=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> str<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token punctuation">[</span>str<span class="token punctuation">,</span> str<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> str<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]] : [</span>str<span class="token punctuation">];</span>
|
|
<span class="token keyword">return</span> str
|
|
<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)
|
|
.</span><span class="token function">reduce</span><span class="token punctuation">(
|
|
(</span>acc<span class="token punctuation">,</span> letter<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">stringPermutations</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">+</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)).</span><span class="token function">map</span><span class="token punctuation">(</span>val <span class="token operator">=></span> letter <span class="token operator">+</span> val<span class="token punctuation">)),
|
|
[]
|
|
);
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">stringPermutations</span><span class="token punctuation">(</span><span class="token string">'abc'</span><span class="token punctuation">);</span> <span class="token comment">// ['abc','acb','bac','bca','cab','cba']</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="striphtmltags">stripHTMLTags</h4><p>Removes HTML/XML tags from string.</p><p>Use a regular expression to remove HTML/XML tags from a string.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">stripHTMLTags</span> <span class="token operator">=</span> str <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/<[^>]*>/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">stripHTMLTags</span><span class="token punctuation">(</span><span class="token string">'<p><em>lorem</em> <strong>ipsum</strong></p>'</span><span class="token punctuation">);</span> <span class="token comment">// 'lorem ipsum'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="tocamelcase">toCamelCase</h4><p>Converts a string to camelcase.</p><p>Break the string into words and combine them capitalizing the first letter of each word, using a regexp.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">toCamelCase</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">let</span> s <span class="token operator">=</span>
|
|
str <span class="token operator">&&</span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">).</span><span class="token function">toUpperCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> x<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">).</span><span class="token function">toLowerCase</span><span class="token punctuation">())
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);</span>
|
|
<span class="token keyword">return</span> s<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">).</span><span class="token function">toLowerCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> s<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">);
|
|
};</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">toCamelCase</span><span class="token punctuation">(</span><span class="token string">'some_database_field_name'</span><span class="token punctuation">);</span> <span class="token comment">// 'someDatabaseFieldName'</span>
|
|
<span class="token function">toCamelCase</span><span class="token punctuation">(</span><span class="token string">'Some label that needs to be camelized'</span><span class="token punctuation">);</span> <span class="token comment">// 'someLabelThatNeedsToBeCamelized'</span>
|
|
<span class="token function">toCamelCase</span><span class="token punctuation">(</span><span class="token string">'some-javascript-property'</span><span class="token punctuation">);</span> <span class="token comment">// 'someJavascriptProperty'</span>
|
|
<span class="token function">toCamelCase</span><span class="token punctuation">(</span><span class="token string">'some-mixed_string with spaces_underscores-and-hyphens'</span><span class="token punctuation">);</span> <span class="token comment">// 'someMixedStringWithSpacesUnderscoresAndHyphens'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="tokebabcase">toKebabCase</h4><p>Converts a string to kebab case.</p><p>Break the string into words and combine them adding <code>-</code> as a separator, using a regexp.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">toKebabCase</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str <span class="token operator">&&</span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">())
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'camelCase'</span><span class="token punctuation">);</span> <span class="token comment">// 'camel-case'</span>
|
|
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'some text'</span><span class="token punctuation">);</span> <span class="token comment">// 'some-text'</span>
|
|
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'some-mixed_string With spaces_underscores-and-hyphens'</span><span class="token punctuation">);</span> <span class="token comment">// 'some-mixed-string-with-spaces-underscores-and-hyphens'</span>
|
|
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'AllThe-small Things'</span><span class="token punctuation">);</span> <span class="token comment">// "all-the-small-things"</span>
|
|
<span class="token function">toKebabCase</span><span class="token punctuation">(</span><span class="token string">'IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML'</span><span class="token punctuation">);</span> <span class="token comment">// "i-am-listening-to-fm-while-loading-different-url-on-my-browser-and-also-editing-xml-and-html"</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="tosnakecase">toSnakeCase</h4><p>Converts a string to snake case.</p><p>Break the string into words and combine them adding <code>_</code> as a separator, using a regexp.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">toSnakeCase</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str <span class="token operator">&&</span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">())
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'_'</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">toSnakeCase</span><span class="token punctuation">(</span><span class="token string">'camelCase'</span><span class="token punctuation">);</span> <span class="token comment">// 'camel_case'</span>
|
|
<span class="token function">toSnakeCase</span><span class="token punctuation">(</span><span class="token string">'some text'</span><span class="token punctuation">);</span> <span class="token comment">// 'some_text'</span>
|
|
<span class="token function">toSnakeCase</span><span class="token punctuation">(</span><span class="token string">'some-mixed_string With spaces_underscores-and-hyphens'</span><span class="token punctuation">);</span> <span class="token comment">// 'some_mixed_string_with_spaces_underscores_and_hyphens'</span>
|
|
<span class="token function">toSnakeCase</span><span class="token punctuation">(</span><span class="token string">'AllThe-small Things'</span><span class="token punctuation">);</span> <span class="token comment">// "all_the_smal_things"</span>
|
|
<span class="token function">toSnakeCase</span><span class="token punctuation">(</span><span class="token string">'IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML'</span><span class="token punctuation">);</span> <span class="token comment">// "i_am_listening_to_fm_while_loading_different_url_on_my_browser_and_also_editing_some_xml_and_html"</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="totitlecase">toTitleCase</h4><p>Converts a string to title case.</p><p>Break the string into words, using a regexp, and combine them capitalizing the first letter of each word and adding a whitespace between them.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">toTitleCase</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str
|
|
<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g</span><span class="token punctuation">)
|
|
.</span><span class="token function">map</span><span class="token punctuation">(</span>x <span class="token operator">=></span> x<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">).</span><span class="token function">toUpperCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> x<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">))
|
|
.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">toTitleCase</span><span class="token punctuation">(</span><span class="token string">'some_database_field_name'</span><span class="token punctuation">);</span> <span class="token comment">// 'Some Database Field Name'</span>
|
|
<span class="token function">toTitleCase</span><span class="token punctuation">(</span><span class="token string">'Some label that needs to be title-cased'</span><span class="token punctuation">);</span> <span class="token comment">// 'Some Label That Needs To Be Title Cased'</span>
|
|
<span class="token function">toTitleCase</span><span class="token punctuation">(</span><span class="token string">'some-package-name'</span><span class="token punctuation">);</span> <span class="token comment">// 'Some Package Name'</span>
|
|
<span class="token function">toTitleCase</span><span class="token punctuation">(</span><span class="token string">'some-mixed_string with spaces_underscores-and-hyphens'</span><span class="token punctuation">);</span> <span class="token comment">// 'Some Mixed String With Spaces Underscores And Hyphens'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="truncatestring">truncateString</h4><p>Truncates a string up to a specified length.</p><p>Determine if the string's <code>length</code> is greater than <code>num</code>. Return the string truncated to the desired length, with <code>'...'</code> appended to the end or the original string.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">truncateString</span> <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> num<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">);</span> <span class="token comment">// 'boom...'</span>
|
|
</pre></div><div class="card code-card"><div class="corner beginner" aria-label="beginner" title="beginner"></div><div class="section card-content"><h4 id="unescapehtml">unescapeHTML</h4><p>Unescapes escaped HTML characters.</p><p>Use <code>String.prototype.replace()</code> with a regex that matches the characters that need to be unescaped, using a callback function to replace each escaped character instance with its associated unescaped character using a dictionary (object).</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">unescapeHTML</span> <span class="token operator">=</span> str <span class="token operator">=></span>
|
|
str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
|
|
<span class="token regex">/&amp;|&lt;|&gt;|&#39;|&quot;/g</span><span class="token punctuation">,</span>
|
|
tag <span class="token operator">=></span>
|
|
<span class="token punctuation">({</span>
|
|
<span class="token string">'&amp;'</span><span class="token punctuation">:</span> <span class="token string">'&'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'&lt;'</span><span class="token punctuation">:</span> <span class="token string">'<'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'&gt;'</span><span class="token punctuation">:</span> <span class="token string">'>'</span><span class="token punctuation">,</span>
|
|
<span class="token string">'&#39;'</span><span class="token punctuation">:</span> <span class="token string">"'"</span><span class="token punctuation">,</span>
|
|
<span class="token string">'&quot;'</span><span class="token punctuation">:</span> <span class="token string">'"'</span>
|
|
<span class="token punctuation">}[</span>tag<span class="token punctuation">]</span> <span class="token operator">||</span> tag<span class="token punctuation">)
|
|
);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">unescapeHTML</span><span class="token punctuation">(</span><span class="token string">'&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;'</span><span class="token punctuation">);</span> <span class="token comment">// '<a href="#">Me & you</a>'</span>
|
|
</pre></div><div class="card code-card"><div class="corner advanced" aria-label="advanced" title="advanced"></div><div class="section card-content"><h4 id="urljoin">URLJoin</h4><p>Joins all given URL segments together, then normalizes the resulting URL.</p><p>Use <code>String.prototype.join('/')</code> to combine URL segments, then a series of <code>String.prototype.replace()</code> calls with various regexps to normalize the resulting URL (remove double slashes, add proper slashes for protocol, remove slashes before parameters, combine parameters with <code>'&'</code> and normalize first parameter delimiter).</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">URLJoin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span> <span class="token operator">=></span>
|
|
args
|
|
<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\/]+/g</span><span class="token punctuation">,</span> <span class="token string">'/'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/^(.+):\//</span><span class="token punctuation">,</span> <span class="token string">'$1://'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/^file:/</span><span class="token punctuation">,</span> <span class="token string">'file:/'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\/(\?|&|#[^!])/g</span><span class="token punctuation">,</span> <span class="token string">'$1'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\?/g</span><span class="token punctuation">,</span> <span class="token string">'&'</span><span class="token punctuation">)
|
|
.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'&'</span><span class="token punctuation">,</span> <span class="token string">'?'</span><span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">URLJoin</span><span class="token punctuation">(</span><span class="token string">'http://www.google.com'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'/b/cd'</span><span class="token punctuation">,</span> <span class="token string">'?foo=123'</span><span class="token punctuation">,</span> <span class="token string">'?bar=foo'</span><span class="token punctuation">);</span> <span class="token comment">// 'http://www.google.com/a/b/cd?foo=123&bar=foo'</span>
|
|
</pre></div><div class="card code-card"><div class="corner intermediate" aria-label="intermediate" title="intermediate"></div><div class="section card-content"><h4 id="words">words</h4><p>Converts a given string into an array of words.</p><p>Use <code>String.prototype.split()</code> with a supplied pattern (defaults to non-alpha as a regexp) to convert to an array of strings. Use <code>Array.prototype.filter()</code> to remove any empty strings. Omit the second argument to use the default regexp.</p></div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> words <span class="token operator">=</span> <span class="token punctuation">(</span>str<span class="token punctuation">,</span> pattern <span class="token operator">=</span> <span class="token regex">/[^a-zA-Z-]+/</span><span class="token punctuation">)</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>pattern<span class="token punctuation">).</span><span class="token function">filter</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">);</span>
|
|
</pre><label class="collapse">examples</label><pre class="section card-examples language-js"><span class="token function">words</span><span class="token punctuation">(</span><span class="token string">'I love javaScript!!'</span><span class="token punctuation">);</span> <span class="token comment">// ["I", "love", "javaScript"]</span>
|
|
<span class="token function">words</span><span class="token punctuation">(</span><span class="token string">'python, javaScript & coffee'</span><span class="token punctuation">);</span> <span class="token comment">// ["python", "javaScript", "coffee"]</span>
|
|
</pre></div></main><footer class="col-full-width container"><div class="col-centered"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.</p><br/><p style="display:inline-block"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a href="./archive">Archive</a> <a href="./glossary">Glossary</a></p></div></footer><a class="scroll-to-top" href="#top"></a></div></body></html> |