snippetjavascriptCritical
How can I get query string values in JavaScript?
Viewed 0 times
howcangetstringjavascriptvaluesquery
Problem
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?
If so, how? If not, is there a plugin which can do so?
Solution
Use URLSearchParams to get parameters from the query string.
For example:
Update: Jan-2022
Using
This approach comes with the caveat that you can no longer iterate over query parameters.
Update: June-2021
For a specific case when you need all query params:
Update: Sep-2018
You can use URLSearchParams which is simple and has decent (but not complete) browser support.
Original
You don't need jQuery for that purpose. You can use just some pure JavaScript:
Usage:
NOTE: If a parameter is present several times (
NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, add 'i' modifier to RegExp
NOTE: If you're getting a no-useless-escape eslint error, you can replace
This is an update based on the new URLSearchParams specs to achieve the same result more succinctly. See answer titled "URLSearchParams" below.
For example:
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');Update: Jan-2022
Using
Proxy() is faster than using 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 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, '\\%%CODEBLOCK_4%%amp;');
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.NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, add 'i' modifier to RegExp
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" below.
Code Snippets
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');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"const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');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, ' '));
}Context
Stack Overflow Q#901115, score: 10675
Revisions (0)
No revisions yet.