我怎样才能在本地JavaScript复杂的URI查询字符串参数，如在PHP？(How can I g

我的问题是关于使用解析只是正常的浏览器的JavaScript任何复杂的URI参数全面的电源解决方案 。不管你喜欢做的PHP，JS为和PHP源之间简单的代码兼容性。

但首先，让我们看到了一些特定的已知的决定：

1.有流行的问题，在计算器上的答案，看我如何在JavaScript中获取查询字符串值？

你可以找到有共同简单的情况下很简单的解决方案。例如，像处理这种标参数，像这样的：

https://example.com/?name=Jonathan&age=18

它具有处理复杂查询参数没有答案。（至于我能看到带源代码和作者的评论答案）

2.还您可以在现代浏览器中使用URL对象，见https://developer.mozilla.org/en-US/docs/Web/API/URL ，或正好https://developer.mozilla.org/en-美国/文档/网络/ API / URL / searchParams

它是足够多强大，你不需要写或加载任何代码解析URI参数 - 只需使用

var params = (new URL(document.location)).searchParams;
var name = params.get("name"); // is the string "Jonathan"
var age = parseInt(params.get("age")); // is the number 18

这种方法具有这样的缺点，即URL仅可在大多数的现代浏览器， - 其他浏览器或浏览器的过期版本将失败。

所以，我需要什么。我需要在分析任何复杂的URI参数 ，可以像

https://example.com/?a=edit&u[name]=Jonathan&u[age]=18&area[]=1&area[]=20&u[own][]=car&u[own][]=bike&u[funname]=O%27Neel%20mc%20Fly&empty=&nulparam&the%20message=Hello%20World

至

{
    'a': 'edit',
    'u': {
        'name': 'Jonathan',
        'age': '18',
        'own': ['car', 'bike'],
        'funname': 'O\'Neel mc Fly'
    },
    'area': [1, 20],
    'empty': '',
    'nulparam': null,
    'the message': 'Hello World'
}

Preferrable回答，只是普通的可读的JavaScript源。简单小宽所使用的库也可以接受，但这个问题不是他们。

PS：要开始我只是发表我自己目前的解决方案解析URI PARAMS反之亦然从PARAMS使URI。它的任何意见都欢迎。

希望这有助于以后节省时间，很多程序员的。

Answer 1:

我的解决办法

用法：

var params = getQueryParams(location.search);
var params = getQueryParams();

var params = {...};
var path = '...';
var url = path;
var urlSearch = getQueryString(params);
if (urlSearch) {
    url += '?' + urlSearch;
}
history.replaceState({"autoUrl": url}, "autoreplace", url);

码：

function getQueryParams(qs) {
  if (typeof qs === 'undefined') {
    qs = location.search;
  }

  qs = qs.replace(/\+/g, ' ');

  var params = {},
      tokens,
      re = /[?&]?([^=]+)=([^&]*)/g;

  while (tokens = re.exec(qs)) {
    var name = decodeURIComponent(tokens[1]);
    var value = decodeURIComponent(tokens[2]);
    if (value.length == 0) {
      continue;
    }

    if (name.substr(-2) == '[]') {
      name = name.substr(0, name.length - 2);
      if (typeof params[name] === 'undefined') {
        params[name] = [];
      }
      if (value === '') {
        continue;
      }
      params[name].push(value);
      continue;
    }

    if (name.substr(-1) == ']') {
      var nameParts = name.split('[');
      name = nameParts[0];
      for (var i = 1; i < nameParts.length; i++) {
        nameParts[i] = nameParts[i].substr(0, nameParts[i].length - 1);
      }
      var ptr = params;
      for (var i = 0; i < nameParts.length - 1; i++) {
        name = nameParts[i];
        if (typeof ptr[name] === 'undefined') {
          ptr[name] = {};
        }
        ptr = ptr[name];
      }
      name = nameParts[nameParts.length - 1];
      ptr[name] = value;
      continue;
    }

    params[name] = value;
  }

  return params;
}

function getQueryString(params) {
  var paramsStringParts = [];

  for (var name in params) {
    if (params[name] instanceof Array) {
      paramsStringParts.push( name + '[]=' + params[name].join('&' + name + '[]=') );
    } else if (typeof params[name] === 'object') {

      var makeFlattern = function(obj){
        var result = [];

        if (obj instanceof Array) {
          for (var i = 0; i < obj.length; i++) {
            result.push('[]=' + obj[i]);
          }
          return result;
        }

        for (var i in obj) {
          if (typeof obj[i] === 'object') {
            var subResult = makeFlattern(obj[i]);
            for (var j = 0; j < subResult.length; j++) {
              result.push('[' + i + ']' + subResult[j]);
            }
            continue;
          }
          result.push('[' + i + ']=' + obj[i]);
        }
        return result;
      };

      paramsStringParts.push( name + makeFlattern(params[name]).join('&' + name) );
    } else {
      paramsStringParts.push( name + '=' + params[name] );
    }
  }

  return paramsStringParts.join('&');
}

Answer 2:

有点晚了，但只是在挣扎着同样的问题，解决办法很简单：

使用encodeURIComponent方法（...）为字符串化复杂的对象，其结果然后可以用作普通的queryString-部分。

在结果侧的查询字符串参数必须是未字符串化。

例：

var complex_param_obj = {
value1: 'Wert1',
value2:4711
};
console.log(restored_param_obj);

var complex_param_str = encodeURIComponent(JSON.stringify(complex_param_obj));
console.log(complex_param_str);
var complex_param_url = 'http://test_page.html?complex_param=' + complex_param_str;

//on the result-side you would use something to extract the complex_param-attribute from the URL
//in this test-case:

var restored_param_obj = decodeURIComponent(complex_param_str);
console.log(restored_param_obj);

文章来源: How can I get complex URI query string parameters in native JavaScript like in PHP?