Vanilla JavaScript URL Object

Today we are going to be looking at the JavaScript URL Object.
In many occasions you want to read parts of the URL for several reasons, this can be checking if it's a secure connection, if it has a query string or hash.
The JavaScript URL Object can help us with these things.

Making a URL Object

To make a URL into a URL Object we use the following code:

var urlInput =
  'https://daily-dev-tips.com/posts/100-articles-%F0%9F%A5%B3/?utm_source=facebook#comments';
var url = new URL(urlInput);
console.log(url);

This will return the following object:

hash: "#comments"
host: "daily-dev-tips.com"
hostname: "daily-dev-tips.com"
href: "https://daily-dev-tips.com/posts/100-articles-%F0%9F%A5%B3/?utm_source=facebook#comments"
origin: "https://daily-dev-tips.com"
password: ""
pathname: "/posts/100-articles-%F0%9F%A5%B3/"
port: ""
protocol: "https:"
search: "?utm_sourche=facebook"
searchParams: URLSearchParams {}
username: ""

As you can see, we can access several different properties.

But what if we want to get the actual value of the utm_source?

JavaScript URL SearchParams

The URL comes with searchParams with a lot of very cool features!

JavaScript SearchParams get Specific value

To get just one specific value we use the following code:

console.log(url.searchParams.get('utm_source'));
// facebook

Additionally we can even get all if there are more of them:

console.log(url.searchParams.getAll('utm_source'));
// ["facebook"]

Check if SearchParams has a specific key

In the above example, we are guessing we have the utm_source, but what if we not sure?

console.log(url.searchParams.has('utm_source'));
// true
console.log(url.searchParams.has('t_source'));
// false

Getting all SearchParams keys

But maybe we want to get all keys to loop over manually?

var keys = url.searchParams.keys();
for (var key of keys) {
  console.log(key);
}
// utm_source

Or, perhaps we just want the values:

var values = url.searchParams.values();
for (var value of values) {
  console.log(value);
}
// facebook

We can even just loop over both:

url.searchParams.forEach(function(value, key) {
  console.log(key, value);
});
// utm_source facebook

Modifying SearchParams

Another element that comes in handy is the option to modify the SearchParams; we can append/change or delete them.

Append:

url.searchParams.append('search', 'JavaScript');
// search: "?utm_source=facebook&search=JavaScript"

Set:

url.searchParams.set('search', 'HTML');
// search: "?utm_source=facebook&search=HTML"

Or remove:

url.searchParams.delete('search');
// search: "?utm_source=facebook"

Sorting SearchParams

We can even call sort() on the SearchParams to sort them alphabetically.

url.searchParams.sort();

See these in action on Codepen.

See the Pen Vanilla JavaScript URL Object by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter