Is there any JavaScript library that makes a dictionary out of the query string, ASP.NET style?
Something which can be used like:
var query = window.location.querystring["query"]?
Is "query string" called something else outside the .NET realm? Why isn't location.search broken into a key/value collection ?
EDIT: I have written my own function, but does any major JavaScript library do this?
-
3found this: medialize.github.com/URI.jsdeerchao– deerchao2012年02月09日 05:43:44 +00:00Commented Feb 9, 2012 at 5:43
-
See also How can I get query string values?Bergi– Bergi2013年08月01日 00:21:24 +00:00Commented Aug 1, 2013 at 0:21
-
Very duplicated: stackoverflow.com/questions/901115/… and stackoverflow.com/questions/901115/…DavidTaubmann– DavidTaubmann2017年03月22日 11:13:27 +00:00Commented Mar 22, 2017 at 11:13
-
1@davidtaubmann that one is older, it would be inverse. Funny that they essentially ask the same, but due to the format of the question one got the glory turned into community's, and other closed as off-topic.Andre Figueiredo– Andre Figueiredo2018年03月07日 20:26:30 +00:00Commented Mar 7, 2018 at 20:26
15 Answers 15
You can extract the key/value pairs from the location.search property, this property has the part of the URL that follows the ? symbol, including the ? symbol.
function getQueryString() {
var result = {}, queryString = location.search.slice(1),
re = /([^&=]+)=([^&]*)/g, m;
while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
return result;
}
// ...
var myParam = getQueryString()["myParam"];
9 Comments
dork.com/?equation=10=2 ...?val=foo&val=bar&val=baz how would you accomodate this?val=foo&val=bar&val=baz; it would have to be val[]=foo&val[]=bar&val[]=baz%20's, so I replaced result[keyValuePair[0]] = keyValuePair[1] || ''; with result[keyValuePair[0]] = decodeURIComponent((keyValuePair[1]+'').replace(/\+/g, '%20')) || '';tl;dr solution on a single(ish) line of code using vanilla javascript
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
})
For querystring ?a=1&b=2&c=3&d&eit returns:
> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined
multi-valued keys and encoded characters?
See the original answer at How can I get query string values in JavaScript?
"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
12 Comments
Maybe http://plugins.jquery.com/query-object/?
This is the fork of it https://github.com/sousk/jquery.parsequery#readme.
6 Comments
After finding this post, when looking myself I thought I should add that I don't think the most up-voted solution is the best. It doesn't handle array values (such as ?a=foo&a=bar - in this case I would expect getting a to return ['foo', 'bar']). It also as far as I can tell doesn't take into account encoded values - such as hex character encoding where %20 represents a space (example: ?a=Hello%20World) or the plus symbol being used to represent a space (example: ?a=Hello+World).
Node.js offers what looks like a very complete solutions to querystring parsing. It would be easy to take out and use in your own project as its fairly well isolated and under a permissive licence.
The code for it can be viewed here: https://github.com/joyent/node/blob/master/lib/querystring.js
The tests that Node has can be seen here: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js I would suggest trying some of these with the popular answer to see how it handles them.
There is also a project that I was involved in to specifically add this functionality. It is a port of the Python standard lib query string parsing module. My fork can be found here: https://github.com/d0ugal/jquery.qeeree
1 Comment
Or you could use the library sugar.js.
From sugarjs.com:
Object.fromQueryString ( str , deep = true )
Converts the query string of a URL into an object. If deep is false, conversion will only accept shallow params (ie. no object or arrays with [] syntax) as these are not universally supported.
Object.fromQueryString('foo=bar&broken=wear') >{"foo":"bar","broken":"wear"} Object.fromQueryString('foo[]=1&foo[]=2') >{"foo":[1,2]}
Example:
var queryString = Object.fromQueryString(location.search);
var foo = queryString.foo;
Comments
If you have the querystring on hand, use this:
/**
* @param qry the querystring
* @param name name of parameter
* @returns the parameter specified by name
* @author [email protected]
*/
function getQueryStringParameter(qry,name){
if(typeof qry !== undefined && qry !== ""){
var keyValueArray = qry.split("&");
for ( var i = 0; i < keyValueArray.length; i++) {
if(keyValueArray[i].indexOf(name)>-1){
return keyValueArray[i].split("=")[1];
}
}
}
return "";
}
Comments
// How about this
function queryString(qs) {
var queryStr = qs.substr(1).split("&"),obj={};
for(var i=0; i < queryStr.length;i++)
obj[queryStr[i].split("=")[0]] = queryStr[i].split("=")[1];
return obj;
}
// Usage:
var result = queryString(location.search);
4 Comments
decodeURIComponent on the extracted strings at least.decodeURIComponent stand, though.It is worth noting, the library that John Slegers mentioned does have a jQuery dependency, however here is a version that is vanilla Javascript.
https://github.com/EldonMcGuinness/querystring.js
I would have simply commented on his post, but I lack the reputation to do so. :/
Example:
The example below process the following, albeit irregular, query string:
?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
var qs = "?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab";
//var qs = "?=&=";
//var qs = ""
var results = querystring(qs);
(document.getElementById("results")).innerHTML =JSON.stringify(results, null, 2);<script
src="https://rawgit.com/EldonMcGuinness/querystring.js/master/dist/querystring.min.js"></script>
<pre id="results">RESULTS: Waiting...</pre>1 Comment
The code
This Gist by Eldon McGuinness is by far the most complete implementation of a JavaScript query string parser that I've seen so far.
Unfortunately, it's written as a jQuery plugin.
I rewrote it to vanilla JS and made a few improvements :
function parseQuery(str) {
var qso = {};
var qs = (str || document.location.search);
// Check for an empty querystring
if (qs == "") {
return qso;
}
// Normalize the querystring
qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
while (qs.indexOf("&&") != -1) {
qs = qs.replace(/&&/g, '&');
}
qs = qs.replace(/([\&]+$)/, '');
// Break the querystring into parts
qs = qs.split("&");
// Build the querystring object
for (var i = 0; i < qs.length; i++) {
var qi = qs[i].split("=");
qi = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof qso[qi[0]] !== "undefined") {
// If a key already exists then make this an object
if (typeof (qso[qi[0]]) == "string") {
var temp = qso[qi[0]];
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = [];
qso[qi[0]].push(temp);
qso[qi[0]].push(qi[1]);
} else if (typeof (qso[qi[0]]) == "object") {
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]].push(qi[1]);
}
} else {
// If no key exists just set it as a string
if (qi[1] == "") {
qi[1] = null;
}
qso[qi[0]] = qi[1];
}
}
return qso;
}
How to use it
var results = parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab");
Output
{
"foo": ["bar", "boo" ],
"roo": "bar",
"bee": "bop",
"": ["ghost", "ghost2"],
"checkbox[]": ["b1", "b2"],
"dd": null,
"http": [
"http://w3schools.com/my test.asp?name=ståle&car=saab",
"http://w3schools2.com/my test.asp?name=ståle&car=saab"
]
}
See also this Fiddle.
Comments
function decode(s) {
try {
return decodeURIComponent(s).replace(/\r\n|\r|\n/g, "\r\n");
} catch (e) {
return "";
}
}
function getQueryString(win) {
var qs = win.location.search;
var multimap = {};
if (qs.length > 1) {
qs = qs.substr(1);
qs.replace(/([^=&]+)=([^&]*)/g, function(match, hfname, hfvalue) {
var name = decode(hfname);
var value = decode(hfvalue);
if (name.length > 0) {
if (!multimap.hasOwnProperty(name)) {
multimap[name] = [];
}
multimap[name].push(value);
}
});
}
return multimap;
}
var keys = getQueryString(window);
for (var i in keys) {
if (keys.hasOwnProperty(i)) {
for (var z = 0; z < keys[i].length; ++z) {
alert(i + ":" + keys[i][z]);
}
}
}
3 Comments
I like to keep it simple, readable and small.
function searchToObject(search) {
var pairs = search.substring(1).split("&"),
obj = {}, pair;
for (var i in pairs) {
if (pairs[i] === "") continue;
pair = pairs[i].split("=");
obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
return obj;
}
searchToObject(location.search);
Example:
searchToObject('?query=myvalue')['query']; // spits out: 'myvalue'
Comments
Function I wrote for a requirement similar to this with pure javascript string manipulation
"http://www.google.lk/?Name=John&Age=20&Gender=Male"
function queryize(sampleurl){
var tokens = url.split('?')[1].split('&');
var result = {};
for(var i=0; i<tokens.length; i++){
result[tokens[i].split('=')[0]] = tokens[i].split('=')[1];
}
return result;
}
Usage:
queryize(window.location.href)['Name'] //returns John
queryize(window.location.href)['Age'] //returns 20
queryize(window.location.href)['Gender'] //returns Male
2 Comments
? that's basically the same as the two answers above you?If you are using lodash + ES6, here is a one line solution:
_.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));
Comments
Okay, since everyone is ignoring my actual question, heh, I'll post mine too! Here's what I have:
location.querystring = (function() {
// The return is a collection of key/value pairs
var queryStringDictionary = {};
// Gets the query string, starts with '?'
var querystring = unescape(location.search);
// document.location.search is empty if no query string
if (!querystring) {
return {};
}
// Remove the '?' via substring(1)
querystring = querystring.substring(1);
// '&' seperates key/value pairs
var pairs = querystring.split("&");
// Load the key/values of the return collection
for (var i = 0; i < pairs.length; i++) {
var keyValuePair = pairs[i].split("=");
queryStringDictionary[keyValuePair[0]] = keyValuePair[1];
}
// Return the key/value pairs concatenated
queryStringDictionary.toString = function() {
if (queryStringDictionary.length == 0) {
return "";
}
var toString = "?";
for (var key in queryStringDictionary) {
toString += key + "=" + queryStringDictionary[key];
}
return toString;
};
// Return the key/value dictionary
return queryStringDictionary;
})();
And the tests:
alert(window.location.querystring.toString());
for (var key in location.querystring) {
alert(key + "=" + location.querystring[key]);
}
Mind you thought, JavaScript isn't my native tongue.
Anyway, I'm looking for a JavaScript library (e.g. jQuery, Prototype) that already has one written. :)
3 Comments
Building on the answer by @CMS I have the following (in CoffeeScript which can easily be converted to JavaScript):
String::to_query = ->
[result, re, d] = [{}, /([^&=]+)=([^&]*)/g, decodeURIComponent]
while match = re.exec(if @.match /^\?/ then @.substring(1) else @)
result[d(match[1])] = d match[2]
result
You can easily grab what you need with:
location.search.to_query()['my_param']
The win here is an object-oriented interface (instead of functional) and it can be done on any string (not just location.search).
If you are already using a JavaScript library this function make already exist. For example here is Prototype's version