JavaScript — Get URL Query Parameters

Sometimes you want to retrieve the URL query parameters when using JavaScript on the client side. JavaScript in the browser provides a global window.location object providing you with all the URL parts. The query parameters are available in

This tutorial shows you how to access and use the URL query parameters of the current website in client-side JavaScript.

JavaScript Series Overview

Retrieve the URL Query Parameters

You can access the raw query string of the current URL in JavaScript using the attribute:

const queryString =  
// '?filter=video&foo=bar'

If you want a brief overview of what window.location does, please have a look at our tutorial here on Future Studio on how to get the current URL.

You should know that accessing returns the raw query string including a leading ? if query parameters are present. Here’s what you’re receiving:

  • an empty string if the URL doesn’t carry query parameters
  • a query string including a leading ? if query parameters are present

You have to deal with the leading question mark ? when query parameters are present on the current URL. This is tedious. The good news: all browsers come with a handy URLSearchParams utility method to work with a URL query string.

Using Query Parameters With URLSearchParams

You can use the URLSearchParams utility within your browser to work with query parameters. You either pass the raw query string or an object as an argument to the method. The return value is a URLSearchParams instance providing methods to interact with the data:

const params = new URLSearchParams(  

Here’s an extensive code snippet with examples of how to interact with URLSearchParams:

const params = new URLSearchParams('?filter=premium_tutorials&filter=premium_videos&page=3')

params.has('page') // true  
params.has('filter') // true

[...params.keys()] // ['filter', 'filter', 'page']
[...params.values()] // ['premium_tutorials', 'premium_videos', '3']
// [
//   ['filter', 'premium_tutorials'], 
//   ['filter', 'premium_videos'],
//   ['page', '3']
// ]

params.set('page', '10')  
params.append('foo', 'bar')

// 'filter=premium_tutorials&filter=premium_videos&page=10&foo=bar&foo=bar'

Notice: the URLSearchParams#toString method returns the query string without a leading ?. You need to manually add it when you’re concatenating a query string onto an existing URL.


Mentioned Resources

Explore the Library

Find interesting tutorials and solutions for your problems.