RegEx to match several URL patterns with 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, e.g. ?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/

Could you provide some test cases where there is unintended behaviour? — Bazza Cipher
– Bazza Cipher, Commented Nov 1, 2019 at 0:03

The fourth bird · Accepted Answer · 2019-11-01 09:28:55Z

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

answered Nov 1, 2019 at 9:28

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dylanmac Over a year ago

The ^ start of string causes my RegEx to fail for some reason, but the additional ?: in the solutions or condition fixes the scenario where /solutions/ alone was passing.

The fourth bird Over a year ago

The ^ anchors the pattern to the start of the string and $ to the end. You can remove the anchors in that case.

Gautam · Accepted Answer · 2019-11-01 00:46:01Z

2

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.

answered Nov 1, 2019 at 0:46

Gautam

1089 bronze badges

Comments

Max Mikhalchuk · Accepted Answer · 2019-11-01 01:29:40Z

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

/solutions/ cannot be standalone: it has to be followed by either of the three numbers provided.

Mitchygitchy · Accepted Answer · 2019-11-01 00:30:10Z

0

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

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

answered Nov 1, 2019 at 0:30

Mitchygitchy

16

2 Comments

erik258 Over a year ago

Also matches numbers that start with the given numbers

dylanmac Over a year ago

Points for the simplest answer, except it doesn't handle the / (homepage) scenario.

Collectives™ on Stack Overflow

RegEx to match several URL patterns with Javascript

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related