The URL Object

#javascript #codenewbie

Here's a great trick to get URL properties from a string that I recently discovered thanks to dev.to user Chris Bongers (Daily Dev Tips)

This method involves using the URL() constructor, available in all modern browsers.

const url = new URL('http://www.example.com/snippet?utm_campaign=12345#documentation');

With the URL object, you can easily access URL properties as such:

{
  hash: "#documentation",
  host: "www.example.com",
  hostname: "www.example.com",
  href: "http://www.example.com/snippet?utm_campaign=12345",
  origin: "http://www.example.com",
  password: "",
  pathname: "/snippet",
  port: "",
  protocol: "http:",
  search: "?utm_campaign=12345",
  searchParams: URLSearchParams {},
  username: ""
}

console.log(url.pathname); // Logs "/snippet"
console.log(url.hostname); // Logs "www.example.com"

Note that one of the properties is the searchParams object, which provides an interface to manipulate the URL's query string (we'll look at it in-depth in another article).

console.log(url.searchParams.get('utm_campaign')); // Logs "12345"

Before this awesome constructor came along, it was common to achieve the same result by creating an anchor tag in order to use the DOM's built-in methods to retrieve the URL info:

const a = document.createElement('a');
a.href = 'http://www.example.com/snippet?utm_campaign=12345#documentation';

a.pathname // "/snippet"
a.hostname // "www.example.com" 
a.search // "?utm_campaign=12345"

While this worked, it felt cumbersome to have to create a document element solely to retrive URL data and could potentially confuse readers of your code of what your intent was. Plus, this would only work with the Web API and not in other environments like Node where URL() would clearly be the superior method. 👑