将查询字符串反序列化为 JSON 对象答案

【问题标题】：Deserialize query string to JSON object将查询字符串反序列化为 JSON 对象
【发布时间】：2012-07-18 10:36:30
【问题描述】：

试图找到如何从?...&foo=bar&... 制作{foo:"bar"}，但谷歌搜索并只找到了jQuery.params，这恰恰相反。请有任何建议（内置 javascript 函数、jQuery、Underscore.js - 一切顺利）？或者，我是否需要自己实现（不是很麻烦，只是尽量不要重新发明轮子）？

【问题讨论】：

好吧，你去：stackoverflow.com/questions/901115/…。稍加搜索总是有帮助的。
@ggozad：搜索转换为 JSON/对象，而不仅仅是获取值。感谢您的链接！遗憾的是，这个函数在 jQuery 左右的某个地方并不是标准的。

标签： javascript jquery underscore.js

【解决方案1】：

实际上@talsibony 的上述回答并未考虑查询字符串数组（例如test=1&test=2&test=3&check=wow&such=doge）。这是我的实现：

function queryStringToJSON(qs) {
    qs = qs || location.search.slice(1);

    var pairs = qs.split('&');
    var result = {};
    pairs.forEach(function(p) {
        var pair = p.split('=');
        var key = pair[0];
        var value = decodeURIComponent(pair[1] || '');

        if( result[key] ) {
            if( Object.prototype.toString.call( result[key] ) === '[object Array]' ) {
                result[key].push( value );
            } else {
                result[key] = [ result[key], value ];
            }
        } else {
            result[key] = value;
        }
    });

    return JSON.parse(JSON.stringify(result));
};

【讨论】：

很好的答案，谢谢。我喜欢它从多个选择复选框中创建数组。
很好的答案，但我认为 if (key !== "") 在你的 if 语句之上会更好
如果 & 有值，那么它不起作用。有什么解决办法吗？ test=1&test=2&2&test=3&check=wow&such=doge

【解决方案2】：

我在这里发布我的函数，以防万一其他人看到并且想要直接获得它，而不需要 jquery 原生 JS。因为一直在找同样的东西，看了别人的回答后终于做了这个功能：

function queryStringToJSON(queryString) {
  if(queryString.indexOf('?') > -1){
    queryString = queryString.split('?')[1];
  }
  var pairs = queryString.split('&');
  var result = {};
  pairs.forEach(function(pair) {
    pair = pair.split('=');
    result[pair[0]] = decodeURIComponent(pair[1] || '');
  });
  return result;
}


console.log(queryStringToJSON(window.location.href)); 
console.log(queryStringToJSON('test=1&check=wow'));//Object {test: "1", check: "wow"}

【讨论】：

如果 & 有值，那么它不起作用。有什么解决办法吗？ test=1&test=2&2&test=3&check=wow&such=doge
如果它在那里，我认为它需要像下面这样编码：queryStringToJSON('test6=1&test3=2%262&test1=3&check=wow&such=doge')

【解决方案3】：

您有 Ben Alman 的 jQuery BBQ 和 jQuery.deparam。它被描述为The opposite of jQuery.param, pretty much.

http://benalman.com/code/projects/jquery-bbq/examples/deparam/

第一个例子正是你需要的。

【讨论】：

【解决方案4】：

在现代浏览器中，您还可以使用Object.fromEntries，这会更容易。

function queryStringToObject(queryString) {
  const pairs = queryString.substring(1).split('&');
  // → ["foo=bar", "baz=buzz"]

  var array = pairs.map((el) => {
    const parts = el.split('=');
    return parts;
  });
  // → [["foo", "bar"], ["baz", "buzz"]]

  return Object.fromEntries(array);
  // → { "foo": "bar", "baz": "buzz" }
}

console.log(queryStringToObject('?foo=bar&baz=buzz'));

URLSearchParams interface 可以与浏览器的 URL 搜索参数交互。 URLSearchParams 的浏览器支持相当不错。

你的情况是：

console.log(
  Object.fromEntries(new URLSearchParams('foo=bar&baz=buzz'))
);

【讨论】：

【解决方案5】：

对于简单而扁平的查询字符串，这样的事情就可以解决问题

const queryStringToObject = (queryString) => {
  let obj = {}
  if(queryString) {
    queryString.slice(1).split('&').map((item) => {
      const [ k, v ] = item.split('=')
      v ? obj[k] = v : null
    })
  }
  return obj
}

> queryStringToObject('?foo=bar&baz=buzz')
{ foo: 'bar', baz: 'buzz' }

【讨论】：

删除data=thisisatestdata等查询字符串的第一个字符
如果您包含问号，您希望删除对slice 的调用，或者考虑扩展该方法以支持两种字符串类型
如果查询字符串中有空值，那么它只是从对象中删除键，它应该是空字符串。

【解决方案6】：

URLSearchParams() 构造函数创建并返回一个新的URLSearchParams 对象。

var url = new URL('https://example.com?foo=1&bar=2'); 
var params = new URLSearchParams(url.search);

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

【讨论】：

【解决方案7】：

我知道这个帖子有点老了——但这对我有用——希望它也能帮助其他人..

var _searchModel = yourquerystring.split("&");
for (var x = 0; x < _searchModel.length; x++) {
  //break each set into key and value pair
  var _kv = _searchModel[x].split("=");

  //console.log(_kv);

  var _fieldID = _kv[0];
  var _fieldVal = _kv[1];
}

【讨论】：

片段现在按预期工作，它有错误ReferenceError: yourquerystring is not defined