将URL参数转换为JavaScript对象

我有这样的string：

abc=foo&def=%5Basf%5D&xyz=5

我怎样才能把它转换成这样的JavaScript对象？

 { abc: 'foo', def: '[asf]', xyz: 5 } 

Answer 1

编辑

这个编辑改进并根据评论解释了答案。

 var search = location.search.substring(1); JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 

例

以五个步骤parsingabc=foo&def=%5Basf%5D&xyz=5 ：

• decodeURI：abc = foo＆def = [asf]＆xyz = 5
• 转义引号：相同，因为没有引号
• replace＆： abc=foo","def=[asf]","xyz=5
• Replace =： abc":"foo","def":"[asf]","xyz":"5
• 用curlies和引号括起来： {"abc":"foo","def":"[asf]","xyz":"5"}

这是合法的JSON。

改进的解决scheme允许在searchstring中使用更多的字符。 它使用reviver函数进行URI解码：

 var search = location.search.substring(1); search?JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) }):{} 

例

 search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar"; 

给

 Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"} 

原始答案

单线：

 JSON.parse('{"' + decodeURI("abc=foo&def=%5Basf%5D&xyz=5".replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}') 

Answer 2

分开并获取名称/值对，然后将每对分成= 。 这是一个例子：

 var str = "abc=foo&def=%5Basf%5D&xy%5Bz=5" var obj = str.split("&").reduce(function(prev, curr, i, arr) { var p = curr.split("="); prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]); return prev; }, {}); 

另一种使用正则expression式的方法：

 var obj = {}; str.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) { obj[decodeURIComponent(key)] = decodeURIComponent(value); }); 

这是从约翰Resig改编的“search和不要replace” 。

Answer 3

这是简单的版本，显然你会想添加一些错误检查：

 var obj = {}; var pairs = queryString.split('&'); for(i in pairs){ var split = pairs[i].split('='); obj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]); } 

Answer 4

我发现$ .String.deparam是最完整的预build解决scheme（可以嵌套对象等）。 检查文档 。

Answer 5

我有同样的问题，尝试在这里的解决scheme，但没有一个真正的工作，因为我有在URL参数中的数组，像这样：

 ?param[]=5&param[]=8&othr_param=abc&param[]=string 

所以我最终编写了自己的JS函数，它使得一个数组超出了URI中的参数：

 /** * Creates an object from URL encoded data */ var createObjFromURI = function() { var uri = decodeURI(location.search.substr(1)); var chunks = uri.split('&'); var params = Object(); for (var i=0; i < chunks.length ; i++) { var chunk = chunks[i].split('='); if(chunk[0].search("\\[\\]") !== -1) { if( typeof params[chunk[0]] === 'undefined' ) { params[chunk[0]] = [chunk[1]]; } else { params[chunk[0]].push(chunk[1]); } } else { params[chunk[0]] = chunk[1]; } } return params; } 

Answer 6

另一个基于URLSearchParams标准的解决scheme（ https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams ）

 function getQueryParamsObject() { const searchParams = new URLSearchParams(location.search.slice(1)); return searchParams ? _.fromPairs(Array.from(searchParams.entries())) : {}; } 

请注意，这个解决scheme正在利用

Array.from （ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from ）

和为简单起见，lodash的_.fromPairs （ https://lodash.com/docs#fromPairs ）。

因为您可以访问searchParams.entries（）迭代器，所以创build更兼容的解决scheme应该很容易。

Answer 7

没有我知道的本地解决scheme。 Dojo有一个内置的非序列化方法，如果你偶然使用这个框架的话。

否则，你可以简单地实现它：

 function unserialize(str) { str = decodeURIComponent(str); var chunks = str.split('&'), obj = {}; for(var c=0; c < chunks.length; c++) { var split = chunks[c].split('=', 2); obj[split[0]] = split[1]; } return obj; } 

编辑：添加decodeURIComponent（）

Answer 8

有一个称为YouAreI.js的轻量级库，已经过testing，使其变得非常简单。

 YouAreI = require('YouAreI') uri = new YouAreI('http://user:[e-mail]:3000/a/b/c?d=dad&e=1&f=12.3#fragment'); uri.query_get() => { d: 'dad', e: '1', f: '12.3' } 

Answer 9

首先需要定义什么是获取VAR：

 function getVar() { this.length = 0; this.keys = []; this.push = function(key, value) { if(key=="") key = this.length++; this[key] = value; this.keys.push(key); return this[key]; } } 

比刚刚读过的：

 function urlElement() { var thisPrototype = window.location; for(var prototypeI in thisPrototype) this[prototypeI] = thisPrototype[prototypeI]; this.Variables = new getVar(); if(!this.search) return this; var variables = this.search.replace(/\?/g,'').split('&'); for(var varI=0; varI<variables.length; varI++) { var nameval = variables[varI].split('='); var name = nameval[0].replace(/\]/g,'').split('['); var pVariable = this.Variables; for(var nameI=0;nameI<name.length;nameI++) { if(name.length-1==nameI) pVariable.push(name[nameI],nameval[1]); else var pVariable = (typeof pVariable[name[nameI]] != 'object')? pVariable.push(name[nameI],new getVar()) : pVariable[name[nameI]]; } } } 

并使用像：

 var mlocation = new urlElement(); mlocation = mlocation.Variables; for(var key=0;key<mlocation.keys.length;key++) { console.log(key); console.log(mlocation[mlocation.keys[key]]; } 

Answer 10

以下是我使用的一个：

 var params = {}; window.location.search.substring(1).split('&').forEach(function(pair) { pair = pair.split('='); if (pair[1] !== undefined) { var key = decodeURIComponent(pair[0]), val = decodeURIComponent(pair[1]), val = val ? val.replace(/\++/g,' ').trim() : ''; if (key.length === 0) { return; } if (params[key] === undefined) { params[key] = val; } else { if ("function" !== typeof params[key].push) { params[key] = [params[key]]; } params[key].push(val); } } }); console.log(params); 

基本用法，例如。
?a=aa&b=bb
Object {a: "aa", b: "bb"}

重复的参数，例如。
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}

丢失的键，例如。
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}

缺less值，例如。
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}

上面的JSON /正则expression式解决scheme在这个古怪的URL上抛出一个语法错误：
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}

Answer 11

 //under ES6 const getUrlParamAsObject = (url = window.location.href) => { let searchParams = url.split('?')[1]; const result = {}; //in case the queryString is empty if (searchParams!==undefined) { const paramParts = searchParams.split('&'); for(let part of paramParts) { let paramValuePair = part.split('='); //exclude the case when the param has no value if(paramValuePair.length===2) { result[paramValuePair[0]] = decodeURIComponent(paramValuePair[1]); } } } return result; } 

Answer 12

使用ES6，URL API和URLSearchParams API。

 function objectifyQueryString(url) { let _url = new URL(url); let _params = new URLSearchParams(_url.search); let query = Array.from(_params.keys()).reduce((sum, value)=>{ return Object.assign({[value]: _params.get(value)}, sum); }, {}); return query; } 

Answer 13

这似乎是最好的解决scheme，因为它考虑了多个同名的参数。

  function paramsToJSON(str) { var pairs = str.split('&'); var result = {}; pairs.forEach(function(pair) { pair = pair.split('='); var name = pair[0] var value = pair[1] if( name.length ) if (result[name] !== undefined) { if (!result[name].push) { result[name] = [result[name]]; } result[name].push(value || ''); } else { result[name] = value || ''; } }); return( result ); } <a href="index.html?x=1&x=2&x=3&y=blah">something</a> paramsToJSON("x=1&x=2&x=3&y=blah"); console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON 

我后来决定把它转换成一个jQuery插件…

 $.fn.serializeURLParams = function() { var result = {}; if( !this.is("a") || this.attr("href").indexOf("?") == -1 ) return( result ); var pairs = this.attr("href").split("?")[1].split('&'); pairs.forEach(function(pair) { pair = pair.split('='); var name = decodeURI(pair[0]) var value = decodeURI(pair[1]) if( name.length ) if (result[name] !== undefined) { if (!result[name].push) { result[name] = [result[name]]; } result[name].push(value || ''); } else { result[name] = value || ''; } }); return( result ) } <a href="index.html?x=1&x=2&x=3&y=blah">something</a> $("a").serializeURLParams(); console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON 

现在，第一个将只接受参数，但jQuery插件将采取整个url，并返回序列化的参数。

Answer 14

我还需要在URL的查询部分处理+ （ decodeURIComponent不 ），所以我调整了沃尔夫冈的代码：

 var search = location.search.substring(1); search = search?JSON.parse('{"' + search.replace(/\+/g, ' ').replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value)}):{}; 

在我的情况下，我使用jQuery来获取URL准备好的表单参数，然后这个技巧来构build一个对象，然后我可以很容易地更新对象上的参数并重build查询URL，例如：

 var objForm = JSON.parse('{"' + $myForm.serialize().replace(/\+/g, ' ').replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value)}); objForm.anyParam += stringToAddToTheParam; var serializedForm = $.param(objForm); 

Answer 15

这里是我的快速和肮脏的版本，基本上它分割由'＆'分隔的数组元素的URL参数，然后遍历该数组添加由'='分隔的键/值对到一个对象。 我正在使用decodeURIComponent（）将编码的字符转换为正常的string等效（所以％20变成空格，％26变成'＆'等）：

 function deparam(paramStr) { let paramArr = paramStr.split('&'); let paramObj = {}; paramArr.forEach(e=>{ let param = e.split('='); paramObj[param[0]] = decodeURIComponent(param[1]); }); return paramObj; } 

例：

 deparam('abc=foo&def=%5Basf%5D&xyz=5') 

回报

 { abc: "foo" def:"[asf]" xyz :"5" } 

唯一的问题是，xyz是一个string，而不是一个数字（由于使用decodeURIComponent（）），但除此之外，它不是一个坏的起点。

Answer 16

使用phpjs

 function parse_str(str, array) { // discuss at: http://phpjs.org/functions/parse_str/ // original by: Cagri Ekin // improved by: Michael White (http://getsprink.com) // improved by: Jack // improved by: Brett Zamir (http://brett-zamir.me) // bugfixed by: Onno Marsman // bugfixed by: Brett Zamir (http://brett-zamir.me) // bugfixed by: stag019 // bugfixed by: Brett Zamir (http://brett-zamir.me) // bugfixed by: MIO_KODUKI (http://mio-koduki.blogspot.com/) // reimplemented by: stag019 // input by: Dreamer // input by: Zaide (http://zaidesthings.com/) // input by: David Pesta (http://davidpesta.com/) // input by: jeicquest // note: When no argument is specified, will put variables in global scope. // note: When a particular argument has been passed, and the returned value is different parse_str of PHP. For example, a=b=c&d====c // test: skip // example 1: var arr = {}; // example 1: parse_str('first=foo&second=bar', arr); // example 1: $result = arr // returns 1: { first: 'foo', second: 'bar' } // example 2: var arr = {}; // example 2: parse_str('str_a=Jack+and+Jill+didn%27t+see+the+well.', arr); // example 2: $result = arr // returns 2: { str_a: "Jack and Jill didn't see the well." } // example 3: var abc = {3:'a'}; // example 3: parse_str('abc[a][b]["c"]=def&abc[q]=t+5'); // returns 3: {"3":"a","a":{"b":{"c":"def"}},"q":"t 5"} var strArr = String(str) .replace(/^&/, '') .replace(/&$/, '') .split('&'), sal = strArr.length, i, j, ct, p, lastObj, obj, lastIter, undef, chr, tmp, key, value, postLeftBracketPos, keys, keysLen, fixStr = function(str) { return decodeURIComponent(str.replace(/\+/g, '%20')); }; if (!array) { array = this.window; } for (i = 0; i < sal; i++) { tmp = strArr[i].split('='); key = fixStr(tmp[0]); value = (tmp.length < 2) ? '' : fixStr(tmp[1]); while (key.charAt(0) === ' ') { key = key.slice(1); } if (key.indexOf('\x00') > -1) { key = key.slice(0, key.indexOf('\x00')); } if (key && key.charAt(0) !== '[') { keys = []; postLeftBracketPos = 0; for (j = 0; j < key.length; j++) { if (key.charAt(j) === '[' && !postLeftBracketPos) { postLeftBracketPos = j + 1; } else if (key.charAt(j) === ']') { if (postLeftBracketPos) { if (!keys.length) { keys.push(key.slice(0, postLeftBracketPos - 1)); } keys.push(key.substr(postLeftBracketPos, j - postLeftBracketPos)); postLeftBracketPos = 0; if (key.charAt(j + 1) !== '[') { break; } } } } if (!keys.length) { keys = [key]; } for (j = 0; j < keys[0].length; j++) { chr = keys[0].charAt(j); if (chr === ' ' || chr === '.' || chr === '[') { keys[0] = keys[0].substr(0, j) + '_' + keys[0].substr(j + 1); } if (chr === '[') { break; } } obj = array; for (j = 0, keysLen = keys.length; j < keysLen; j++) { key = keys[j].replace(/^['"]/, '') .replace(/['"]$/, ''); lastIter = j !== keys.length - 1; lastObj = obj; if ((key !== '' && key !== ' ') || j === 0) { if (obj[key] === undef) { obj[key] = {}; } obj = obj[key]; } else { // To insert new dimension ct = -1; for (p in obj) { if (obj.hasOwnProperty(p)) { if (+p > ct && p.match(/^\d+$/g)) { ct = +p; } } } key = ct + 1; } } lastObj[key] = value; } } } 

Answer 17

到目前为止，我所发现的解决scheme并不能涵盖更复杂的情况。

我需要转换一个查询string

https://random.url.com?Target=Offer&Method=findAll&filters%5Bhas_goals_enabled%5D%5BTRUE%5D=1&filters%5Bstatus%5D=active&fields%5B%5D=id&fields%5B%5D=name&fields%5B%5D=default_goal_name

成像一个对象：

{“Target”：“Offer”，“Method”：“findAll”，“fields”：[“id”，“name”，“default_goal_name”]，“filters”：{“has_goals_enabled”：{“TRUE” 1“}，”status“：”active“}}

要么：

https://random.url.com?Target=Report&Method=getStats&fields%5B%5D=Offer.name&fields%5B%5D=Advertiser.company&fields%5B%5D=Stat.clicks&fields%5B%5D=Stat.conversions&fields%5B% 5D = Stat.cpa＆字段％5B％5D = Stat.payout＆字段％5B％5D = Stat.date＆字段％5B％5D = Stat.offer_id＆字段％5B％5D = Affiliate.company＆组％5B％5D = Stat.offer_id＆组％5B％5D = Stat.date＆滤波器％5BStat.affiliate_id％5D％5Bconditional％5D = EQUAL_TO＆滤波器％5BStat.affiliate_id％5D％5Bvalues％5D = 1831＆极限= 9999

INTO：

{“Target”：“Report”，“Method”：“getStats”，“fields”：[“Offer.name”，“Advertiser.company”，“Stat.clicks”，“Stat.conversions”，“Stat.cpa “，”Stat.payout“，”Stat.date“，”Stat.offer_id“，”Affiliate.company“]，”groups“：[”Stat.offer_id“，”Stat.date“]，”limit“：” 9999“，”filters“：{”Stat.affiliate_id“：{”conditional“：”EQUAL_TO“，”values“：”1831“}}}

我编译并将多个解决scheme编译成实际工作的解决scheme：

码：

 var getParamsAsObject = function (query) { query = query.substring(query.indexOf('?') + 1); var re = /([^&=]+)=?([^&]*)/g; var decodeRE = /\+/g; var decode = function (str) { return decodeURIComponent(str.replace(decodeRE, " ")); }; 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; } var assign = function (obj, keyPath, value) { var lastKeyIndex = keyPath.length - 1; for (var i = 0; i < lastKeyIndex; ++i) { var key = keyPath[i]; if (!(key in obj)) obj[key] = {} obj = obj[key]; } obj[keyPath[lastKeyIndex]] = value; } for (var prop in params) { var structure = prop.split('['); if (structure.length > 1) { var levels = []; structure.forEach(function (item, i) { var key = item.replace(/[?[\]\\ ]/g, ''); levels.push(key); }); assign(params, levels, params[prop]); delete(params[prop]); } } return params; };