Format Numbers With Commas In JavaScript | #! code [Link]
com/blog/format-numbers-commas-javascript
User Menu
Code Tips, Snippets, Resources, Tutorials And
Help
Home (/) > Blogs (/blog) > philipnorton42's blog (/blog/philipnorton42) > Format
Category Numbers With Commas In JavaScript
Book Reviews
(/blog/category
/book-reviews)
Format Numbers With
CSS (/blog
/category/css)
Commas In JavaScript
Git (/blog
/category/git)
PhoneGap (/blog Thursday, July 31, 2008 - 10:18
/category I found a good function that details how to format numbers with commas in JavaScript
/phonegap) ([Link] and thought I would reproduce it here. It
Python (/blog basically takes any number and turns it into formatted string with the thousands
/category/python) separated by commas. The number_format() function is available in PHP and I have
DOS/Windows been relying on PHP to sort out the formatting before returning it via an AJAX call. I
(/blog/category can now include this function into my JavaScript library and do this on the client side.
/doswindows)
The function works by using regular expressions to first split the string into whole
Flex/Flash (/blog
number and decimal, before splitting the number by groups of three digits.
/category/flexflash)
HTML/XHTML (/blog The regular expression used is (\d+)(\d{3}), which looks for a sequence of three
/category/htmlxhtml) numbers preceded by any numbers. This is a little trick that causes the regular
Vagrant (/blog expression engine to work from right to left, instead of left to right.
/category/vagrant) 1 function addCommas(nStr){
General (/blog 2 nStr += '';
/category/general) 3 var x = [Link]('.');
Regular 4 var x1 = x[0];
5 var x2 = [Link] > 1 ? '.' + x[1] : '';
Expressions (/blog
6 var rgx = /(\d+)(\d{3})/;
/category/regular- 7 while ([Link](x1)) {
expressions) 8 x1 = [Link](rgx, '$1' + ',' + '$2');
SQL (/category 9 }
/categories/sql) 10 return x1 + x2;
11 }
MySQL (/blog
/category This causes a comma to be added to every third numeric character. So for the number
/mysql) 123456 the string 123,456 is returned. Here are some more examples.
PostgreSQL
(/blog/category
1 of 4 12/22/2016 11:14 AM
Format Numbers With Commas In JavaScript | #! code [Link]
/postgresql) 1 addCommas(1000); // 1,000
MS SQL (/blog 2 addCommas(12345); // 12,345
3 addCommas(1234567890); // 1,234,567,890
/category
4 addCommas(12345.1234); // 12,345.1234
/ms-sql)
Apache (/blog The site also details the creation of formatted numbers with the inclusion of different
/category/apache) parameters. This means that instead of using a comma to separate block of three
WordPress (/blog numbers you can use anything.
/category 1 function addSeparatorsNF(nStr, inD, outD, sep){
/wordpress) 2 nStr += '';
PHP (/blog 3 var dpos = [Link](inD);
/category/php) 4 var nStrEnd = '';
5 if (dpos != -1) {
Phing (/blog
6 nStrEnd = outD + [Link](dpos + 1, [Link]);
/category/phing)
7 nStr = [Link](0, dpos);
PHP Arrays 8 }
(/blog/category 9 var rgx = /(\d+)(\d{3})/;
/php-arrays) 10 while ([Link](nStr)) {
PHP Questions 11 nStr = [Link](rgx, '$1' + sep + '$2');
12 }
(/blog/category
13 return nStr + nStrEnd;
/php-questions) 14 }
PHP Websites
(/blog/category This function was created because not every number is formatted in the same way.
/php-websites) For example, the number 1234 might be formatted as 1,234 or even 1.234.
PHP Strings The function takes the following arguments
(/blog/category
/php-strings) nStr : This is the number to be formatted. This might be a number or a string. No
Zend validation is done on this input.
Framework inD : This is the decimal character for the string. This is usually a dot but might be
(/blog/category something else.
/zend- outD : This is what to change the decimal character into.
framework) sep : This is the separator, which is usually a comma.
Websites (/blog The function takes the input string and splits it into two parts based on the decimal
/category/websites) point character. The same regular expression is used on the string before the decimal
JavaScript (/blog point as in the previous function, the major difference is that the separator is taken
/category from the function arguments.
/javascript)
Here are a few examples.
JavaScript
Strings (/blog 1 alert(addSeparatorsNF(1234567890,'.','.',',')); // 1,234,567,890
/category 2 alert(addSeparatorsNF(12345.1234,'.','POINT','COMMA')); // 12COMMA345
3 alert(addSeparatorsNF(12345.1234,'5','POINT','COMMA')); // 1COMMA234P
/javascript-
4 alert(addSeparatorsNF('1234,56',',','.',',')); // 1,234.56
strings)
OpenLayers Category:
(/blog/category JavaScript (/blog/category/javascript)
/openlayers) Tags:
JavaScript (/category/tags/javascript)
JavaScript
number (/category/tags/number)
Websites (/blog format (/category/tags/format)
/category commas (/category/tags/commas)
/javascript- thousands (/category/tags/thousands)
websites)
MooTools (/blog
Philip Norton
(/users/philipnorton42)
/category Phil is the founder and administrator of #!
code and is an IT professional working in
2 of 4 12/22/2016 11:14 AM
Format Numbers With Commas In JavaScript | #! code [Link]
/mootools) the North West of the UK.
[Link] Google+ ([Link] | Twitter
(/blog/category ([Link]
/scriptaculous)
JQuery (/blog
/category Like 1 Tweet
/jquery)
Drupal (/blog
/category/drupal)
Drupal 8 (/blog
Comments
/category Submitted by Collin Stocks (not verified) on Tue, 11/25/2014 - 23:58 Permalink
/drupal-8) (/comment/58221#comment-58221)
SimpleTest
(/blog/category You are inadvertently using globals x, x1, and x2. Use "var" before each is initialized.
/simpletest)
reply (/comment/reply/217/58221)
OSX (/blog
/category/osx)
Linux/Unix (/blog Submitted by philipnorton42 (/users
/category/linuxunix) (/users/philipnorton42) /philipnorton42) on Wed, 11/26/2014 - 10:20
Ansible (/blog Permalink (/comment/58222#comment-58222)
/category/ansible)
Thanks! Sorted it :)
reply (/comment/reply/217/58222)
Recent
blog Submitted by InCode (not verified) on Sun, 10/30/2016 - 16:11 Permalink (/comment
/58469#comment-58469)
posts Thank You, this helped a lot!
Drupal 7:
reply (/comment/reply/217/58469)
Update Field
Definitions For
Lists (/blog
/drupal-
7-update-field-
definitions-lists)
Add new comment
PHPNW 2016 Your name
(/blog
/phpnw-2016)
DrupalCon
Dublin 2016 E-mail
(/blog
/drupalcon-
The content of this field is kept private and will not be shown publicly.
dublin-2016)
Drupal 7: Homepage
Redirect Users
From
Unpublished
Content (/blog Comment *
/drupal-
7-redirect-
3 of 4 12/22/2016 11:14 AM
Format Numbers With Commas In JavaScript | #! code [Link]
users-
unpublished-
content)
Drupal 8:
Detecting An
Anonymous
User (/blog
More information about text formats (/filter/tips)
/drupal-
8-detecting- You can enable syntax highlighting of source code with the following tags:
anonymous-user) <pre> , <code> , <blockcode> , <c> , <cpp> , <drupal5> , <drupal6> ,
Drupal 8: Get <java> , <javascript> , <php> , <python> , <ruby> . The supported tag
The Current styles are: <foo> , [foo] .
Language (/blog Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul>
/drupal-8-get- <ol> <li> <dl> <dt> <dd> <pre> <code>
current- Lines and paragraphs break automatically.
language)
Drupal 8: Save
Include A Twig
Template (/blog
/drupal-
8-include-
twig-template)
DrupalCamp
London 2016: A
Review (/blog
/drupalcamp-
london-
2016-review)
More (/blog)
© 2016 #! code Twitter ([Link] Colophon
/hashbangcode) ([Link]
Facebook /colophon)
([Link] Privacy Policy
/hashbangcode) ([Link]
Google+ ([Link] /privacy-policy)
/101844906324618028459/posts) Terms and License
Github ([Link] ([Link]
/hashbangcode) /license)
RSS
([Link]
/hashbangcode)
4 of 4 12/22/2016 11:14 AM