一个正则问题

Question

[?&]key(=([^&#]*)|&|#|$)

这段匹配 url 查询参数的正则，后面的 |&|#|$ 是什么意思？我把它去掉也可以匹配成功

来源

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

Answer 1

标签选了这么多。不知道你用的是什么语言。

我说下在JavaScript中正则的|是指或。
也就是说|&|#|$指匹配以&或#结尾（这里的$指结尾）。

推荐一个网址在线正则测试工具 选择JavaScript
规则：

[?&]name(=([^&#]*)|&|#|$)

测试字符串：

http://element-cn.eleme.io/1.4?name=1&name=2$&name=3&name=&name&&name#/zh-CN/guide/design

这样更有体会。
可能会有一些& #结尾的不是常规的URL。

Answer 2

key(=([^&#]*)) 可以匹配 key=1 但不能匹配 key=#123 这种情况. 会错误的把 #123 当做 key 的值

key(=([^&#]*)|&|#|$)就可以处理上述情况.

Answer 3

很简单，按照 URL 的结构，需要查询的 key 在查询字符串中，除去 URL 前面的协议、用户、密码、主机地址、端口外，还剩下查询字符串和片段。

查询字符串的格式以 ? 标志开始，多个查询字符串之间以 & 进行连接。在查询字符串后，可能还有片段部分，片段部分的结构为 #xxx。

下面解释一下这个正则表达式：[?&]key(=([^&#]*)|&|#|$)

对于 URL https://cn.bing.com/search?q=url&qs=n

先判断 key 前面的内容。 key 可能是第一个查询字符串 q，对应 q=url，那么它前面就是查询字符串开始的标志 ?；如果 key 不是第一个查询字符串，是 qs，对应 qs=n，那么它前面必是查询字符串的连接符 &。

而在 key 匹配的值的后面，如果还有连接字符串，如 key 为 q，那么，它的后面是 &；如果已经到了 URL 的结尾，那么它的后面是字符串结尾界定符 $；还有另一种可能，在 URL 中还包含片段部分，如 https://cn.bing.com/search?q=url&qs=n#name1，那么，当 key 是 qs 的时候，它的后面就是 #。

所以，在这个正则表达式中，[?&] 表示 key 之前可能出现的内容，在 key 对应的值的部分，绝不可能出现的字符为 & 和 #，所以匹配时使用 [^&#] 表示匹配 & 和 # 之外的内容，&|#|$ 表示 key 对应的值之后可能出现的内容。

还要注意的是在表示匹配的值的 ([^&#]*) 也在 | 的作用范围内，说明值可有可无，这样可以匹配 https://cn.bing.com/search/q= 这样特殊的 URL，得到 key 对应的值为空。