How to use the URL API with vanilla JS

[nirjan-dev]

link to the post

Creating a URL from a string with vanilla JS

To create a new URL object, pass the URL as a string into the new URL() constructor method.

var url = new URL('https://gomakethings.com/about?num=42&greeting=hello#contact');

parsing a URL with the URL API

The new URL() constructor returns an object with same properties as a the window.location property.

// The hash or anchor link on the URL
// returns "#contact"
url.hash;

// The root domain of the URL
// returns "gomakethings.com"
url.hostname;

// The full URL
// returns "https://gomakethings.com/about?num=42&greeting=hello#contact"
url.href;

// The root domain, including the protocol
// returns "https://gomakethings.com"
url.origin;

// The path on the URL
// returns "/about"
url.pathname;

// The protocol on the URL
// returns "https:"
url.protocol;

// The query strings (as a string) on the URL
// returns "?num=42&greeting=hello"
url.search;

updating values on a URL

You can use those same properties to update the values of a URL.

For example, if you wanted to change the hash from #contact to #photo, you would do this.

url.hash = 'photo';

Browser Support

The URL API works in all modern browsers, but not IE. You can push support back to IE9 with a polyfill.