考虑以下形式：
<form>
<input name="foo" value="bar">
<input name="hello" value="hello world">
</form>
我可以使用$.param( .. )构造来序列化表单：
$.param( $('form input') )
=> foo=bar&hello=hello+world
如何使用JavaScript反序列化上述String并获取哈希值？
例如，
$.magicFunction("foo=bar&hello=hello+world")
=> {'foo' : 'bar', 'hello' : 'hello world'}
答案 0 :(得分：59)
您应该使用jQuery BBQ的deparam功能。它经过了充分的测试和记录。
答案 1 :(得分：29)
这是我之前写过的类似功能的略微修改版本。
var QueryStringToHash = function QueryStringToHash (query) {
var query_string = {};
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
pair[0] = decodeURIComponent(pair[0]);
pair[1] = decodeURIComponent(pair[1]);
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]], pair[1] ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
return query_string;
};
答案 2 :(得分：19)
这种简短的功能方法怎么样？
function parseParams(str) {
return str.split('&').reduce(function (params, param) {
var paramSplit = param.split('=').map(function (value) {
return decodeURIComponent(value.replace(/\+/g, ' '));
});
params[paramSplit[0]] = paramSplit[1];
return params;
}, {});
}
示例：
parseParams("this=is&just=an&example") // Object {this: "is", just: "an", example: undefined}
答案 3 :(得分：14)
我的回答：
function(query){
var setValue = function(root, path, value){
if(path.length > 1){
var dir = path.shift();
if( typeof root[dir] == 'undefined' ){
root[dir] = path[0] == '' ? [] : {};
}
arguments.callee(root[dir], path, value);
}else{
if( root instanceof Array ){
root.push(value);
}else{
root[path] = value;
}
}
};
var nvp = query.split('&');
var data = {};
for( var i = 0 ; i < nvp.length ; i++ ){
var pair = nvp[i].split('=');
var name = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1]);
var path = name.match(/(^[^\[]+)(\[.*\]$)?/);
var first = path[1];
if(path[2]){
//case of 'array[level1]' || 'array[level1][level2]'
path = path[2].match(/(?=\[(.*)\]$)/)[1].split('][')
}else{
//case of 'name'
path = [];
}
path.unshift(first);
setValue(data, path, value);
}
return data;
}
答案 4 :(得分：9)
我正在使用David Dorward的回答，并意识到它不像PHP或Ruby on Rails那样解析params：
1）变量只是一个以[]结尾的数组，例如?choice[]=1&choice[]=12，而不是?a=1&a=2
2）当多个params存在同名时，后者替换之前的那些，就像在PHP服务器上一样（Ruby on Rails保留第一个并忽略后者），例如?a=1&b=2&a=3
所以修改David的版本，我有：
function QueryStringToHash(query) {
if (query == '') return null;
var hash = {};
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
var k = decodeURIComponent(pair[0]);
var v = decodeURIComponent(pair[1]);
// If it is the first entry with this name
if (typeof hash[k] === "undefined") {
if (k.substr(k.length-2) != '[]') // not end with []. cannot use negative index as IE doesn't understand it
hash[k] = v;
else
hash[k.substr(0, k.length-2)] = [v];
// If subsequent entry with this name and not array
} else if (typeof hash[k] === "string") {
hash[k] = v; // replace it
// If subsequent entry with this name and is array
} else {
hash[k.substr(0, k.length-2)].push(v);
}
}
return hash;
};
经过相当彻底的测试。
答案 5 :(得分：7)
我知道这是一个旧帖子，但也许还有一些相关性吗？
受到Jacky Li的良好解决方案的启发，我尝试了自己的微小变化，以便能够处理数组和对象的任意组合作为输入。我看了一下PHP如何做到这一点，并尝试获得“类似”的东西。这是我的代码：
function getargs(str){
var ret={};
function build(urlnam,urlval,obj){ // extend the return object ...
var i,k,o=obj, x, rx=/\[([^\]]*)\]/g, idx=[urlnam.replace(rx,'')];
while (x=rx.exec(urlnam)) idx.push(x[1]);
while(true){
k=idx.shift();
if(k.trim()=='') {// key is empty: autoincremented index
if (o.constructor.name=='Array') k=o.length; // for Array
else if (o===obj ) {k=null} // for first level property name
else {k=-1; // for Object
for(i in o) if (+i>k) k=+i;
k++;
}
}
if(idx.length) {
// set up an array if the next key (idx[0]) appears to be
// numeric or empty, otherwise set up an object:
if (o[k]==null || typeof o[k]!='object') o[k]=isNaN(idx[0])?{}:[];
o=o[k]; // move on to the next level
}
else { // OK, time to store the urlval in its chosen place ...
// console.log('key',k,'val',urlval);
o[k]=urlval===""?null:urlval; break; // ... and leave the while loop.
}
}
return obj;
}
// ncnvt: is a flag that governs the conversion of
// numeric strings into numbers
var ncnvt=true,i,k,p,v,argarr=[],
ar=(str||window.location.search.substring(1)).split("&"),
l=ar.length;
for (i=0;i<l;i++) {if (ar[i]==="") continue;
p=ar[i].split("=");k=decodeURIComponent(p[0]);
v=p[1];v=(v!=null)?decodeURIComponent(v.replace(/\+/g,'%20')):'';
if (ncnvt && v.trim()>"" && !isNaN(v)) v-=0;
argarr.push([k,v]); // array: key-value-pairs of all arguments
}
for (i=0,l=argarr.length;i<l;i++) build(argarr[i][0],argarr[i][1],ret);
return ret;
}
如果在没有str - 参数的情况下调用该函数，它将假定window.location.search.slice(1)作为输入。
一些例子：
['a=1&a=2', // 1
'x[y][0][z][]=1', // 2
'hello=[%22world%22]&world=hello', // 3
'a=1&a=2&&b&c=3&d=&=e&', // 4
'fld[2][]=2&fld[][]=3&fld[3][]=4&fld[]=bb&fld[]=cc', // 5
$.param({a:[[1,2],[3,4],{aa:'one',bb:'two'},[5,6]]}), // 6
'a[]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13',// 7
'a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13'// 8
].map(function(v){return JSON.stringify(getargs(v));}).join('\n')
结果
{"a":2} // 1
{"x":{"y":[{"z":[1]}]}} // 2
{"hello":"[\"world\"]","world":"hello"} // 3
{"a":2,"b":null,"c":3,"d":null,"null":"e"} // 4 = { a: 2, b: null, c: 3, d: null, null: "e" }
{"fld":[null,null,[2],[3,4],"bb","cc"]} // 5
{"a":[[1,2],[3,4],{"aa":"one","bb":"two"},[5,6]]} // 6
{"a":["hi",2,null,[7,99],13]} // 7
{"a":{"0":2,"3":[7,99],"4":13,"x":"hi"}} // 8
而Jacky Li的解决方案将为a生成外部容器作为普通对象
{a:{"0":["1","2"],"1":["3","4"],"2":["5","6"]}} // 6: JackyLi's output
getargs()查看任何级别的第一个给定索引，以确定此级别是对象（非数字索引）还是数组（数字或空），从而导致输出如图所示上市bove（第6号）。
如果当前对象是一个数组，则在必要时插入null来表示空位置。数组总是连续编号，基于0。）
注意，在示例中没有。 8即使我们现在处理的是一个对象而不是一个数组，空索引的“自动增量”仍然有效。
据我测试过，我的getargs()表现与Chriss Roger在接受的答案中提到的jQuery $.deparam() plugin非常相似。主要区别在于getargs在没有jQuery的情况下运行，并且在对象中自动增量，而$.deparam()将不执行此操作：
JSON.stringify($.deparam('a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13').a);
结果
{"3":["7","99"],"x":"hi","undefined":"13"}
在$.deparam()中，索引[]被解释为undefined而不是自动增量数字索引。
答案 6 :(得分：6)
以下是如何创建新的jQuery函数：
jQuery.unparam = function (value) {
var
// Object that holds names => values.
params = {},
// Get query string pieces (separated by &)
pieces = value.split('&'),
// Temporary variables used in loop.
pair, i, l;
// Loop through query string pieces and assign params.
for (i = 0, l = pieces.length; i < l; i++) {
pair = pieces[i].split('=', 2);
// Repeated parameters with the same name are overwritten. Parameters
// with no value get set to boolean true.
params[decodeURIComponent(pair[0])] = (pair.length == 2 ?
decodeURIComponent(pair[1].replace(/\+/g, ' ')) : true);
}
return params;
};
答案 7 :(得分：6)
感谢他http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
非常简单：D
function params_unserialize(p){
var ret = {},
seg = p.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;}
答案 8 :(得分：4)
以下是我在服务器端JScript ASP Classic页面（demo）中使用的JavaScript实现：
// Transforms a query string in the form x[y][0][z][]=1 into {x:{y:[{z:[1]}]}}
function parseJQueryParams(p) {
var params = {};
var pairs = p.split('&');
for (var i=0; i<pairs.length; i++) {
var pair = pairs[i].split('=');
var indices = [];
var name = decodeURIComponent(pair[0]),
value = decodeURIComponent(pair[1]);
var name = name.replace(/\[([^\]]*)\]/g,
function(k, idx) { indices.push(idx); return ""; });
indices.unshift(name);
var o = params;
for (var j=0; j<indices.length-1; j++) {
var idx = indices[j];
var nextIdx = indices[j+1];
if (!o[idx]) {
if ((nextIdx == "") || (/^[0-9]+$/.test(nextIdx)))
o[idx] = [];
else
o[idx] = {};
}
o = o[idx];
}
idx = indices[indices.length-1];
if (idx == "") {
o.push(value);
}
else {
o[idx] = value;
}
}
return params;
}
答案 9 :(得分：2)
使用它：
// convert query string to json object
var queryString = "cat=3&sort=1&page=1";
queryString
.split("&")
.forEach((item) => {
const prop = item.split("=");
filter[prop[0]] = prop[1];
});
console.log(queryString);
答案 10 :(得分：1)
在CSS-Tricks（来自Nicholas Ortenzio的原始来源）上有一个漂亮的单行代码：
function getQueryParameters(str) {
return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}
真正聪明的部分是它如何使用匿名函数的this对象，为字符串中的每个查询添加键/值对。也就是说，还有一些改进空间。我已将其修改了一下，但有以下更改：
添加了空字符串和非字符串输入的处理。
处理URI编码的字符串（%40 - ＆gt; @等）。
输入为空时删除了document.location.search的默认用法。
更改了名称，使其更具可读性，添加了评论。
function deparam(str) {
// Uses an empty 'this' to build up the results internally
function splitQuery(query) {
query = query.split('=').map(decodeURIComponent);
this[query[0]] = query[1];
return this;
}
// Catch bad input
if (!str || !(typeof str === 'string' || str instanceof String))
return {};
// Split the string, run splitQuery on each piece, and return 'this'
var queries = str.replace(/(^\?)/,'').split('&');
return queries.map(splitQuery.bind({}))[0];
}
答案 11 :(得分：0)
这确实是一个老问题，但是随着我的来临，其他人可能会来此帖子，并且我想对此主题进行一些更新。如今，无需制定自定义解决方案-有了URLSearchParams界面。
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
我知道的唯一限制-IE / Edge不支持此功能。
答案 12 :(得分：0)
创建数组或对象的序列化表示形式（可用作AJAX请求的URL查询字符串）。
<button id='param'>GET</button>
<div id="show"></div>
<script>
$('#param').click(function () {
var personObj = new Object();
personObj.firstname = "vishal"
personObj.lastname = "pambhar";
document.getElementById('show').innerHTML=$.param(`personObj`));
});
</script>
output:firstname=vishal&lastname=pambhar
答案 13 :(得分：0)
这是一个简单的＆amp;如果您只想从GET请求中快速获取参数，请使用紧凑型：
function httpGet() {
var a={},b,i,q=location.search.replace(/^\?/,"").split(/\&/);
for(i in q) if(q[i]) {b=q[i].split("=");if(b[0]) a[b[0]]=
decodeURIComponent(b[1]).replace(/\+/g," ");} return a;
}
转换
something?aa=1&bb=2&cc=3
进入像
这样的对象{aa:1,bb:2,cc:3}
答案 14 :(得分：0)
我提出了这个解决方案，其行为类似于.Net函数HttpUtility.ParseQueryString。
在结果中，查询字符串参数作为值列表存储在属性中，因此qsObj["param"]将与在.Net中调用GetValues("param")相同。
我希望你喜欢它。 JQuery不是必需的。
var parseQueryString = function (querystring) {
var qsObj = new Object();
if (querystring) {
var parts = querystring.replace(/\?/, "").split("&");
var up = function (k, v) {
var a = qsObj[k];
if (typeof a == "undefined") {
qsObj[k] = [v];
}
else if (a instanceof Array) {
a.push(v);
}
};
for (var i in parts) {
var part = parts[i];
var kv = part.split('=');
if (kv.length == 1) {
var v = decodeURIComponent(kv[0] || "");
up(null, v);
}
else if (kv.length > 1) {
var k = decodeURIComponent(kv[0] || "");
var v = decodeURIComponent(kv[1] || "");
up(k, v);
}
}
}
return qsObj;
};
以下是如何使用它：
var qsObj = parseQueryString("a=1&a=2&&b&c=3&d=&=e&");
要在控制台juste中预览结果，请输入：
JSON.stringify(qsObj)
输出：
"{"a":["1","2"],"null":["","b",""],"c":["3"],"d":[""],"":["e"]}"
答案 15 :(得分：0)
这是我在Coffeescript中的版本。
也适用于网址
http://localhost:4567/index.html?hello=[%22world%22]&world=hello#/home
getQueryString: (url)->
return null if typeof url isnt 'string' or url.indexOf("http") is -1
split = url.split "?"
return null if split.length < 2
path = split[1]
hash_pos = path.indexOf "#"
path = path[0...hash_pos] if hash_pos isnt -1
data = path.split "&"
ret = {}
for d in data
[name, val] = d.split "="
name = decodeURIComponent name
val = decodeURIComponent val
try
ret[name] = JSON.parse val
catch error
ret[name] = val
return ret
答案 16 :(得分：-1)
您可以使用jQuery本身的函数.serializeArray()（Link）。此函数返回键值对的数组。结果示例：
[
{ name: "id", value: "1" },
{ name: "version", value: "100" }
]
答案 17 :(得分：-1)
答案可以使用一些 jQuery 优雅：
(function($) {
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g; // Regex for replacing addition symbol with a space
var decode = function (str) {return decodeURIComponent( str.replace(decodeRE, " ") );};
$.parseParams = function(query) {
var params = {}, e;
while ( e = re.exec(query) ) {
var k = decode( e[1] ), v = decode( e[2] );
if (k.substring(k.length - 2) === '[]') {
k = k.substring(0, k.length - 2);
(params[k] || (params[k] = [])).push(v);
}
else params[k] = v;
}
return params;
};
})(jQuery);