Parsing a number with commas with Javascript regex

Question

I'm trying to parse numbers between 1 and 10,000,000 which can be straight digits (e.g. 123456) or with separating commas (1,234,567) between groups of 3 digits. The commas could also be spaces (1 234 567) or periods (1.234.567) but consistently used. I have written the following:

<script type="text/javascript">  
  var re = /(\d{1,3})[ |\,|\.]?(\d{3})(?:[ |\,|\.]?(\d{3}))?/i;
  function testStr(input) {
    var str = input.value;
    var newstr = str.replace(re, '[1]: $1\n[2]: $2\n[3]: $3');
    alert(newstr);
 }  
 </script>

This works well, except that it also parses input such as 1234,567,890 or 1,234,5678 The groups of 4 consecutive digits should not be allowed. Why is this happening? Thanks for any help.

I think it would be easier, and the code would be more readable if you tested against two separate regexes, one with and one without separators. — Joel Cornett
– Joel Cornett, Commented Nov 16, 2018 at 5:45
I don't think this is the job for a regex. Unless you are absolutely certain the number is not mistyped (and you're not), then a regex is a bad choice here. For example, what of the number 1,234.456 789 it has each of the separators but they are not consistent. It does conform to the regex, though. You can write a regular expression to reject that but it's not going to be pretty and easy to maintain, since you'd need a separate branch for each separator. It'd be easier to parse the number and try to find the separators, then see if they conform as part of other validations. — VLAZ
– VLAZ, Commented Nov 16, 2018 at 6:33
As a side note, you can even use a library to do the number parsing for you. That way, you won't have to tear your hair own when you find out about, say, the Indian system of writing numbers where the grouping is not done in only threes or twos but both and a number can look like this 1,00,000,00,00,000 — VLAZ
– VLAZ, Commented Nov 16, 2018 at 6:36

CertainPerformance · Accepted Answer · 2018-11-16 05:47:17Z

1

One option is

^(\d{1,3})(?:([ ,.]?)(\d{3})(?:\2(\d{3}))?)?$

The idea is to capture the separator used (if any - if no separator, then the empty string is captured). Then, later, when at the point where a separator is expected, backreference the same separator that was found before, to ensure that all separators are the same, whether they're spaces, commas, periods, or nothing at all. Also, if you need to parse numbers between 1 and 10,000,000, then you should put everything past the initial (\d{1,3}) in an optional group.

Note that commas and periods do not need to be escaped in a character set, and | in a character set indicates a literal pipe character - just use [ ,.] instead.

Also use ^ and $ anchors to ensure you start at the very beginning of the string and match till the end of the string (forcing the match to fail otherwise).

https://regex101.com/r/2dFk0f/1

(\d{1,3}) - One to three digits, followed by an optional big non-capturing group of

([ ,.]?)(\d{3})(?:\2(\d{3}))?, which is:

([ ,.]?) - Capture the separator used

(\d{3}) - Repeat three digits

(?:\2(\d{3})? - If the number is 1m or greater, a separator is expected, so backreference the separator that was captured before, followed by three more digits. (If the number is less than 1m, then this optional group won't match)

answered Nov 16, 2018 at 5:47

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

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

6 Comments

VLAZ Over a year ago

The backreference works but what if you have to also support a delimiter for decimal fractions? The $1,000,000.50 can be read as one million dollars and 50 cents" while another culture could express this as $1 000 000,50` or $1.000.000,50. You'd be able to back reference the separators but I don't think you can say "but the decimal delimiter is the same sans the back reference". And then you run into a problem with, say, 3.500 - did somebody type three and a half with an extra zero or three hundred and fifty? I know it's not a requirement by OP but I fear it's only not yet.

CertainPerformance Over a year ago

Indeed, if you add decimals, it gets a whole lot more convoluted, especially since periods can be thousands-separators too

Leo Over a year ago

I think that the issue of the separators is distracting us from the real issue, so let's simplify my question by allowing only commas and making them mandatory to make it even simpler. So if I write /(\d{1,3}),(\d{3})[,(\d{3})]?/i; the problem still remains that it will parse groups of four digits, such as with 1,234,3456. How can I parse 1,234,567 but not 1,234,5678?

CertainPerformance Over a year ago

@Leo The answer does address that - see regex101.com/r/2dFk0f/2 (same regex, just with your string above added to the input text). The idea is to, if the number is more than 3 digits long, require the final 3-digit string to be preceded by a separator (if there are any separators at all)

CertainPerformance Over a year ago

@Leo Two reasons: one is that you're lacking the start-of-line and end-of-line anchors, as said in the answer (so, for example, the string 1,234,5678 passes because 1,234,567 matches the RE). The other is that you need to backreference the first separator found wherever a separator is expected, otherwise, for example, in 1234,567, there's no separator between the 1 and the 2 (allowed if input was 1234567), and there's a , between the 4 and 5 (allowed if input was 1,234,567), but you need the backreference to enforce consistency (see answer). regex101.com/r/2dFk0f/3

|

Collectives™ on Stack Overflow

Parsing a number with commas with Javascript regex

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related