正则表达式将几个 URL 模式与 Javascript 匹配

Question

I'm trying to match any of several URL patterns in Javascript. The patterns are:

• The home page - the / without anything after.
• One of three solutions pages. Each solutions(number) could be followed by a / and any characters after.
  • /solutions/99043 or /solutions/99043/blah
  • /solutions/60009 or /solutions/60009/blah
  • /solutions/40117 or /solutions/40117/blah
• Search: /search followed by any characters after, eg ?blah .

The RegEx I tried is as follows:

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

In this function:

(function () {
    const urlPath = window.location.pathname;
    if (urlPath.match(/\/$|\/solutions\/(99043|60009|40117)\/.*|\/search.*/)) {
        console.log("urlPath", urlPath);
    }
})()

It doesn't work in that everything seems to be matched. Anyone have any ideas where I went wrong?

Based on a comment, an example of a URL that matches but shouldn't: /solutions/

Answer 1

If you are extracting the pathname from URL and then performing the matching, I would recommend to use ^\/$ instead of just matching “ends with slash”.

So that would be ^\/$|\/solutions\/(99043|60009|40117)\/.*|\/search.*

You can test it on regex101.com. I've found regulex to be really helpful for visualizing regular expressions.

Answer 2

You could of anchors to assert that start ^ and the end $ of the string.

Match / and optionally match either the part with solutions followed by the 3 numbers or match the search part using an alternation .

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

• ^ Start of string
• \/ Match /
• (?: Non capturing group
  • solutions\/ Match solutions/
  • (?:99043|60009|40117) Match 1 of the 3 numbers
  • (?:\/.*)? Optionally match / and any char except a newline 0+ times
  • | Or
  • search\b.* Match search followed by a word boundary to not match for example searchhere
• )? Close non capturing group and make it optional
• $ End of string

Regex demo

Answer 3

You can use the following regular expression:

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

Test:

 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

So, this regular expression prevents from the following bugs:

• Prevents testing sub-string rather then a full pathname:

/bug/solutions/99043 // false

• Prevents testing just a part of solutions numbers:

/solutions/990430000 // false

/solutions/000099043 // false

Answer 4

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

https://regex101.com/r/nqtB4v/2