How to Get Query String Values in JavaScript

Query String values are those values that are passed along with URL parameters. Sometimes you may need to retrieve query string values present in URL of address bar for further processing. In this article, we will learn several different ways to retrieve query string in JavaScript.

How to Get Query String Values in JavaScript

Here are the different ways to get query string values in JavaScript.

1. Using Proxy()

Proxy() is a native browser object that allows you to create a proxy object for an original object, and do many things including getting query string values from URLs. Here is a simple code snippet to get query string value from the URL present in your browser’s address bar.

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

Window.location.search returns the query string part of URL. URLSearchParams converts it into a sequence of key-value pairs for easy access. In the above code, we define the get property of search parameters to easily retrieve query string value using its key.

2. Using Object.fromEntries()

In case you want to access all query string values, you can also use Object.fromEntries() function to retrieve them.

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

3. Using URLSearchParams

You can also directly use URLSearchParams to get list of query string values. Here is a simple example to get query string value for key myParam from URL.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

4. Using window.location.href

You can also use plain JavaScript to parse window.location.href to get the required query string values.

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Here is how you can use the above function to get desired query string values. We have displayed different results obtained for different types of query string keys.

// query string: ?abc=lorem&def=&baz
var foo = getParameterByName('abc'); // "lorem"
var bar = getParameterByName('def'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

How to Get Query String Values in JavaScript