将URL参数转换为JavaScript对象

Question

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

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

如何将其转换为像这样的JavaScript对象？

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

Answer 1

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 = [asf]＆xyz = 5
逃避报价：相同，因为没有报价
替换＆：abc=foo","def=[asf]","xyz=5
替换=：abc":"foo","def":"[asf]","xyz":"5
卷发和引号环绕：qazxsw poi

这是合法的JSON。

改进的解决方案允许搜索字符串中包含更多字符。它使用reviver函数进行URI解码：

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

例

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

Original answer

单行：

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

Answer 2

ES6单线。干净简单。

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

使用ES6，URL API和URLSearchParams API。

var obj = [...new URLSearchParams(location.search).entries()].reduce((sum, [key,val]) => Object.assign({[key]:val}, sum), {});

Answer 4

ES6一个班轮（如果我们可以这样称呼它看长线）

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 5

使用[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {}) JavaScript Web API非常简单，

URLSearchParams

有用的链接

var paramsString = "q=forum&topic=api"; //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 = {q:"forum",topic:"api"} //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 APIs | MDN

注意：IE中不支持

Answer 6

我没有意识到本机解决方案。如果你偶然使用该框架，Dojo有一个内置的反序列化方法。

否则你可以自己实现它而不是简单地：

Easy URL Manipulation with URLSearchParams  |  Web
      | Google Developers

编辑：添加decodeURIComponent（）

Answer 7

有一个名为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; }的轻量级库已经过测试并且非常简单。

YouAreI.js

Answer 8

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

YouAreI = require('YouAreI')
uri = new YouAreI('http://user:[email protected]:3000/a/b/c?d=dad&e=1&f=12.3#fragment');

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

我后来决定将它转换为jQuery插件......

    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插件将获取整个url并返回序列化参数。

Answer 9

这是我使用的一个：

$.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

基本用法，例如。 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

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

Answer 10

这是我的快速和脏版本，基本上它将由'＆'分隔的URL参数拆分为数组元素，然后迭代该数组，将由'='分隔的键/值对添加到对象中。我正在使用decodeURIComponent（）将编码的字符转换为它们的正常字符串等价物（因此％20变为空格，％26变为'＆'等）：

Object {a: "aa", b: "bb", c: ""}

例：

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')

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

Answer 11

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

Answer 12

2019 ES6/7/8 and on approach

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

这包括使用JSON.parse('{"' + decodeURI("abc=foo&def=%5Basf%5D&xyz=5".replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}')和URLSearchParams

iterators

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

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

Basic Demo

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

Using Object.fromEntries and spread

我们可以使用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"}（目前处于第4阶段），用Object.fromEntries取代paramsToObject。

要迭代的值对是列表名称 - 值对，其中键是名称，值是值。

从Object.fromEntries(entries)开始，返回一个URLParams对象，使用iterable而不是调用spread operator也将根据其规范产生条目：

.entries

注意：根据const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5'); const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}，所有值都是自动字符串

Answer 13

使用phpjs

//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 14

如果您使用的是URI.js，则可以使用：

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

Answer 15

对于Node，您可以使用以下内容：

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

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

Answer 16

2019 One-Liner Approach

对于您的具体情况：

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

对于有人想要将查询参数解析为对象的更通用的情况：

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

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

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

Answer 17

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

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

不只是阅读：

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

Answer 18

我还需要在URL的查询部分（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]]; }）处理+，所以我改编了Wolfgang的代码：

decodeURIComponent doesn't

在我的例子中，我使用jQuery来获取支持URL的表单参数，然后使用这个技巧来构建一个对象，然后我可以轻松地更新对象上的参数并重建查询URL，例如：

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

Answer 19

建立在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);之上我已经完成了这个功能，它考虑了具有相同键（Mike Causer's answer）和逗号分隔参数（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

Answer 20

在URLSearchParams spec上拆分以获取名称/值对，然后在&上拆分每一对。这是一个例子：

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

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

这是改编自John Resig的var obj = {}; str.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) { obj[decodeURIComponent(key)] = decodeURIComponent(value); });。

Answer 21

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

"Search and Don’t Replace"

Answer 22

我发现var obj = {}; var pairs = queryString.split('&'); for(i in pairs){ var split = pairs[i].split('='); obj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]); }是最完整的预构建解决方案（可以做嵌套对象等）。看看$.String.deparam。

Answer 23

10
投票

简洁的解决方案：

documentation

Answer 24

另一种基于最新标准的URLSearchParams（location.search .slice(1) .split('&') .map(p => p.split('=')) .reduce((obj, pair) => { const [key, value] = pair.map(decodeURIComponent); return ({ ...obj, [key]: value }) }, {});）的解决方案

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

请注意，此解决方案正在使用

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

为了简单起见，还有lodash的_（frompairs（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from）。

由于您可以访问searchParams.entries（）迭代器，因此创建更兼容的解决方案应该很容易。

Answer 25

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

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

https://lodash.com/docs#fromPairs

进入像这样的对象：

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

INTO：

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

Answer 26

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

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

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

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

将URL参数转换为JavaScript对象

问题描述投票：163回答：26

26个回答

Edit

Original answer

有用的链接

2019 ES6/7/8 and on approach

Basic Demo

Using Object.fromEntries and spread

2019 One-Liner Approach

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

最新问题

将URL参数转换为JavaScript对象

问题描述 投票：163回答：26

26个回答

Edit

Original answer

有用的链接

2019 ES6/7/8 and on approach

Basic Demo

Using Object.fromEntries and spread

2019 One-Liner Approach

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

最新问题

问题描述投票：163回答：26