Javascript依次获取具有查询字符串参数的查询字符串参数值答案

【问题标题】：Javascript get query string parameter values that has query string parameter in turnJavascript依次获取具有查询字符串参数的查询字符串参数值
【发布时间】：2018-08-20 21:17:06
【问题描述】：

我的正则表达式很差，所以希望在这里得到一些帮助。我有一个带有查询字符串参数的 url。该参数又是一个 url，它本身具有 qs 参数。例如：我的网址类似于

http://myurl.com/somepage?ref=/en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true

现在，当我使用任何函数来提取整个查询字符串参数时，我以某种方式只得到第一个。

我期待的是：：/en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true

但我得到的是： /en-us/products-overview/find-product/home/kitchen/2980?source=google

请注意，缺少其他两个参数（isadvertisement 和organic）。

我的功能是

function getUrlParameter(name) {
    var url = 'http://myurl.com/somepage?ref=/en-us/products-overview/find-product/home/kitchen/2980?source=google&isadvertisement=false&organic=true';
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(url);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

JsFiddlehere:

我尝试了来自 SO 的其他链接来提取 QS 参数。他们似乎都没有处理这种情况

【问题讨论】：

除了ref之外还有其他参数可以包含吗？
可能有..不是我们添加的..但有可能..
一个可能的解决方案：(new URL(url)).search.substr(5)
最简单的解决方法是对您的 ref 值进行编码。类似：jsfiddle.net/vwcj7dx6 - 如果/当您决定添加其他参数时，这也将解决任何混淆。
@Jack 漂亮而简单的解决方案。如果您可以将其写为答案，我会标记它..非常感谢。一直以来，我一直在尝试修复正则表达式，但您解决了问题:)

标签： javascript jquery query-string

【解决方案1】：

您的网址中的和号被视为顶级参数分隔符。如果它们本身是参数的一部分，则需要对其进行转义。您的转义 url 看起来像 http://myurl.com/somepage?ref=%2Fen-us%2Fproducts-overview%2Ffind-product%2Fhome%2Fkitchen%2F2980%3Fsource%3Dgoogle%26isadvertisement%3Dfalse%26organic%3Dtrue。如何对 url 进行编码取决于它的来源。 JS提供了encodeURIComponent()函数。

然后您可以使用decodeURIComponent() 将其解码回预期的网址。问题来自嵌套查询参数。

一般来说，要获取查询参数，使用URL 的内置解决方案可能类似于：

var url=new URL('...');
for (var e of url.searchParams.entries()){
    console.log(e);
}

【讨论】：