使用 Javascript 匹配多个 URL 模式的 RegEx

Question

我正在尝试匹配 Javascript 中的几种 URL 模式中的任何一种。图案是：主页 -/之后没有任何东西。三个解决方案页面之一。每个solutions(number)后面都可以跟 a/和任何字符。/solutions/99043 或者 /solutions/99043/blah/solutions/60009 或者 /solutions/60009/blah/solutions/40117 或者 /solutions/40117/blah搜索：/search后跟任何字符，例如?blah.我试过的正则表达式如下：/\/$|\/solutions\/(99043|60009|40117)\/.*|\/search.*/在这个函数中：(function () {    const urlPath = window.location.pathname;    if (urlPath.match(/\/$|\/solutions\/(99043|60009|40117)\/.*|\/search.*/)) {        console.log("urlPath", urlPath);    }})()它不起作用，因为一切似乎都匹配。任何人都知道我哪里出错了？基于评论，匹配但不应该的 URL 示例： /solutions/

Answer 1

您可以使用锚点来断言字符串的开头^和结尾$。

匹配/并可选择匹配带有后跟 3 个数字的解决方案的部分，或使用交替匹配搜索部分。

^\/(?:solutions\/(?:99043|60009|40117)(?:\/.*)?|search\b.*)?$

• ^ 字符串的开始

• \/ 比赛 /

• (?: 非捕获组

• solutions\/ 比赛 solutions/

• (?:99043|60009|40117) 匹配 3 个数字中的 1 个

• (?:\/.*)?可选匹配/和除换行符以外的任何字符 0+ 次

• | 或者

• search\b.* 匹配搜索后跟一个单词边界以不匹配例如 searchhere

• )? 关闭非捕获组并使其可选

• $ 字符串结束

Answer 2

如果您从 URL 中提取路径名然后执行匹配，我建议您使用^\/$而不是仅匹配“以斜杠结尾”。

所以那将是 ^\/$|\/solutions\/(99043|60009|40117)\/.*|\/search.*

您可以在 regex101.com 上对其进行测试。我发现正则表达式对于可视化正则表达式非常有帮助。

Answer 3

您可以使用以下正则表达式：

^\/((solutions(\/(99043|60009|40117)(\/.*)?)?)|search(.*)?)$

测试：

var regex = /^\/((solutions(\/(99043|60009|40117)?(\/.*)?)?)|search(.*)?)?$/

console.log(1, regex.test('/')) // true

console.log(2, regex.test('/solutions')) // true

console.log(3, regex.test('/solutions/')) // true

console.log(4, regex.test('/solutions/99043')) // true

console.log(5, regex.test('/solutions/99043/')) // true

console.log(6, regex.test('/solutions/99043/anything')) // true

console.log(7, regex.test('/solutions/60009')) // true

console.log(8, regex.test('/solutions/60009/')) // true

console.log(9, regex.test('/solutions/60009/anything')) // true

console.log(10, regex.test('/solutions/40117')) // true

console.log(11, regex.test('/solutions/40117/')) // true

console.log(12, regex.test('/solutions/40117/anything')) // true

console.log(13, regex.test('/solutions/00000')) // false

console.log(14, regex.test('/solutions/00000/')) // false

console.log(15, regex.test('/solutions/00000/anything')) // false

console.log(16, regex.test('/bug')) // false

console.log(17, regex.test('/search?query=javascript')) // true

console.log(18, regex.test('/search/?query=javascript')) // true

因此，此正则表达式可防止以下错误：

防止测试子字符串而不是完整路径名：

/bug/solutions/99043 // 错误的

阻止测试只是解决方案编号的一部分：

/solutions/990430000 // 错误的

/solutions/000099043 // 错误的