将URL参数转换为JavaScript对象

Question

我有一个像这样的字符串:

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,'":"') + '"}')

例

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

• decodeURI:abc = foo&def = [asf]&xyz = 5
• 逃避报价:相同,因为没有报价
• 替换&: abc=foo","def=[asf]","xyz=5
• 替换=: abc":"foo","def":"[asf]","xyz":"5
• 用curlies和引号表示: {"abc":"foo","def":"[asf]","xyz":"5"}

这是合法的JSON.

一种改进的解决方案允许在搜索字符串多个字符.它使用reviver函数进行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,"\":\"")) + '"}')

Answer 2

2018年ES6/7/8和方法

从ES6开始,Javascript提供了几种结构,以便为此问题创建一个高性能的解决方案.

这包括使用URLSearchParams和迭代器

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

如果您的用例要求您实际将其转换为对象,则可以实现以下功能:

function paramsToObject(entries) {
  let result = {}
  for(let entry of entries) { // each 'entry' is a [key, value] tupple
    const [key, value] = entry;
    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"}

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

Answer 3

拆分&以获取名称/值对,然后拆分每对=.这是一个例子:

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的"搜索并不替换".

Answer 4

ES6一线。干净简单。

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

这location.search是一个类似的查询字符串"abc=foo&def=%5Basf%5D&xyz=5"。

如果您不想使用fromEntries：

[...new URLSearchParams(location.search)].reduce((acc,[k,v])=>({...acc,[k]:v}),{})

Answer 5

这是简单版本,显然你想要添加一些错误检查:

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

Answer 6

简洁的解决方案:

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

Answer 7

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

Answer 8

到目前为止我找到的建议解决方案并未涵盖更复杂的情况.

我需要转换一个查询字符串,如

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

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

我将多个解决方案编译并调整为实际可行的解决方案:

码:

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

Answer 9

基于最新标准的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()迭代器,因此创建更兼容的解决方案应该很容易.

Answer 10

对于 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

Answer 11

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

Answer 12

我有同样的问题,在这里尝试了解决方案,但它们都没有真正起作用,因为我在URL参数中有数组,如下所示:

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

所以我最终编写了自己的JS函数,它在URI中的param中创建了一个数组:

/**
 * 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 13

使用URLSearchParamsJavaScript 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());

##有用的链接

• URLSearchParams - Web API | URLSearchParams MDN
• 使用 URLSearchParams 轻松操作 URL | 网页 | 谷歌开发者

注意：IE 不支持

Answer 14

2019单线方法

对于您的具体情况：

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

对于更常见的情况，有人想将查询参数解析为一个对象：

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

如果您无法使用Object.fromEntries，这也将起作用：

Array.from(new URLSearchParams(window.location.search)).reduce((o, i) => ({ ...o, [i[0]]: i[1] }), {});

Answer 15

使用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 16

ES6一线（如果看到长线，我们可以这样称呼）

[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})

Answer 17

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

Answer 18

内置原生 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);