modern javascript snippets

 

1. How to get the base URL?

const getBaseURL = url => url.replace(/[?#].*$/, '');

getBaseURL('http://url.com/page?name=Adam&surname=Smith');
// 'http://url.com/page'

2. How to check if the URL is absolute?

const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);

isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false

3. How to get URL parameters as object?

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );

getURLParameters('google.com'); // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith');
// {name: 'Adam', surname: 'Smith'}

4. How to check if the element contains another element?

const elementContains = (parent, child) =>
  parent !== child && parent.contains(child);

elementContains(
  document.querySelector('head'),
  document.querySelector('title')
);
// true
elementContains(document.querySelector('body'), document.querySelector('body'));

5. How to get all the ancestors of the element?

const getAncestors = el => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

getAncestors(document.querySelector('nav'));
// [document, html, body, header, nav]

6. How to smooth-scroll element into view?

const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });

smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar');
// scrolls smoothly to the first element with a class of fooBar

7. How to handle click outside the element?

const onClickOutside = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

8. How to generate UUID?

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

9. How to get the selected text?

const getSelectedText = () => window.getSelection().toString();

getSelectedText(); // 'Lorem ipsum'

10. How to copy text to the clipboard?

const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};

11. How to add styles to HTML element?

const addStyles = (el, styles) => Object.assign(el.style, styles);

addStyles(document.getElementById('my-element'), {
  background: 'red',
  color: '#ffff00',
  fontSize: '3rem'
});

12. How to toggle full-screen mode?

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode

13. How to detect if Caps lock is on?

<form>
  <label for="username">Username:</label>
  <input id="username" name="username">

  <label for="password">Password:</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock is on</span>
</form>

const el = document.getElementById('password');
const msg = document.getElementById('password-message');

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});

14. How to check if the Date is valid?

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid('December 17, 1995 03:24:00'); // true
isDateValid('1995-12-17T03:24:00'); // true
isDateValid('1995-12-17 T03:24:00'); // false
isDateValid('Duck'); // false
isDateValid(1995, 11, 17); // true
isDateValid(1995, 11, 17, 'Duck'); // false
isDateValid({}); // false

15. How to get colon time from Date?

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // '08:38:00'

17. How to check the preferred language of the current user?

const detectLanguage = (defaultLang = 'en-US') =>
  navigator.language ||
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
  defaultLang;

detectLanguage(); // 'nl-NL'

18. How to check the preferred color scheme of the user?

const prefersDarkColorScheme = () =>
  window &&
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches;

prefersDarkColorScheme(); // true

19. How to check if the device supports touch events?

const supportsTouchEvents = () =>
  window && 'ontouchstart' in window;

supportsTouchEvents(); // true

20. Url objects

const url = new URL("https://example.com/login?user=someguy&page=news");

url.origin
// "https://example.com"
url.host
// "example.com"
url.protocol
// "https:"
url.pathname
// "/login"
url.searchParams.get('user')
// "someguy"

21.  Dynamically Load JS Files

function loadJS(files, done) {
   // Get the head tag
   const head = document.getElementsByTagName('head')[0];
   Promise.all(files.map(file => {
     return new Promise(resolve => {
       //Create a script tag and add it to the head
       const s = document.createElement('script');
       s.type = "text/javascript";
       s.async = true;
       s.src = file;
       //Listen to the load event and resolve if the loading is completed
       s.addEventListener('load', (e) => resolve(), false);
       head.appendChild(s);
     });
   })).then(done); // Everything is completed, execute the user's callback event
}
loadJS(["test1.js", "test2.js"], () => {
   //User callback logic
});

22. Scroll to the bottom of the page

Of course, if you know the height of the document, you can also scroll smoothly to the bottom of the page.

	const scrollToBottom = () => {
	window.scrollTo({
	top: document.documentElement.offsetHeight,
	left: 0,
	behavior: "smooth",
	});
	};

23. Display the element in fullscreen mode

You must have encountered such a scenario, where you need to play the video in full screen and open the page in full screen in the browser.

const goToFullScreen = (element) => {
	element = element || document.body;
	if (element.requestFullscreen) {
	element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
	element.mozRequestFullScreen();
	} else if (element.msRequestFullscreen) {
	element.msRequestFullscreen();
	} else if (element.webkitRequestFullscreen) {
	element.webkitRequestFullScreen();
	}
	};

24. Exit browser full-screen state

Yes, this is used with the fourth point, you will also have the scenario of exiting the full-screen state of the browser.

const goExitFullscreen = () => {
	if (document.exitFullscreen) {
	document.exitFullscreen();
	} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
	}
	};

25. Stop bubbling events

A method for preventing event bubbling that works on all platforms is necessary.

const stopPropagation = (event) => {
	event = event || window.event;
	if (event.stopPropagation) {
	event.stopPropagation();
	} else {
	event.cancelBubble = true;
	}
	};

26. Determine if the device is Android or IOS

In addition to distinguishing whether it is mobile or PC, many times we also need to distinguish whether the current device is Android or IOS.

const isAndroid = () => {
	return /android/i.test(navigator.userAgent.toLowerCase());
	};
	const isIOS = () => {
	let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;
	return reg.test(navigator.userAgent.toLowerCase());
	};

27. Get the type of browser and its version

As a front-end developer, you may encounter various compatibility issues. At this time, you may need to obtain the type and version of the browser.

const getExplorerInfo = () => {
	let t = navigator.userAgent.toLowerCase();
	return 0 <= t.indexOf("msie")
	? {
	//ie < 11
	type: "IE",
	version: Number(t.match(/msie ([\d]+)/)[1]),
	}
	: !!t.match(/trident\/.+?rv:(([\d.]+))/)
	? {
	// ie 11
	type: "IE",
	version: 11,
	}
	: 0 <= t.indexOf("edge")
	? {
	type: "Edge",
	version: Number(t.match(/edge\/([\d]+)/)[1]),
	}
	: 0 <= t.indexOf("firefox")
	? {
	type: "Firefox",
	version: Number(t.match(/firefox\/([\d]+)/)[1]),
	}
	: 0 <= t.indexOf("chrome")
	? {
	type: "Chrome",
	version: Number(t.match(/chrome\/([\d]+)/)[1]),
	}
	: 0 <= t.indexOf("opera")
	? {
	type: "Opera",
	version: Number(t.match(/opera.([\d]+)/)[1]),
	}
	: 0 <= t.indexOf("Safari")
	? {
	type: "Safari",
	version: Number(t.match(/version\/([\d]+)/)[1]),
	}
	: {
	type: t,
	version: -1,
	};
	};