Is there a regex pattern for custom page range validation in javascript and react

Question

I need a regex for page sequences that

matches:

1
1, 4-5
1, 4-5, 8, 11, 13-14

but doesn't match:

1,,,,
1, 4-5-
1, 4--------2233-----,,,,

I have tried the following patterns but they don't work:

/^(\d*-\d*,?|\d*,?)*$/
/^(\d*-{1}\d*,?|\d*,?)*$/

I also want to validate user input while the user types, so the pattern needs to allow tailing - and , in certain cases. The example React code for allowing input with a particular pattern looks like this:

const customPageInputChange = (e) => {
  if(e.target.value.match(/.../) !== null) {
    setCustomPage(e.target.value)
  }
}

See https://jsfiddle.net/mayankshukla5031/4zqwq1fj/ for a full example with input validation.

Did you try regex101.com or a similar explanation and evaluation service for help with creating your regex? — Felix Wunderlich
– Felix Wunderlich, Commented Sep 16, 2021 at 7:52

Felix Wunderlich · Accepted Answer · 2021-09-16 08:30:14Z

2

One possible regex:

^(\d+(-\d+)?, )*\d+(-\d+)?$

See https://regex101.com/r/txVh3e/1 for test cases.

If you also want to check whether the pages are increasing, a regex is not really suitable, and you should opt for checking the strings programmatically.

If you want to validate user input while the user is typing, you need a regex allowing trailing - and ,. One possible regex:

^(\d+(-\d+)?, ?)*(\d+-?\d*)?$

See https://regex101.com/r/rKx6lq/1 for test cases and https://jsfiddle.net/qtb4yd7s/ for a demo.

edited Sep 16, 2021 at 8:30

answered Sep 16, 2021 at 7:59

Felix Wunderlich

1,3871 gold badge15 silver badges30 bronze badges

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

9 Comments

nitin premanand Over a year ago

The above thing works in the regex101 but not in javascript @Felix. Can you provide a solution that works in js and react

nitin premanand Over a year ago

I dont want to check page increasing if this pattern is matched it should allow typing in input field

Felix Wunderlich Over a year ago

See my edit, I added a JavaScript code sample.

nitin premanand Over a year ago

Try here in the pattern and check jsfiddle.net/mayankshukla5031/4zqwq1fj

Felix Wunderlich Over a year ago

What should I check? If you want to check the input while the user types, you obviously need a different regex, which allows trailing , and -.

|

The fourth bird · Accepted Answer · 2021-09-16 08:07:43Z

0

You might use

^\d+(?:-\d+)?(?:,\s*\d+(?:-\d+)?)*$

In Javascript you can use regex.test(str) to return a boolean to see if the pattern matched.

In parts, the pattern matches:

^ Start of string
\d+ Match 1+ digits
(?:-\d+)? Optionally match - and 1+ digits
(?: Non capture group to match as a whole part
- ,\s* Match a comma and optional whitespace chars
- \d+(?:-\d+)? The same as previous pattern
)* Close the non capture group and optionally repeat to als match a single occurrence
$ End of string

See a Regex demo

edited Sep 16, 2021 at 8:07

answered Sep 16, 2021 at 8:01

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

7 Comments

nitin premanand Over a year ago

The above pattern does allow ,(comma) after a number

Felix Wunderlich Over a year ago

@nitinpremanand No, it does not.

nitin premanand Over a year ago

Try here in the pattern and check jsfiddle.net/mayankshukla5031/4zqwq1fj

The fourth bird Over a year ago

@nitinpremanand It does not allow only a training comma regex101.com/r/ypN1xP/1

The fourth bird Over a year ago

@nitinpremanand Use with test if(/^\d+(?:-\d+)?(?:,\s*\d+(?:-\d+)?)*$/.test(e.target.value)) {}

|

Collectives™ on Stack Overflow

Is there a regex pattern for custom page range validation in javascript and react

2 Answers 2

9 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related