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 permalink

Let me demonstrate how it works.

const url = new URL(
  'https://user:[email protected]: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:[email protected]: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 permalink

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:[email protected]:3000/folder/page?param=xyz&new=true#title4

Or if we want to change the pathname.

url.pathname = 'register';

// https://user:[email protected]: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 permalink

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

JavaScript SearchParams get Specific value permalink

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 permalink

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 permalink

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 permalink

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 permalink

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.

See the Pen JavaScript find min/max from array of objects by Chris Bongers (@rebelchris) on CodePen.

Browser Support permalink

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

Thank you for reading, and let’s connect! permalink

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