在 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;
}

我设法使用此代码来实现我想做的事情，但我不明白。我试图在各种正则表达式实用程序网站上打那个正则表达式位，但是 没有运气。我也不明白 " , function(a,key,value) " 这部分。请解释此代码如何返回 url 参数值。

Answer 1

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

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

在英文中，你可以这样理解：

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

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

至于传递给replace的回调函数（function(a,key,value) { ...），请教MDN：

您可以指定一个函数作为第二个参数。在这种情况下，将在执行匹配后调用该函数。函数的结果（返回值）将用作替换字符串。 … 请注意，如果第一个参数中的正则表达式是全局的，则每个要替换的完全匹配都会多次调用该函数。

函数的参数如下：

• match – 匹配的子字符串。
• p1, p2, ... – 括号中的捕获组找到的第 n 个字符串，前提是 replace() 的第一个参数是 RegExp 对象。
• …

（来源：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 也存在。