How can I get query string values in JavaScript?

ghz 1years ago ⋅ 9669 views

Question

This question's answers are a[community effort](/help/privileges/edit- community-wiki). Edit existing answers to improve this post. It is not currently accepting new answers or interactions.

Is there a plugin-less way of retrieving query string values via jQuery (or without)?

If so, how? If not, is there a plugin which can do so?

Answer

Use [URLSearchParams](https://developer.mozilla.org/en- US/docs/Web/API/URLSearchParams#Browser_compatibility) to get parameters from the query string.

For example:

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

Update: Jan-2022

Using [Proxy()](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) is faster than using [Object.fromEntries()](https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) and better supported.

This approach comes with the caveat that you can no longer iterate over query parameters.

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"

Update: June-2021

For a specific case when you need all query params:

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

Update: Sep-2018

You can use [URLSearchParams](https://developer.mozilla.org/en- US/docs/Web/API/URLSearchParams#Browser_compatibility) which is simple and has decent (but not complete) browser support.

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

Original

You don't need jQuery for that purpose. You can use just some pure JavaScript:

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, ' '));
}

Usage:

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

NOTE: If a parameter is present several times (?foo=lorem&foo=ipsum), you will get the first value (lorem). There is no standard about this and usages vary, see for example this question: [Authoritative position of duplicate HTTP GET query keys](https://stackoverflow.com/questions/1746507/authoritative- position-of-duplicate-http-get-query-keys).

NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, [add 'i' modifier to RegExp](https://stackoverflow.com/questions/3939715/case-insensitive-regex-in- javascript)

NOTE: If you're getting a no-useless-escape eslint error, you can replace name = name.replace(/[\[\]]/g, '\\$&'); with name = name.replace(/[[\]]/g, '\\$&').

This is an update based on the new URLSearchParams specs to achieve the same result more succinctly. See answer titled "[URLSearchParams](https://stackoverflow.com/questions/901115/how-can-i-get- query-string-values-in-javascript/901144#12151322)" below.

#javascript