Subscribe

Vanilla JavaScript URL Object

โœ๏ธ

Lets check out the URL Object and SearchParams in JavaScript

27 Jun, 2020 ยท 2 min read

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:

const urlInput =
  'https://daily-dev-tips.com/posts/100-articles/?utm_source=facebook#comments';
const 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/?utm_source=facebook#comments"
origin: "https://daily-dev-tips.com"
password: ""
pathname: "/posts/100-articles/"
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?

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

Or, perhaps we just want the values:

const values = url.searchParams.values();
for (let 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

TypeORM viewEntity

30 Mar, 2022 ยท 5 min read

TypeORM viewEntity

The Record Utility Type in TypeScript

12 Mar, 2022 ยท 3 min read

The Record Utility Type in TypeScript

Join 1513 devs and subscribe to my newsletter