小开

这是一个简单的版本，显然你需要添加一些错误检查:

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

小开

我发现.String.deparam美元是最完整的预构建解决方案(可以做嵌套对象等)。检查文档。

小开

在&上拆分以获得名称/值对，然后在=上拆分每个对。这里有一个例子:

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;
}, {});

另一种方法，使用正则表达式:

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

这是改编自John Resig的“搜索而不替换”。

小开

据我所知，没有原生的解决方案。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()

小开

最佳答案

在2021年…请认为这是过时的。

编辑

这个编辑改进并解释了基于评论的答案。

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

例子

解析abc=foo&def=%5Basf%5D&xyz=5分为五个步骤:

decodeURI: abc = foo& def = (asf), xyz = 5
转义引号:相同，因为没有引号
替换&: abc=foo","def=[asf]","xyz=5
Replace =: abc":"foo","def":"[asf]","xyz":"5
用卷曲线和引号括起来:{"abc":"foo","def":"[asf]","xyz":"5"}

这是合法的JSON。

改进的解决方案允许在搜索字符串中包含更多字符。它使用了一个恢复函数来进行URI解码:

var search = location.search.substring(1);
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,"\":\"")) + '"}')

小开

首先你需要定义什么是get变量:

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]];
}
}
}

并使用like:

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]];
}

小开

我也遇到了同样的问题，尝试了这里的解决方案，但没有一个真正有效，因为我在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;
}

小开

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

    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并返回序列化的参数。

小开

下面是我用的一个例子:

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"}

缺少值，例如
?a=aa&b=bb&c Object {a: "aa", b: "bb"} 上面的JSON/regex解决方案在这个古怪的url上抛出一个语法错误 ?a=aa&b=bb&c=&=dd&e Object {a: "aa", b: "bb", c: ""}

小开

有一个名为YouAreI.js的轻量级库已经过测试，它使这非常容易。

YouAreI = require('YouAreI')
uri = new YouAreI('http://user:pass@www.example.com:3000/a/b/c?d=dad&e=1&f=12.3#fragment');


uri.query_get() => { d: 'dad', e: '1', f: '12.3' }

小开

另一种基于URLSearchParams (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()))
: {};
}

请注意，这个解决方案是利用

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 ()迭代器。

小开

我还需要在URL (decodeURIComponent不)的查询部分处理+，所以我改编了Wolfgang的代码成为:

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准备好的表单参数，然后这个技巧来构建一个对象，然后我可以轻松地更新对象上的参数并重新构建查询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);

小开

到目前为止，我发现的建议解决方案并没有涵盖更复杂的场景。

我需要像这样转换查询字符串

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&fields%5B%5D=Stat.payout&fields%5B%5D=Stat.date&fields%5B%5D=Stat.offer_id&fields%5B%5D=Affiliate.company&groups%5B%5D=Stat.offer_id&groups%5B%5D=Stat.date&filters%5BStat.affiliate_id%5D%5Bconditional%5D=EQUAL_TO&filters%5BStat.affiliate_id%5D%5Bvalues%5D=1831&limit=9999

成:

{
"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"
}
}
}

我将多个解决方案编译并调整为一个实际有效的解决方案:

代码:

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;
};

小开

下面是我的快速而粗糙的版本，基本上它将URL参数以'&'分隔为数组元素，然后迭代该数组，将键/值对以'='分隔为对象。我使用decodeURIComponent()将编码字符转换为正常的字符串等效(因此%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是一个字符串而不是一个数字(由于使用decodeURIComponent())，但除此之外，它不是一个坏的起点。

小开

//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;
}

小开

使用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;
}
}
}

小开

使用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;
}

小开

一个简明的解决方案:

location.search
.slice(1)
.split('&')
.map(p => p.split('='))
.reduce((obj, pair) => {
const [key, value] = pair.map(decodeURIComponent);
obj[key] = value;
return obj;
}, {});

小开

在迈克·考泽的回答的基础上，我创建了这个函数，它考虑了具有相同键的多个参数(foo=bar&foo=baz)和逗号分隔的参数(foo=bar,baz,bin)。它还允许您搜索某个查询键。

function getQueryParams(queryKey) {
var queryString = window.location.search;
var query = {};
var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1] || '');
// Se possui uma vírgula no valor, converter em um array
value = (value.indexOf(',') === -1 ? value : value.split(','));


// Se a key já existe, tratar ela como um array
if (query[key]) {
if (query[key].constructor === Array) {
// Array.concat() faz merge se o valor inserido for um array
query[key] = query[key].concat(value);
} else {
// Se não for um array, criar um array contendo o valor anterior e o novo valor
query[key] = [query[key], value];
}
} else {
query[key] = value;
}
}


if (typeof queryKey === 'undefined') {
return query;
} else {
return query[queryKey];
}
}

示例输入: foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3

示例输出

{
foo: ["bar","baz","bez","boz","buz"],
bar: ["1","2","3"]
}

小开

一个班轮。干净简单。

const params = Object.fromEntries(new URLSearchParams(location.search));

对于您的具体情况，它将是:

const str = 'abc=foo&def=%5Basf%5D&xyz=5';
const params = Object.fromEntries(new URLSearchParams(str));
console.log(params);

小开

使用URLSearchParams JavaScript Web API非常简单，

var paramsString = "abc=foo&def=%5Basf%5D&xyz=5";


//returns an iterator object
var searchParams = new URLSearchParams(paramsString);


//Usage
for (let p of searchParams) {
console.log(p);
}


//Get the query strings
console.log(searchParams.toString());


//You can also pass in objects


var paramsObject = {abc:"forum",def:"%5Basf%5D",xyz:"5"}


//returns an iterator object
var searchParams = new URLSearchParams(paramsObject);


//Usage
for (let p of searchParams) {
console.log(p);
}


//Get the query strings
console.log(searchParams.toString());

# #的有用链接

请注意: IE不支持

小开

2022 ES6/7/8，进近

从ES6开始，Javascript提供了几个构造来为这个问题创建一个性能解决方案。

这包括使用URLSearchParams和迭代器

let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"

如果你的用例需要你实际将其转换为对象，你可以实现以下函数:

function paramsToObject(entries) {
const result = {}
for(const [key, value] of entries) { // each 'entry' is a [key, value] tupple
result[key] = value;
}
return result;
}

基本的演示

const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const entries = urlParams.entries(); //returns an iterator of decoded [key,value] tuples
const params = paramsToObject(entries); //{abc:"foo",def:"[asf]",xyz:"5"}

使用Object.fromEntries和spread

我们可以使用Object.fromEntries，用Object.fromEntries(entries)替换paramsToObject。

要遍历的值对是列表名称-值对
. Key是名称，value是值

由于URLParams返回一个可迭代的对象，因此使用传播算子而不是调用.entries也将根据其规范生成条目:

const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}

注意:所有值都是根据URLSearchParams规范自动生成的字符串

多个相同的键

正如@siipe指出的那样，包含多个相同键值的字符串将被强制转换为最后一个可用值:foo=first_value&foo=second_value本质上将变成:{foo: "second_value"}。

根据这个答案:https://stackoverflow.com/a/1746566/1194694，没有规范来决定用它做什么，每个框架可以有不同的行为。

一个常见的用例是将两个相同的值连接到一个数组中，使输出对象变成:

{foo: ["first_value", "second_value"]}

这可以通过以下代码实现:

const groupParamsByKey = (params) => [...params.entries()].reduce((acc, tuple) => {
// getting the key and value from each tuple
const [key, val] = tuple;
if(acc.hasOwnProperty(key)) {
// if the current key is already an array, we'll add the value to it
if(Array.isArray(acc[key])) {
acc[key] = [...acc[key], val]
} else {
// if it's not an array, but contains a value, we'll convert it into an array
// and add the current value to it
acc[key] = [acc[key], val];
}
} else {
// plain assignment if no special case is present
acc[key] = val;
}


return acc;
}, {});


const params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5&def=dude');
const output = groupParamsByKey(params) // {abc: "foo", def: ["[asf]", "dude"], xyz: 5}

小开

ES6一行(如果我们可以这样称呼它，看到长行)

<代码>[…新URLSearchParams (location.search) .entries())。Reduce ((prev， [key,val]) =>{prev[key] = val;返回prev}， {}) < /代码>

小开

如果你正在使用URI.js，你可以使用:

https://medialize.github.io/URI.js/docs.html#static-parseQuery

var result = URI.parseQuery("?foo=bar&hello=world&hello=mars&bam=&yup");
result === {
foo: "bar",
hello: ["world", "mars"],
bam: "",
yup: null
};

小开

对于Node JS，你可以使用Node JS API querystring:

const querystring = require('querystring');


querystring.parse('abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar');
// returns the object

文档:https://nodejs.org/api/querystring.html

小开

2022年一线方法

一般情况下，你想要解析查询参数到一个对象:

Object.fromEntries(new URLSearchParams(location.search));

针对您的具体情况:

Object.fromEntries(new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5'));

小开

console.log(decodeURI('abc=foo&def=%5Basf%5D&xyz=5')
.split('&')
.reduce((result, current) => {
const [key, value] = current.split('=');


result[key] = value;


return result
}, {}))

小开

如果你需要递归，你可以使用微小的js-extension-ling库。

npm i js-extension-ling

const jsx = require("js-extension-ling");


console.log(jsx.queryStringToObject("a=1"));
console.log(jsx.queryStringToObject("a=1&a=3"));
console.log(jsx.queryStringToObject("a[]=1"));
console.log(jsx.queryStringToObject("a[]=1&a[]=pomme"));
console.log(jsx.queryStringToObject("a[0]=one&a[1]=five"));
console.log(jsx.queryStringToObject("http://blabla?foo=bar&number=1234"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry&a[1]=five&a[fruits][red][]=cherry&a[fruits][yellow][]=lemon&a[fruits][yellow][688]=banana"));

这将输出如下内容:

{ a: '1' }
{ a: '3' }
{ a: { '0': '1' } }
{ a: { '0': '1', '1': 'pomme' } }
{ a: { '0': 'one', '1': 'five' } }
{ foo: 'bar', number: '1234' }
{
a: { fruits: { red: { '0': 'strawberry' } } }
}
{
a: {
'1': 'five',
fruits: {
red: { '0': 'strawberry', '1': 'cherry' },
yellow: { '0': 'lemon', '688': 'banana' }
}
}
}

注意:它基于loctus parse_str函数(https://locutus.io/php/strings/parse_str/)。

小开

最简单的方法之一是使用URLSearchParam接口。

下面是工作代码片段:

let paramObj={},
querystring=window.location.search,
searchParams = new URLSearchParams(querystring);


//*** :loop to add key and values to the param object.
searchParams.forEach(function(value, key) {
paramObj[key] = value;
});

小开

一个简单的答案是内置本地Node模块。(没有第三方npm模块)

querystring模块提供了解析和格式化URL查询字符串的实用程序。可以使用以下方法访问:

const querystring = require('querystring');


const body = "abc=foo&def=%5Basf%5D&xyz=5"
const parseJSON = querystring.parse(body);
console.log(parseJSON);

小开

/**
* Parses and builds Object of URL query string.
* @param {string} query The URL query string.
* @return {!Object<string, string>}
*/
function parseQueryString(query) {
if (!query) {
return {};
}
return (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
const item = param.split('=');
const key = decodeURIComponent(item[0] || '');
const value = decodeURIComponent(item[1] || '');
if (key) {
params[key] = value;
}
return params;
}, {});
}


console.log(parseQueryString('?v=MFa9pvnVe0w&ku=user&from=89&aw=1'))

see log

小开

下面是更精简的silicakes”方法版本。

下面的函数可以解析来自USVString或Location的查询字符串。

/**
* Returns a plain object representation of a URLSearchParams object.
* @param {USVString} search - A URL querystring
* @return {Object} a key-value pair object from a URL querystring
*/
const parseSearch = (search) =>
[...new URLSearchParams(search).entries()]
.reduce((acc, [key, val]) => ({
...acc,
// eslint-disable-next-line no-nested-ternary
[key]: Object.prototype.hasOwnProperty.call(acc, key)
? Array.isArray(acc[key])
? [...acc[key], val]
: [acc[key], val]
: val
}), {});


/**
* Returns a plain object representation of a URLSearchParams object.
* @param {Location} location - Either a document or window location, or React useLocation()
* @return {Object} a key-value pair object from a URL querystring
*/
const parseLocationSearch = (location) => parseSearch(location.search);


console.log(parseSearch('?foo=bar&x=y&ids=%5B1%2C2%2C3%5D&ids=%5B4%2C5%2C6%5D'));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Here is a one-liner of the code above (125 bytes):

Where f is parseSearch

f=s=>[...new URLSearchParams(s).entries()].reduce((a,[k,v])=>({...a,[k]:a[k]?Array.isArray(a[k])?[...a[k],v]:[a[k],v]:v}),{})

编辑

下面是一个序列化和更新的方法:

const parseSearch = (search) =>
[...new URLSearchParams(search).entries()]
.reduce((acc, [key, val]) => ({
...acc,
// eslint-disable-next-line no-nested-ternary
[key]: Object.prototype.hasOwnProperty.call(acc, key)
? Array.isArray(acc[key])
? [...acc[key], val]
: [acc[key], val]
: val
}), {});


const toQueryString = (params) =>
`?${Object.entries(params)
.flatMap(([key, values]) =>
Array.isArray(values)
? values.map(value => [key, value])
: [[key, values]])
.map(pair => pair.map(val => encodeURIComponent(val)).join('='))
.join('&')}`;


const updateQueryString = (search, update) =>
(parsed =>
toQueryString(update instanceof Function
? update(parsed)
: { ...parsed, ...update }))
(parseSearch(search));


const queryString = '?foo=bar&x=y&ids=%5B1%2C2%2C3%5D&ids=%5B4%2C5%2C6%5D';
const parsedQuery = parseSearch(queryString);
console.log(parsedQuery);
console.log(toQueryString(parsedQuery) === queryString);


const updatedQuerySimple = updateQueryString(queryString, {
foo: 'baz',
x: 'z',
});
console.log(updatedQuerySimple);
console.log(parseSearch(updatedQuerySimple));


const updatedQuery = updateQueryString(updatedQuerySimple, parsed => ({
...parsed,
ids: [
...parsed.ids,
JSON.stringify([7,8,9])
]
}));
console.log(updatedQuery);
console.log(parseSearch(updatedQuery));

.as-console-wrapper { top: 0; max-height: 100% !important; }

小开

ES6有一个非常简单而不正确的答案:

console.log(
Object.fromEntries(new URLSearchParams(`abc=foo&def=%5Basf%5D&xyz=5`))
);

但是这一行代码不包括多个相同的键，你必须使用更复杂的东西:

function parseParams(params) {
const output = [];
const searchParams = new URLSearchParams(params);


// Set will return only unique keys()
new Set([...searchParams.keys()])
.forEach(key => {
output[key] = searchParams.getAll(key).length > 1 ?
searchParams.getAll(key) : // get multiple values
searchParams.get(key); // get single value
});


return output;
}


console.log(
parseParams('abc=foo&cars=Ford&cars=BMW&cars=Skoda&cars=Mercedes')
)

代码将生成如下结构:

[
abc: "foo"
cars: ["Ford", "BMW", "Skoda", "Mercedes"]
]

小开

许多其他的解决方案没有考虑到边界情况。

这个可以处理

空键a=1&b=2&
空值a=1&b
空值a=1&b=
未编码的等号a=1&b=2=3=4

  decodeQueryString: qs => {
// expects qs to not have a ?
// return if empty qs
if (qs === '') return {};
return qs.split('&').reduce((acc, pair) => {
// skip no param at all a=1&b=2&
if (pair.length === 0) return acc;
const parts = pair.split('=');
// fix params without value
if (parts.length === 1) parts[1] = '';
// for value handle multiple unencoded = signs
const key = decodeURIComponent(parts[0]);
const value = decodeURIComponent(parts.slice(1).join('='));
acc[key] = value;
return acc;
}, {});
},

如何将URL参数转换为JavaScript对象?