How to get query string values in JavaScript with URLSearchParams

Accessing and modifying query string values using URLSearchParams

The HTTP protocol allows the request to a web page to be made with a query string.

Like this:

https://test.com/?name=roger
https://test.com/hello?name=roger

In this case we have a single query parameter, named name, with the value roger.

You can have multiple parameters, like this:

https://test.com/hello?name=roger&age=20

The parameters passed as a query string are normally used server-side, to generate a proper response. Here’s how you can access query parameters using Node.js.

To access the value of the query inside the browser, using JavaScript, we have a special API called URLSearchParam, supported by all modern browsers

Here is how we can use it:

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

Note: don’t pass the full URL as a parameter to URLSearchParams(), but only the query string part of the URL, which you access using window.location.search.

In the case of:

https://test.com/hello?name=roger

window.location.search is equal to the string ?name=roger.

Now that you have the params object, you can query it.

You can check if a parameter was passed:

params.has('test')

You can get the value of a parameter:

params.get('test')

You can iterate over all the parameters, using for..of:

const params = new URLSearchParams(window.location.search)
for (const param of params) {
  console.log(param)
}

A parameter can have more than one value.

In this case, we pass the same parameter name multiple times, like this:

https://test.com/hello?name=roger&name=flavio

We have no way to detect if a parameters is passed more than once. If we use params.get('name'), we’ll only get the first value back.

We can sue params.getAll('name') to get back an array with all the values passed.

In addition to has(), get() and getAll(), the URLSearchParams API offers several other methods that we can use to loop through the parameters:

• forEach() iterates over the paramters
• entries() returns an iterator containing the parameters key/values
• keys() returns an iterator containing the parameters keys
• values() returns an iterator containing the parameters values

Other methods to alter the parameters, for use in other JavaScript running in the page (they do not change the URL):

• append() to append a new parameter to the object
• delete() to delete an existing parameter
• set() to set the value of a parameter

We also have sort() to sort parameters by key value, and we have the toString() method to generate a query string from the values.

We can use append() / set() / delete() to edit the query string, and generate a new one with toString().