如何像PHP一样在本机JavaScript中获得复杂的URI查询字符串参数? [英] How can I get complex URI query string parameters in native JavaScript like in PHP?

问题描述

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

My question is about full power solution for parsing ANY complex URI parameters using just normal browser's Javascript. Like it do PHP, for simple code compatibility between JS and PHP sources.

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

But the first, let us see some particular known decisions:

1. 有关StackOverflow的常见问题和解答，请参见如何获取在JavaScript中查询字符串值?

1. There is popular question and answers on StackOverflow, see How can I get query string values in JavaScript?

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

You can find there quite simple solutions for common SIMPLE cases. For example, like handling this scalar parameters like this one:

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

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

It has no answers for handling complex query params. (As far as I could see for answers with source codes and author comments)

2. 另外，您也可以在现代浏览器中使用URL对象，请参见 https://developer.mozilla.org/en-US/docs/Web/API/URL ，或完全

2. Also you may use an URL object in modern browsers, see https://developer.mozilla.org/en-US/docs/Web/API/URL, or exactly https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

它足够强大，您无需编写或加载任何代码来解析URI参数-只需使用

It is enought powerful and you don't need to write or load any code for parsing URI parameters - just use

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仅在大多数现代浏览器中可用，否则其他浏览器或过时的浏览器版本将失败.

This approach has such disadvantage that URL is available only in most of modern browsers, - other browsers or outdated versions of browsers will fail.

所以，我需要什么.我需要解析任何复杂的URI参数，例如

So, what I need. I need parsing any complex URI params, like

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来源.小型且用途广泛的库也可以接受，但是这个问题与它们无关.

Preferrable answer is just plain readable javascript source. Simple and small wide-used library can be accepted too, but this question is not about them.

`

PS: 首先，我只是发布自己的当前解决方案以解析URI参数，反之亦然，即从参数中生成URI.欢迎对此发表任何评论.

PS: To start I just publish my own current solution for parsing URI params and vice versa for making URI from params. Any comments for it are welcome.

希望这有助于为以后的许多编码人员节省时间.

Hope this helps to save time for lot of coders later.

推荐答案

有点晚了，但是由于同样的问题而苦苦挣扎，解决方案非常简单:

A bit late, but just struggled over the same problem, solution was very simple:

对字符串化的复杂对象使用encodeURIComponent(...)，然后将结果用作普通的queryString-Part.

use encodeURIComponent(...) for the stringified complex objects, the result can then be used as normal queryString-Part.

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

In the result-side the query-string-parameters have to be un-stringified.

示例:

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查询字符串参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！