javascript - 在 Javascript 中使用正则表达式返回 URL 参数值

Question

当我寻找返回 url 参数值的方法时，我遇到了这段代码。

引用:https://html-online.com/articles/get-url-parameters-javascript/

function getUrlParts(href) {
    var partsSet = {};
    var parts = href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(a,key,value) {
        partsSet[key] = value;
    });
    return partsSet;
}

我设法使用这段代码来实现我想做的事情，但我不明白它。我尝试在各种正则表达式实用程序网站上打出该正则表达式位，但是 没有运气。我也不明白“，函数(a，key，value)”这部分。请解释一下这段代码如何返回 url 参数值。

Answer 1

⚠️ 您的问题的答案如下，但请注意，在 2019 年您可能不应该使用此代码。请参阅我的答案末尾以获得更好的解决方案。 ⚠️

Regexper很好地演示了这个正则表达式将匹配什么:

在英语中，您可以将其读作:

1. 一个或多个 ? 或 & 字符，后跟
2. 第 1 组:一个或多个不是 = 或 & 的字符，后跟
3. =，后跟
4. 组 #2:零个或多个非 & 的字符

第 1 组捕获参数名称，第 2 组捕获它们的值。

至于传递给replace的回调函数(function(a,key,value) { ...)，我们问问MDN:

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. … Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

The arguments to the function are as follows:

• match – The matched substring.
• p1, p2, ... – The nth string found by a parenthesized capture group, provided the first argument to replace() was a RegExp object.
• …

(Source: MDN: String.prototype.replace – Specifying a function as a parameter)

(我省略了其余部分，因为它与我们的问题无关。)

这告诉我们，该函数会针对每个匹配项(即字符串中的每个参数名称-值对)调用，并且第二个参数(p1 或 key )保存由组 #1 捕获的字符串，第三个参数 (p2/value) 保存由组 #2 捕获的字符串。

您发现的代码确实使用了 replace 来实现其副作用:这是一种迭代字符串中所有匹配项的非常简单的方法。

<小时/>

更好的方法

正如您链接到的博客文章中所述，如果您的目标是当前浏览器，则不应手动解析查询字符串，您应该使用 URLSearchParams ，正是为了这个目的:

const query = '?foo=1&bar=2';

const searchParams = new URLSearchParams(query);

// Get a specific param
const foo = searchParams.get('foo');
console.log('got foo:', foo);

// Iterate over all params
searchParams.forEach((val, key) => console.log(key, 'is', val));

URLSearchParams 适用于 all modern browsers ，包括 MS Edge ≥ 17(但不包括 IE)。也存在polyfills适用于较旧的浏览器。