Format Numbers With Commas In JavaScript

I found a good function that details how to format numbers with commas in JavaScript and thought I would reproduce it here. It basically takes any number and turns it into formatted string with the thousands separated by commas. The number_format() function is available in PHP and I have been relying on PHP to sort out the formatting before returning it via an AJAX call. I can now include this function into my JavaScript library and do this on the client side.

The function works by using regular expressions to first split the string into whole number and decimal, before splitting the number by groups of three digits.

The regular expression used is (\d+)(\d{3}), which looks for a sequence of three numbers preceded by any numbers. This is a little trick that causes the regular expression engine to work from right to left, instead of left to right.

function addCommas(nStr){
 nStr += '';
 var x = nStr.split('.');
 var x1 = x[0];
 var x2 = x.length > 1 ? '.' + x[1] : '';
 var rgx = /(\d+)(\d{3})/;
 while (rgx.test(x1)) {
  x1 = x1.replace(rgx, '$1' + ',' + '$2');
 }
 return x1 + x2;
}

This causes a comma to be added to every third numeric character. So for the number 123456 the string 123,456 is returned. Here are some more examples.

addCommas(1000); // 1,000
addCommas(12345); // 12,345
addCommas(1234567890); // 1,234,567,890
addCommas(12345.1234); // 12,345.1234

The site also details the creation of formatted numbers with the inclusion of different parameters. This means that instead of using a comma to separate block of three numbers you can use anything.

function addSeparatorsNF(nStr, inD, outD, sep){
 nStr += '';
 var dpos = nStr.indexOf(inD);
 var nStrEnd = '';
 if (dpos != -1) {
  nStrEnd = outD + nStr.substring(dpos + 1, nStr.length);
  nStr = nStr.substring(0, dpos);
 }
 var rgx = /(\d+)(\d{3})/;
 while (rgx.test(nStr)) {
  nStr = nStr.replace(rgx, '$1' + sep + '$2');
 }
 return nStr + nStrEnd;
}

This function was created because not every number is formatted in the same way. For example, the number 1234 might be formatted as 1,234 or even 1.234.

The function takes the following arguments

• nStr : This is the number to be formatted. This might be a number or a string. No validation is done on this input.
• inD : This is the decimal character for the string. This is usually a dot but might be something else.
• outD : This is what to change the decimal character into.
• sep : This is the separator, which is usually a comma.

The function takes the input string and splits it into two parts based on the decimal point character. The same regular expression is used on the string before the decimal point as in the previous function, the major difference is that the separator is taken from the function arguments.

Here are a few examples.

alert(addSeparatorsNF(1234567890,'.','.',',')); // 1,234,567,890
alert(addSeparatorsNF(12345.1234,'.','POINT','COMMA')); // 12COMMA345POINT1234
alert(addSeparatorsNF(12345.1234,'5','POINT','COMMA')); // 1COMMA234POINT.1234
alert(addSeparatorsNF('1234,56',',','.',',')); // 1,234.56