Web APIs: URLSearchParams reference

In a nutshell

The URLSearchParams Web API provides methods for interacting with URL query strings – the portion after the ? character as shown in green below:

Recipes

Get URLSearchParams instance from current URL

let searchParams = new URLSearchParams(window.location.search)
// Now, you can do things like searchParams.toString()

Update URL using URLSearchParams

let searchParams = new URLSearchParams(window.location.search)
searchParams.set('foo', 'bar') // Or whatever you want 😜

const newUrl = `${window.location.origin}${window.location.pathname}?${searchParams.toString()}`

window.history.pushState({}, '', newUrl)

Iterate through all query string params

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

for (const [key, value] of searchParams) { 
    console.log({key, value}) 
}

// {key: 'name', value: 'john'}
// {key: 'age', value: '12'}
// {key: 'location', value: 'London'}
// {key: 'location', value: 'Birmingham'}

Get the first value associated with a parameter

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

console.log(searchParams.get('location'))
// 'London'

console.log(searchParams.get('foo')
// null

Get all values associated with a parameter

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

console.log(searchParams.getAll('location'))
// ['London', "Birmingham']

Set the value of a parameter

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

searchParams.set('name', 'alice')
console.log(searchParams.toString())
// name=alice&age=12&location=London&location=Birmingham

searchParams.set('location', 'Manchester') // Will delete any other values
console.log(searchParams.toString())
// name=alice&age=12&location=Manchester

Append a new parameter

let searchParams = new URLSearchParams('name=john&age=12&location=London')

searchParams.append('country', 'England')
console.log(searchParams.toString())
// 'name=john&age=12&location=London&country=England'

searchParams.append('country', 'Spain')
console.log(searchParams.toString())
// 'name=john&age=12&location=London&country=England&country=Spain'

Check if a parameter exists

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

console.log(searchParams.has('name'))
// true

console.log(searchParams.has('country')
// false

Get number of query parameters

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')

console.log(Array.from(searchParams).length)
// 4

Get parameter names as an array

let searchParams = new URLSearchParams('name=john&age=12&location=London&location=Birmingham')
const keysArray = Array.from(searchParams.keys())

console.log(keysArray)
// ['name', 'age', 'location', 'location']

Sources

• URLSearchParams – MDN