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 paramtersentries()
returns an iterator containing the parameters key/valueskeys()
returns an iterator containing the parameters keysvalues()
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 objectdelete()
to delete an existing parameterset()
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()
.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025