JavaScript URL Objects API

When working in JavaScript, there will come times when you need to either receive or manipulate information from the URL.

Luckily for us, there is the URL API.
This is a constructor that we can call on URLs to parse them in an object way.

JavaScript URL API

Let me demonstrate how it works.

const url = new URL(
  'https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title2'
);

As you can see, I decided to make quite a full URL with many things going on.

If we log this URL, we can quickly see we get a neat object with a lot of information inside it.

hash: The # selector and everything behind it #title2
host: The domain and optional post daily-dev-tips.com:3000
hostname: The domain alone daily-dev-tips.com
href: The full URL we provided https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title2
origin: The complete origin including scheme https://daily-dev-tips.com:3000
password: If a password was provided pass
pathname: Folder and pages behind the slash /folder/page
port: Which port was specified 3000
protocol: The protocol that was used https:
search: The search params including ? And & ?param=xyz&new=true
searchParams: A URLSearchParams object that can be used to get individual search params
username: The specified username user

The exciting part is that the window.location (a Location object) contains all of these plus some additional fields.

When extracting multiple fields, a quick tip is to use object destructuring.

Let's say we want only to get the origin, pathname, and search.

const { origin, pathname, search } = new URL(link);

console.log(origin + pathname + search);

// https://daily-dev-tips.com:3000/folder/page?param=xyz&new=true

Modifying URL params

We can also take the above parameters and quickly update them.

For instance, what if we want to change the hash location.

url.hash = 'title4';

// https://user:pass@daily-dev-tips.com:3000/folder/page?param=xyz&new=true#title4

Or if we want to change the pathname.

url.pathname = 'register';

// https://user:pass@daily-dev-tips.com:3000/register?param=xyz&new=true#title4

After modifying the object, you might want to receive the entire string rather than an object.

You can use the toString() method to achieve that.

url.toString();

JavaScript URL SearchParams

Now let's look at the search parameters. These are all items marked after a ? or &.

JavaScript SearchParams get Specific value

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

console.log(url.searchParams.get('param'));
// xyz

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

console.log(url.searchParams.getAll('param'));
// ["xyz"]

Check if SearchParams has a specific key

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

console.log(url.searchParams.has('param'));
// true
console.log(url.searchParams.has('fake_param'));
// 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);
}
// param
// new

Or, perhaps we just want the values:

const values = url.searchParams.values();
for (let value of values) {
  console.log(value);
}
// xyz
// true

We can even just loop over both:

url.searchParams.forEach(function (value, key) {
  console.log(key, value);
});
// param xyz
// new true

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: "?param=xyz&new=true&search=JavaScript"

Set:

url.searchParams.set('search', 'HTML');
// search: "?param=xyz&new=true&search=HTML"

Or remove:

url.searchParams.delete('search');
// search: "?param=xyz&new=true"

Sorting SearchParams

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

url.searchParams.sort();

You can try all of these in the following CodePen.

Browser Support

You can safely use the URL API in all modern browsers.

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

Blog