Javascript number formatting anomoly

Question

I have a quirky problem formatting a number in JavaScript. I've borrowed a couple of functions from various sources on the web. Each works well except in one instance. Here is the executing code at the time of the error:

lth=appl.length+3;
var table = $("#unitsCompleted")[0];
var sum=0;
for(i=0; i<temp.length; i++){
    sum += Number(table.rows[lth].cells[i+1].innerHTML);
}
var t=formatNumber(sum);            
$("#mtf_retail").html("$ "+t);

The identical code is used in a couple other places. In fact was simply copied. Below is the formatting function:

function formatNumber(num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

It works fine except on the total 1787.78. In the image you can see that it perfectly formatted the total 1,249.69

Yes that works in Brave, and presumably in Chrome. But in FF I get this: "SyntaxError: invalid regexp group". Not familiar with the FF consolem however it points to techSummary.js 1:3. Well I know where techSummary is, but I don't know what 1:3 refers to. I'm used to getting back a line number in Chrome. — jazcam
– jazcam, Commented May 1, 2020 at 0:14
1:3 means "line 1, column 3", aka "3rd character on first line" — Johannes H.
– Johannes H., Commented May 1, 2020 at 0:21
Thanks, Johannes H. If I take FF literally then, it's the "n" in function, i.e. "function makeReport(sdate,edate) {". I tried a couple of remedies having to to with the placement of a caret in the expression, which indeed did eliminate the error, but also torpedoed the point of the function, which is to format the number. — jazcam
– jazcam, Commented May 2, 2020 at 17:02
Sorry, just read this. But if FF is complaining about the regexp, the line:column numbers might refer to the positions within the regexp - which would be the \ of \d, which would hint that FF does not know \d. I can, however, hardly imagine that. SO it's more likely that it is the , in $1,, and FF is parsing 1, as the name of the capture group, which is indeed invalid. — Johannes H.
– Johannes H., Commented May 4, 2020 at 23:55

Johannes H. · Accepted Answer · 2020-05-01 00:11:18Z

the g flag on your regexp tells the regexp engine to match the pattern multiple times and replace every instance. Since your number isn't 1787.78, but 1787.7800000000002, the pattern will match after every number in front of 3 successive digits, and a comma will be placed afterwards.

To avoid this, but still have the regular expression match multiple times on long numbers, there is two ways:

adjust the regular expression so it will not match anything with a period before it (but since this requires lookbehinds it's rather expensive and ugly and I wouldn't recommend it)
round the number to 2 decimal places

This should work:

function formatNumber(num) {
    return num.toFixed(2).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

Very good. FF doesn't like the regex. See comment above. But as far as Chrome or Brave, or other Chromium variants are concerned, check if off.

Collectives™ on Stack Overflow

Javascript number formatting anomoly

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related