DEV Community

JS Bits with Bill
JS Bits with Bill

Posted on • Updated on

 

The URL Object

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');
Enter fullscreen mode Exit fullscreen mode

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" 
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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. 👑

Links

MDN Article on URL() Interface


Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter!

Top comments (1)

Collapse
 
mohsenalyafei profile image
Mohsen Alyafei

Nice one. Thanks

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post