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?
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? |
|||||||||||||||||||||
locked by animuson♦ Jul 25 '14 at 19:35This question's answers are a collaborative effort: if you see something that can be improved, just edit the answer to improve it! No additional answers can be added here |
|||||||||||||||||||||
|
You don't need jQuery for that purpose. You can use just some pure JavaScript:
Usage:
|
|||||||||||||||||||||
|
Some of the solutions posted here are inefficient. Repeating the regular expression search every time the script needs to access a parameter is completely unnecessary, one single function to split up the parameters into an associative-array style object is enough. If you're not working with the HTML 5 History API, this is only necessary once per page load. The other suggestions here also fail to decode the URL correctly.
Example querystring:
Result:
This could easily be improved upon to handle array-style query strings too. An example of this is here, but since array-style parameters aren't defined in RFC 3986 I won't pollute this answer with the source code. For those interested in a "polluted" version, look at campbeln's answer below. Also, as pointed out in the comments, If you're using a server-side preprocessing language, you might want to use its native JSON functions to do the heavy lifting for you. For example, in PHP you can write:
Much simpler! |
|||||||||||||||||||||
|
Without jQuery
With an URL like
Google methodTearing Google's code I found the method they use:
It is obfuscated, but it is understandable. They start to look for parameters on the url from In the end the object My method as a jQuery plugin
Usage
Performance test (split method against regex method) (jsPerf)Preparation code: methods declaration Split test code
Regex test code
Testing in Firefox 4.0 x86 on Windows Server 2008 R2 / 7 x64
|
|||||||||||||||||||||
|
Improved version of Artem Barger's answer:
For more information on improvement see: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/ |
|||||||||||||||||||||
|
Just another recommendation. The plugin Purl allows to retrieve all parts of URL, including anchor, host, etc. It can be used with or without jQuery. Usage is very simple and cool:
However, as of Nov 11, 2014, Purl is no longer maintained and the author recommends using URI.js instead. The jQuery plugin is different in that it focuses on elements - for usage with strings, just use
|
|||||||||||||||||
|
Roshambo on snipplr.com has a simple script to achieve this described in Get URL Parameters with jQuery | Improved. With his script you also easily get to pull out just the parameters you want. Here's the gist:
Then just get your parameters from the query string. So if the URL/query string was Just call UZBEKJON has a great blog post on this as well, Get URL parameters & values with jQuery. |
|||||||||||||||||||||
|
If you're using jQuery, you can use a library, such as jQuery BBQ: Back Button & Query Library.
Edit: Adding Deparam Example:
If you want to just use plain JavaScript, you could use...
Because of the new HTML History API and specifically This version will update its internal cache of parameters each time the history changes. |
||||
|
tl;drA quick, complete solution, which handles multivalued keys and encoded characters.
Multi-lined:
Example:
short-circuit evaluation, ES6 Destructuring assignments, Arrow functions Read more... about the Vanilla JavaScript solution.To access different parts of a URL use Easiest (dummy) solution
Multi-valued keysSimple key check
Encoded characters?Use
Example:
*!!! Please note, that
|
|||||||||||||||||||||
|
URLSearchParamsFirefox 44+, Opera 36+ and Chrome 49+ support the URLSearchParams API: Safari Nightly has implemented it as well. It is not standardized by W3C, but it is a living standard by WhatWG. You can use it on location, but you need to remove the
Or of course on any URL:
And you read/set parameters through the There's also a google-suggested URLSearchParams polyfill, a reference implementation, and a sample page if you want to start using this API without relying on latest version of Chrome/Firefox/Opera. |
|||||||||
|
Here's my stab at making Andy E's excellent solution into a full fledged jQuery plugin:
The syntax is:
Best of both worlds! |
||||
|
Just use two splits:
I was reading all the previous and more complete answers. But I think that is the simplest and faster method. You can check in this jsPerf benchmark To solve the problem in Rup's comment, add a conditional split by changing the first line to the two below. But absolute accuracy means it's now slower than regexp (see jsPerf).
So if you know you won't run into Rup's counter-case, this wins. Otherwise, regexp. |
|||||||||||||||||||||
|
If you're doing more URL manipulation than simply parsing the querystring, you may find URI.js helpful. It is a library for manipulating URLs - and comes with all the bells and whistles. (Sorry for self-advertising here) to convert your querystring into a map:
(URI.js also "fixes" bad querystrings like |
|||||
|
I like Ryan Phelan's solution. But I don't see any point of extending jQuery for that? There is no usage of jQuery functionality. On other hand I like the built-in function in Google Chrome: window.location.getParameter. So why not to use this? Okay, other browsers don't have. So let's create this function if it does not exist:
This function is more or less from Ryan Phelan, but it is wrapped differently: clear name and no dependencies of other javascript libraries. More about this function on my blog. |
|||||||||
|
Here is a fast way to get an object similar to the PHP $_GET array:
Usage:
For the query string
|
|||||||||||||||||
|
Keep it simple in plain JavaScript code:
Call it from anywhere in the JavaScript code:
|
|||||
|
From the MDN:
|
|||||
|
These are all great answers, but I needed something a bit more robust, and thought you all might like to have what I created. It is a simple library method that does dissection and manipulation of URL parameters. The static method has the following sub methods that can be called on the subject URL:
Example:
|
||||
|
Code golf:
Display it!
On my Mac:
|
|||||
|
|
|||||
|
Roshambo jQuery method wasn't taking care of decode URL
Just added that capability also while adding in the return statement
Now you can find the updated gist:
|
||||
|
I use regular expressions a lot, but not for that. It seems easier and more efficient to me to read the query string once in my application, and build an object from all the key/value pairs like:
For a URL like |
||||
|
I like this one (taken from jquery-howto.blogspot.co.uk):
Works great for me. |
||||
|
Here's my edit to this excellent answer - with added ability to parse query strings with keys without values.
IMPORTANT! The parameter for that function in the last line is different. It's just an example of how one can pass an arbitrary URL to it. You can use last line from Bruno's answer to parse the current URL. So what exactly changed? With url |
||||
|
I needed an object from the query string, and I hate lots of code. It may not be the most robust in the universe, but it's just a few lines of code.
A URL like
|
|||||||||||||||||
|
This is a function I created a while back and I'm quite happy with. It is not case sensitive - which is handy. Also, if the requested QS doesn't exist, it just returns an empty string. I use a compressed version of this. I'm posting uncompressed for the novice types to better explain what's going on. I'm sure this could be optimized or done differently to work faster, but it's always worked great for what I need. Enjoy.
|
|||||||||
|
The problem with the top answer on that question is that it's not-supported parameters placed after #, but sometimes it's needed to get this value also. I modified the answer to let it parse a full query string with a hash sign also:
|
|||||||||||||
|
We've just released arg.js, a project aimed at solving this problem once and for all. It's traditionally been so difficult but now you can do:
or getting the whole lot:
and if you care about the difference between |
|||||
|
And this is how you can use this function assuming the URL is
|
|||||
|
Here's an extended version of Andy E's linked "Handle array-style query strings"-version. Fixed a bug ( It will handle the following querystring...
...making it into an object that looks like...
As you can see above, this version handles some measure of "malformed" arrays, i.e. -
It seems the jury is somewhat out on repeated keys as there is no spec. In this case, multiple keys are stored as an (fake)array. But do note that I do not process values based on commas into arrays. The code:
|
|||||||||||||||||
|
I developed a small library using techniques listed here to create an easy to use, drop-in solution to anyones troubles; It can be found here: https://github.com/Nijikokun/query-js Usage Fetching specific parameter/key:
Using the builder to fetch the entire object:
and tons more... check the github link for more examples. Features
|
||||
|
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?