How to get query string parameters in JavaScript

In an earlier article, we looked at how to add or update query string parameters using URLSearchParams in JavaScript. Today, you'll learn how to get query string parameters from the URL in JavaScript.

To get the query string from the current browser URL, you can use window.location.search:

// URL: http://example.com?size=M&size=XL&price=29&sort=desc

console.log(window.location.search)
// ?size=M&size=XL&price=29&sort=desc

To create an instance of URLSearchParams, pass the full query string to its constructor:

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

The URLSearchParams provides several methods that you can use to manipulate query string parameters:

// get parameter
params.get('price') // 29

// get multi-valued parameter
params.getAll('size') // [ 'M', 'XL' ]

// check if parameter exists
params.has('sort') // true

// iterate over all parameters
for (const p of params) {
  console.log(p)
}

// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]

While URLSearchParams is an ideal solution to work with query strings, it is not supported by all browsers. If you want to support old browsers like Internet Explorer, a polyfill is available.

Alternatively, you could write your own JavaScript function that takes in a query string parameter name and returns its value:

function queryParam(name) {
  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
  var results = regex.exec(window.location.search)
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '))
}

queryParam('price') // 29
queryParam('sort') // desc

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.