使用 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('/')) // trueconsole.log(2, regex.test('/solutions')) // trueconsole.log(3, regex.test('/solutions/')) // trueconsole.log(4, regex.test('/solutions/99043')) // trueconsole.log(5, regex.test('/solutions/99043/')) // trueconsole.log(6, regex.test('/solutions/99043/anything')) // trueconsole.log(7, regex.test('/solutions/60009')) // trueconsole.log(8, regex.test('/solutions/60009/')) // trueconsole.log(9, regex.test('/solutions/60009/anything')) // trueconsole.log(10, regex.test('/solutions/40117')) // trueconsole.log(11, regex.test('/solutions/40117/')) // trueconsole.log(12, regex.test('/solutions/40117/anything')) // trueconsole.log(13, regex.test('/solutions/00000')) // falseconsole.log(14, regex.test('/solutions/00000/')) // falseconsole.log(15, regex.test('/solutions/00000/anything')) // falseconsole.log(16, regex.test('/bug')) // falseconsole.log(17, regex.test('/search?query=javascript')) // trueconsole.log(18, regex.test('/search/?query=javascript')) // true因此，此正则表达式可防止以下错误：防止测试子字符串而不是完整路径名：/bug/solutions/99043 // 错误的阻止测试只是解决方案编号的一部分：/solutions/990430000 // 错误的/solutions/000099043 // 错误的