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?
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) {
if (!url) 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.
NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, add 'i' modifier to RegExp
This is an update based on the new URLSearchParams specs to achieve the same result more succinctly. See answer titled "URLSearchParams" below.
No one's saying it can't be done with pure Javascript. If you're already using jQuery, and jQuery has a function to do this, then it would make sense to use jQuery instead of reinventing the wheel with a new function.
How does this function handle
http://www.mysite.com/index.php?x=x1&x=x2&x=x3
The value of fieldx
is ambiguous.this also doesn't handle multi-valued keys, which are also perfectly legal.
Why would you use a regular expression for this?
For a querystring of
?mykey=0&m.+key=1
, callinggetParameterByName("m.+key")
would return0
instead of1
. You need to escape the regular expression metacharacters inname
before building your regular expression. And you only need to call.replace()
once by using the global flag and using"\\$&"
as the replacement expression. You should search onlocation.search
instead oflocation.href
. An answer with over 400 upvotes should account for these details.