Question

我的问题是关于强大的解决方案，该解决方案仅用于使用普通浏览器的Javascript解析任何复杂的URI参数。像PHP一样，可以实现JS和PHP源代码之间的简单代码兼容性。

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

1。 StackOverflow上有很多常见的问题和答案，请参见How can I get query string values in JavaScript?

对于常见的SIMPLE案例，您可以找到非常简单的解决方案。例如，像这样处理标量参数：

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

它没有处理复杂查询参数的答案。（据我所见，答案包含源代码和作者注释）

2。另外，您可以在现代浏览器中使用URL对象，请参见https://developer.mozilla.org/en-US/docs/Web/API/URL或恰好https://developer.mozilla.org/en-US/docs/Web/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'
}

首选答案只是简单易懂的javascript来源。小型且用途广泛的库也可以接受，但是这个问题与它们无关。

`

PS： 首先，我只是发布自己的当前解决方案以解析URI参数，反之亦然，以从参数中生成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-Part。

在结果侧，必须对查询字符串参数进行非字符串化。

示例：

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

如何像PHP一样在本机JavaScript中获得复杂的URI查询字符串参数？

2 个答案: