In vanilla JS, you can use the URL() constructor to create a URL object. This is a type of object with properties and methods that make it trivial to work with URL strings.

Absolute URLs

If you're using an absolute URL, just pass it in as the first argument:

// Don't worry, this is just the website for the musician Phoebe Bridgers.
// It's one of my favourite URLs.
const url = new URL("https://phoebefuckingbridgers.com");

Relative URLs

If you're using a relative URL, you need to pass in a base URL as the second argument:

// https://phoebefuckingbridgers.com/contact
const url = new URL("contact", "https://phoebefuckingbridgers.com");

Browser support

The URL interface is supported in all modern browsers, but not Internet Explorer (IE). If you need to support IE, there is a polyfill you can use. The easiest way is to use the default bundle from polyfill.io, which includes it.