Subscribe

JavaScript URL Objects API

✍️

What is the JavaScript URL API and how can we use it?

23 Jul, 2022 · 3 min read

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:[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

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

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.

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

Browser Support

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

Data on support for the url feature across the major browsers from caniuse.com

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 📖

Using the native payment request JavaScript API

9 Aug, 2022 · 8 min read

Using the native payment request JavaScript API

JavaScript if shorthand without the else

1 Aug, 2022 · 2 min read

JavaScript if shorthand without the else

Join 1748 devs and subscribe to my newsletter