How to decode a URL in JavaScript

In this quick post we will be covering how to decode a URL in JavaScript so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

This post follows on from my last post about encoding a URL in JavaScript, so if you haven’t already seen it, it is worth a read because we will be using similar principles in this post.

Let’s get stuck in

Why do we need to decode a URL in JavaScript

When using JavaScript you might come across a need to be able to use the URL parameters in one way or another.

This could be that you need to decode these values for use in your application, like pagination, or sorting order and so on, or you might want to store a small state in the URL parameters so that when a user navigates to that directly, they can instantly pick up where they left off.

Either way, being able to decode a URL in JavaScript is a pretty essential thing to be able to do and one that you will probably have to deal with at some point.

So what does decoding a URL mean here?

Well you can pass values into a URL as URL or GET parameters which can be used to send data around, one of the most common uses for this is when you make a GET request to an API.

These parameters are what come after the search query separator (?) in a URL.

So for example, here is a URL with a name parameter:

https://example.com/find-names?name=John

In this example the name is the key and John is the value, and this is what we are going to need to decode.

URL parameters can be more complex though with spaces, arrays and so on so it is important that however we choose to decode these parameters is a way in which we can trust.

It is important to note that you should make sure that your URL size is no larger than 2000 characters long otherwise it could cause some issues in certain browsers.

How to decode a URL in JavaScript

To decode a URL in JavaScript we need to use a combination of the window location object, as well as the URLSearchParams utility. To use these to be able to decode a URL all we need to do is pass in the search parameters into URLSearchParams and when we will be able to use it to access the keys and values.

Firstly, to get the search parameters from our window location object (window.location), all we need to do is to get the window.location.search value which will return all the parameters in the current online URL.

If you are getting the URL from some data and not the current/online URL then things will be a little different, and we will need to look at how to decode a URL in JavaScript that is not the current location.

Luckily, there is an interface that will enable us to do this with ease which is the URL utility in JavaScript.

All we need to do is pass in a URL into the constructor and then let it do all the hard work for us, this has the added benefit of being able to access the searchParams directly.

Here is an example of how to use this:

const exampleUrlString = "https://example.com/names?name=John"
const exampleUrl = new URL(exampleUrlString)

After we have our search params we just need to pass them into the URLSearchParams constructor to be able to decode and access them.

Here is an example of how that would look if we are using the current online URL:

const searchParams = new URLSearchParams(window.location.search)

And an example of if we are using a URL string (not the current URL):

const exampleUrl = new URL("https://example.com/names?name=John")
exampleUrl.searchParams // URLSearchParams {}

After we have created our searchParams object, all we need to do is call whichever method is most relevant to our needs.

1. If you need to check that a parameter exists or not then you would want to make use of URLSearchParams.has()
2. If you want to get the values or a certain parameter then you will want to use URLSearchParams.getAll()
3. If you want to get all key value pairs as an iterable, you will want to use URLSearchParams.entries()
4. If you want to loop over each value in the URL params then you will want to use URLSearchParams.forEach()

When you use any of these methods, all of the values will be decoded and ready for you to be able to make use of.

Let’s look at an example now of how you could convert the URL parameters into an object.

const searchParams = new URLSearchParams(window.location.search)
const data = {}

searchParams.forEach((value, key) => {
  data[key] = value
})

// data now has all the key value pairs as a JavaScript Object.

And then the same example but with a non-current URL:

const exampleUrl = new URL("https://example.com/names?name=John")
const data = {}

exampleUrl.searchParams.forEach((value, key) => {
  data[key] = value
})

// data now has all the key value pairs as a JavaScript Object.

Summary

There we have the quick fix to how to decode a URL in JavaScript, if you want more like this be sure to check out some of my other posts!