6
Apr

Thousand Separator in JavaScript

   Posted by: Grumelo   in javascript

How to render such a number -9,521,654.35 in JavaScript ?

Requirements

  • Number can be negative
  • Number can have or not decimals
  • Decimal can have more than 3 digits
  • Separator may change in different countriesbut is optional
  • Decimal Separator may change in different countries but is optional
  • Solution must be JSLint certified (because that the right way of coding)
  • Solution should not alter existing prototype (because this really not a good idea)
  • Solution must be cross browser compatible

The solution

A simple function base on RegExp, here it is:

/*
* AddThousandSeparator (NUMBER n, STRING thousandSeparator, STRING decimalSeparator) STRING
* or
* AddThousandSeparator (String n, STRING thousandSeparator, STRING decimalSeparator) STRING
*
* Convert a number to the format xxx,xxx,xxx.xxxx
* Accepts integers, floating point or string
*
* Does not accept exponential notation, etc.
*
* n – the number to be formatted
* thousandSeparator – the separator character. if skipped, “,” is used
* decimalSeparator – the separator character. if skipped, “.” is used
*/


function AddThousandSeparator(str, thousandSeparator, decimalSeparator) {
var sRegExp = new RegExp('(-?[0-9]+)([0-9]{3})'),
sValue = str + "", // to be sure we are dealing with a string
arrNum = [];

if (thousandSeparator === undefined) {thousandSeparator = ","; }
if (decimalSeparator === undefined) {decimalSeparator = "."; }

arrNum = sValue.split(decimalSeparator);
// let's be focused first only on the integer part
sValue = arrNum[0];

while(sRegExp.test(sValue)) {
sValue = sValue.replace(sRegExp, '$1' + thousandSeparator + '$2');
}

// time to add back the decimal part
if (arrNum.length > 1) {
sValue = sValue + decimalSeparator + arrNum[1];
}
return sValue;
}

Examples

AddThousandSeparator(5000) => 5,000
AddThousandSeparator(-5000000) => -5,000,000
AddThousandSeparator(5000000.125) => 5,000,000.125
AddThousandSeparator(5000000.125,’\”) => 5’000’000.125
AddThousandSeparator(1234345.345545) => 1,234,345.345545
AddThousandSeparator(“123456789,12345″,’\”,”,”) => 123’456’789,12345
AddThousandSeparator(-123456789.123456789) => -123,456,789.12345679

Other solutions

There are many other kind of solution based on Math.foor, split of string, etc
These solutions are heavier than the RegExp solution and require much more lines of codes.

References

Evaluation: Pas terribleAssez bienBienSuper!Excellent! (2 votes)
Loading...

Tags: , , , , ,

This entry was posted on Monday, April 6th, 2009 at 15:35 and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 comments so far

 1 

Hi!

Thanks for this code, I’m using it curerntly and it works fine :).

The only tring I changed is: sValue=n+”; to sValue=n+””;

January 24th, 2010 at 21:07
Stuart
 2 

As far as I can see, it does not work if there are more than 3 decimal places in the number when using German European format.
1234345.345545 is converted to
1.234.345,345.545

November 30th, 2010 at 16:43
Gaurav
 3 

Here goes the modified working version :

function AddThousandSeparator(str, thousandSeparator, decimalSeparator) {
var sRegExp = new RegExp(‘(-?[0-9]+)([0-9]{3})’), sValue = str + ”;
if (thousandSeparator === undefined) { thousandSeparator = ‘,’; }
while (sRegExp.test(sValue)) {
sValue = sValue.replace(sRegExp, ‘$1’ + thousandSeparator + ‘$2’);
}
var arrNum = sValue.split(decimalSeparator);
if (arrNum.length > 1) {
sValue = arrNum[0] + decimalSeparator + RemoveThousandSeparator(arrNum[1], thousandSeparator);
}
return sValue;
}

// Function to remove thousand separator from string
function RemoveThousandSeparator(str, sep) {
return str.replace(new RegExp(sep, “g”), ”);
}

July 5th, 2012 at 12:20
 4 

Instead of removing the separator on the decimal part it’s clever to not add it at all.

I have update the function thanks to your comments.

Thanks guys.

July 5th, 2012 at 14:46
stian
 5 

Nice function!

July 14th, 2012 at 22:27
Javed Siddiqui
 6 

How to call this function onkeyup event.

September 11th, 2012 at 12:39
 7 

<input type=”text” onkeyup=”this.value = AddThousandSeparator(this.value)” />

I don’t think calling it on onkeyup is a good practice

September 17th, 2012 at 11:27
article. knowledge
 8 

I’m really inspired along with your writing skills and also with the structure to your weblog. Is that this a paid subject matter or did you customize it yourself? Anyway stay up the nice high quality writing, it’s uncommon to peer a nice weblog like this one nowadays.
.

June 28th, 2013 at 14:11
Mehdi Rizvandi
 9 

Thanks, your solution works perfectly.

November 12th, 2013 at 18:50

One Trackback/Ping

  1. Javascript: Inserting Thousand Separators | Webdesgin    Aug 04 2010 / 1pm:

    […] came across this very simple function base on RegExp. Source 0 1 2 3 4 5 6 7 8 9 function thousandSeparator(n,sep) { var sRegExp = new […]

Leave a reply

Name (*)
Mail (will not be published) (*)
URI
Comment