我有一个这样的字符串:
abc=foo&def=%5Basf%5D&xyz=5
如何将其转换为这样的JavaScript对象?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
我有一个这样的字符串:
abc=foo&def=%5Basf%5D&xyz=5
如何将其转换为这样的JavaScript对象?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
当前回答
另一种基于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的_. fropairs (https://lodash.com/docs#fromPairs),以便简单。
因为您可以访问searchParams.entries()迭代器,所以创建一个更兼容的解决方案应该很容易。
其他回答
最简单的方法之一是使用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;
});
许多其他的解决方案没有考虑到边界情况。
这个可以处理
空键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;
}, {});
},
在2021年…请认为这是过时的。
Edit
这个编辑改进并解释了基于评论的答案。
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 = xyz (asf) = 5 转义引号:相同,因为没有引号 替换&:abc=foo","def=[asf]","xyz=5 " 5 . Replace =: abc":"foo","def":"[asf]","xyz": Suround卷曲和引用:{“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,"\":\"")) + '"}')
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"]
]
下面是我的快速而粗糙的版本,基本上它将以'&'分隔的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()),但除此之外,它不是一个坏的起点。