Web mredkj.com

JavaScript Number Format - Add Commas

Add separators (e.g. commas) to a number

Public Domain

addCommas and addSeparatorsNF are released to the public domain. See Terms & Conditions for details. The content on this page is still copyrighted.

Add Commas

JavaScript

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

Overview

Change a number such as 1000 into a string 1,000. Pass the value as a string, and it will preserve zeros.

Examples

addCommas(1000)
// 1,000

addCommas(1231.897243)
// 1,231.897243

addCommas('9999999.00')
// 9,999,999.00

addCommas(-500000.99)
// -500,000.99 

Other separators

JavaScript

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;
}

Overview

addSeparatorsNF is part my comprehensive NumberFormat script, but if you only need separator formatting, then you can use the function by itself. It does not require the NumberFormat script.

Not every formatting style is the same. e.g. 1000 may be formatted as 1,000 or 1.000
So addSeparatorsNF gives you the ability to specify the input decimal character, the output decimal character, and the output separator character.

Arguments

To use addSeparatorsNF, you need to pass it the following arguments:
nStr: The number to be formatted, as a string or number. No validation is done, so don't input a formatted number. If inD is something other than a period, then nStr must be passed in as a string.
inD: The decimal character for the input, such as '.' for the number 100.2
outD: The decimal character for the output, such as ',' for the number 100,2
sep: The separator character for the output, such as ',' for the number 1,000.2

Examples

addSeparatorsNF(43211234.56, '.', '.', ',')
// 43,211,234.56

addSeparatorsNF('52093423.003', '.', ',', '.')
// 52.093.423,003

addSeparatorsNF('93432,8', ',', '.', ',')>
// 93,432.8

addSeparatorsNF('584,567890', ',', '.', ',')
// 584.567890 

addSeparatorsNF(-1.23e8, '.', '.', ',')
// -123,000,000

Explanation

Code Explanation

The code starts off dividing the string into two parts (nStr and nStrEnd) if there is a decimal. A regular expression is used on nStr to add the commas. Then nStrEnd is added back. If the string didn't have nStrEnd temporarily removed, then the regular expression would format 10.0004 as 10.0,004

Regular Expression Explanation

\d+ in combination with \d{3} will match a group of 3 numbers preceded by any amount of numbers. This tricks the search into replacing from right to left.

*

Elsewhere I've seen similar functions (links open in new window):
experts-exchange.com
rgagnon.com