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:
|
|||||||||||||||||||||
|
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. |
|||||||||||||
|
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! |
|||||||||||||||||||||
|
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 like this one (taken from jquery-howto.blogspot.co.uk):
Works great for me. |
||||
|
The problem with top answer on that question is that it's not support params placed after #, but sometimes it's needed to get this value also. I modify the unswer to let it parse full query string with hash sign also
|
|||||||||
|
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.
|
|||||
|
tl;drA quick, complete solution, which handles multivalued keys and encoded characters.
multi-lined:
example:
Read more... about the vanilla JavaScript solutionTo access different parts of url use easiest (dummy) solution
multi-valued keysSimple key check
encoded characters?Use
example:
*!!! Please note, that
|
|||||||||||||
|
Use the following to get a query param value given a key name:
Use a stronger regex if you have a common substring problem:
Firefox supports the URLSearchParams API. It is not standardized by W3C, but is a living standard by WhatWG. |
||||
|
Here is a fast way to get an object similar to the PHP $_GET array:
Usage:
For the query string
|
|||||
|
From the MDN:
|
||||
|
Amazing how many overly complicated and incomplete solutions are posted here. Here's what I'm using:
Works with following URLs (values of
Returning 'override' rather than '0' in the last case makes it consistent with PHP. Works in IE7. |
|||||||||
|
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:
|
||||
|
Please check and let me know your comments. Also Refer: How to get querystring value using jQuery |
|||||
|
If you are using Browserify, you can use the
Further reading: URL Node.js v0.12.2 Manual & Documentation |
|||||
|
|
||||
|
Doing this reliably is more involved than one may think at first.
To solve this, here is a configurable API with a healthy dose of defensive programming. Note that it can be made half the size if you are willing to hardcode some of the variables, or if the input can never include Version 1: Returns a data object with names and values for each parameter. It effectively de-duplicates them and always respects the first one found from left-to-right.
Version 2: Returns a data map object with two identical length arrays, one for names and one for values, with an index for each parameter. This one supports duplicate names and intentionally does not de-duplicate them, because that is probably why you would want to use this format.
} |
|||||||||
|
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. |
||||
|
This didn't work for me, I want to match `?b' as the 'b' parameter is present, and not match '?return' as the 'r' parameter, here is my solution.
|
||||
|
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
|
|||||||||||||||||||||
|
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:
|
|||||||||||||||||
|
This function will return a parsed JavaScript object with any arbitrarily nested values using recursion as necessary. Here's a jsfiddle example.
Given any of the above test examples.
|
|||||
|
Why not just use 2 splits ?
I was reading all previous and more complete answer. 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. |
|||||||||
|
Most pretty but basic:
It doesn't handle values lists such as |
||||
|
Here is String prototype implementation:
Example call:
|
||||
|
For those who wants a short method (with limitations):
|
|||||||||||||
|
quick, easy, and fast: The Function:
Usage:
|
||||
|
The shortest possible expression in terms of size to obtain a query object seems to be:
You can make use of the
|
||||
|
Simple Solution with Plain JS and Regex
|
||||
|
Get all querystring parameters including checkbox values (arrays). Considering the a correct & normal use of GET parameters the things i see it's missing, on most functions, is the support for arrays and removing the hash data So i wrote this function
Using shorthand operators & while-- loop the performance should be very good to. Support:
Notes: It does not support object arrays (key[key]=value) If the space is + it remains a +. add Usage:
Return:
Demo: Info If you don't understand something or you can't read the function just ask i'm happy to explain what i did here. If you think the function is unreadable and unmanainable i'm happy to rewrite the function for you , but consider that shorthand & bitwise operators are always faster than a standard syntax (mybe read about shorthands and bitwise operators in the ECMA-262 book or us your favorite searchengine).Rewriting the code in a standard readable syntax means performance loss. |
||||
|
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.
Would you like to answer one of these unanswered questions instead?