是否有任何 JavaScript 库可以根据查询字符串、ASP.NET样式制作字典？
可以使用的东西，例如：
var query = window.location.querystring["query"]?
“查询字符串”是否被称为领域之外的其他东西.NET？为什么不location.search分成键/值集合？
编辑：我已经编写了自己的函数，但是任何主要的 JavaScript 库都这样做吗？
Chris
问问题
165289 次
15 回答
232
您可以从location.search属性中提取键/值对，该属性具有跟在 ? 后面的 URL 部分。符号，包括 ? 象征。
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"];
于 2009-03-15T04:08:10.937 回答
22
tl；dr使用 vanilla javascript 在单行（ish）代码上的解决方案
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
})
对于查询字符串?a=1&b=2&c=3&d&e，它返回：
> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined
多值键和编码字符?
"?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"]
于 2014-01-16T16:23:04.103 回答
11
于 2009-03-15T05:33:54.320 回答
8
找到这篇文章后，当我看着自己时，我想我应该补充一点，我认为投票最多的解决方案并不是最好的。它不处理数组值（例如 ?a=foo&a=bar - 在这种情况下，我希望得到 a 返回 ['foo', 'bar']）。据我所知，它也没有考虑编码值 - 例如十六进制字符编码，其中 %20 表示空格（例如：?a=Hello%20World）或用于表示空格的加号（例如: ?a=Hello+World)。
Node.js 提供了看起来非常完整的查询字符串解析解决方案。它很容易在您自己的项目中取出和使用，因为它相当隔离并在许可许可下。
它的代码可以在这里查看：https ://github.com/joyent/node/blob/master/lib/querystring.js
可以在这里看到 Node 的测试： https ://github.com/joyent/node/blob/master/test/simple/test-querystring.js我建议用流行的答案尝试其中的一些，看看它是如何处理它们。
我还参与了一个专门添加此功能的项目。它是 Python 标准库查询字符串解析模块的一个端口。我的叉子可以在这里找到：https ://github.com/d0ugal/jquery.qeeree
于 2011-11-20T17:50:47.763 回答
5
或者您可以使用库sugar.js。
来自sugarjs.com：
Object.fromQueryString ( str , deep = true )
将 URL 的查询字符串转换为对象。如果 deep 为 false，则转换将只接受浅参数（即没有具有 [] 语法的对象或数组），因为这些参数并非普遍支持。
Object.fromQueryString('foo=bar&broken=wear') >{"foo":"bar","broken":"wear"} Object.fromQueryString('foo[]=1&foo[]=2') >{"foo":[1,2]}
例子：
var queryString = Object.fromQueryString(location.search);
var foo = queryString.foo;
于 2013-08-21T12:23:29.823 回答
3
如果您手头有查询字符串，请使用以下命令：
/**
* @param qry the querystring
* @param name name of parameter
* @returns the parameter specified by name
* @author eduardo.medeirospereira@gmail.com
*/
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 "";
}
于 2012-05-03T18:48:21.603 回答
2
// 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);
于 2014-02-16T17:46:27.840 回答
2
编码
Eldon McGuinness 的这篇 Gist是迄今为止我见过的最完整的 JavaScript 查询字符串解析器实现。
不幸的是，它是作为一个 jQuery 插件编写的。
我将其重写为 vanilla JS 并进行了一些改进：
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;
}
如何使用它
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");
输出
{
"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"
]
}
另请参阅此 Fiddle。
于 2016-02-21T17:29:40.680 回答
2
值得注意的是，John Slegers 提到的库确实有一个 jQuery 依赖项，但是这里有一个香草 Javascript 版本。
https://github.com/EldonMcGuinness/querystring.js
我会简单地评论他的帖子，但我缺乏这样做的声誉。：/
例子：
下面的示例处理以下查询字符串，尽管是不规则的：
?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>于 2016-02-21T21:53:49.860 回答
1
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]);
}
}
}
于 2009-03-15T05:02:03.163 回答
1
我喜欢保持简单、易读和小。
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);
例子：
searchToObject('?query=myvalue')['query']; // spits out: 'myvalue'
于 2014-06-12T08:20:41.887 回答
1
我为与纯javascript字符串操作类似的要求编写的函数
"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;
}
用法：
queryize(window.location.href)['Name'] //returns John
queryize(window.location.href)['Age'] //returns 20
queryize(window.location.href)['Gender'] //returns Male
于 2014-07-31T15:16:37.400 回答
1
如果您使用的是 lodash + ES6，这里有一个单行解决方案：
_.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));
于 2015-12-10T21:34:57.883 回答
0
好吧，既然每个人都忽略了我的实际问题，呵呵，我也会发布我的！这是我所拥有的：
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;
})();
和测试：
alert(window.location.querystring.toString());
for (var key in location.querystring) {
alert(key + "=" + location.querystring[key]);
}
请注意，JavaScript 不是我的母语。
无论如何，我正在寻找一个已经编写好的 JavaScript 库（例如 jQuery、Prototype）。:)
于 2009-03-15T04:14:52.107 回答
0
基于@CMS 的答案，我有以下内容（在可以轻松转换为 JavaScript 的 CoffeeScript 中）：
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
您可以通过以下方式轻松获取所需内容：
location.search.to_query()['my_param']
这里的胜利是面向对象的接口（而不是函数式），它可以在任何字符串上完成（不仅仅是 location.search）。
如果您已经在使用 JavaScript 库，则此函数已存在。例如这里是原型的版本
于 2012-10-17T19:16:26.383 回答