正则匹配技术咨询：匹配指定路径、避免误匹配及结果异常排查

让我一步步帮你搞定这两个问题：

1. 如何避免匹配带后续路径的字符串 #

你最初用的正则/events\/[A-Za-z0-9]+\/?/没有限定匹配的范围，所以它会在更长的路径里揪出符合条件的子串（比如/events/das873jh/image里的/events/das873jh部分）。要解决这个问题，得用行锚点把正则锁死在整个字符串范围内：

• ^：匹配字符串的开头
• $：匹配字符串的结尾

同时把可选的末尾斜杠写得更简洁，最终的正则可以写成：

/^\/events\/[a-zA-Z0-9]+\/?$/

这个正则会严格匹配/events/xxx或/events/xxx/的完整路径，只要后面多了任何路径片段，都会直接匹配失败。

2. 为何匹配结果会出现多余字符？ #

问题出在你正则里的捕获组(\/)?。当你用String.match()方法时，如果正则包含捕获组，返回的结果是一个数组：

• 数组第一个元素是整个匹配的完整字符串
• 后面的元素是每个捕获组单独匹配到的内容

在你的例子里，当匹配/events/ji893u时，捕获组(\/)?没匹配到任何内容，所以数组第二个元素是undefined。当你直接把这个数组赋值给innerHTML时，JavaScript会把数组转成字符串，元素之间用逗号分隔，就出现了多余的逗号（比如/events/ji893u,）。

解决这个问题有两种简单方法：

• 方法一：改用非捕获组：把捕获组改成(?:\/)?，这样正则不会记录这个组的匹配结果，match()返回的数组就只有完整匹配的字符串：

  /^\/events\/[a-zA-Z0-9]+(?:\/)?$/
  

• 方法二：直接取数组第一个元素：哪怕保留捕获组，你也可以只使用数组的第一个元素（也就是完整匹配的部分）：

  document.getElementById("demo").innerHTML = res[0];
  

修改后的完整代码示例：

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var str = "/events/ji893u";
  var res = str.match(/^\/events\/[a-zA-Z0-9]+\/?$/);
  // 先判断匹配成功再赋值，避免报错
  document.getElementById("demo").innerHTML = res ? res[0] : "No match";
}
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tometoyou