30

I am wanting to display large numbers more nicely with commas. So if the number was say 123456789, it would display 123,456,789. I have looked around but I only found code that just wouldn't work the way I wanted so I was hoping I could find some help here. Also, I hope it is also dynamic, so the commas will change as the number changes.

The number that I want to affect has the id="value".

That should be all, I don't think I am missing anything. So again I want the number with an id="value" to have commas introduced when it's needed. If you need any more information please let me know!

Cosmicluck
  • 401
  • 1
  • 4
  • 9
  • @michaelpri I just checked that out, and tried using the first comments code and it does not work. I don't understand how to take that and apply it to my code to make it take the right number. – Cosmicluck Jan 04 '15 at 01:54
  • 3
    The question was asked purely in HTML terms. Yet a JavaScript answer has been accepted. The correct answer to the question *as asked* is that you simply need to enter the number in the desired format in HTML. If the question was meant to be about modifying HTML content in JavaScript, it should have been closed as a duplicate. – Jukka K. Korpela Jan 04 '15 at 08:24

3 Answers3

71

You can use toLocaleString:

num.toLocaleString('en', {useGrouping:true})
Oriol
  • 274,082
  • 63
  • 437
  • 513
17

This was answered here:

How to print a number with commas as thousands separators in JavaScript

In case you're not interested in reading the answer above, the code given was this:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

If you're using jquery use something like:

var val = parseInt($('#value').text());
//Use the code in the answer above to replace the commas.
val = numberWithCommas(val);
$('#value').text(val);
Community
  • 1
  • 1
Luis Eduardo Rojas Cabrera
  • 384
  • 3
  • 11
  • 1
    I'm sure this would work but I don't know what to do with it. You gave me two codes but say use the second one, then in the second one say use the first one. I am not sure what to do. – Cosmicluck Jan 04 '15 at 01:59
  • 1
    The first part of code is just the function you will use to separate into commas. The second code is what does the actual job of changing your value to a value filled with commas. note that the answer given by @Jiri Kremser is actually pretty great. Consider it – Luis Eduardo Rojas Cabrera Jan 04 '15 at 02:01
  • I'm still not getting any results, should I have changed something in the code? – Cosmicluck Jan 04 '15 at 02:05
  • Okay, I see. It does work, however not how I want it. That only works if the number is stationary and placed there as a large number. It will not work if the number is changing. – Cosmicluck Jan 04 '15 at 02:11
  • Use an input field. When the value of that input changes, run the function. Check it here: http://jsfiddle.net/lrojas94/k9dac6x4/1/ – Luis Eduardo Rojas Cabrera Jan 04 '15 at 02:12
  • No idea what an input field is or how to use it. – Cosmicluck Jan 04 '15 at 02:15
15

There's a simpler syntax for toLocaleString:

Number(x).toLocaleString();

This lets you drop the number in as a variable instead of converting the number into an object.

Nelson
  • 2,040
  • 17
  • 23
  • 3
    1) numbers **are** objects in javascript; 2) if it's a variable that's already a number, you don't need to reconvert it, `x.toLocaleString()` will work fine; and 3) if you are using a literal, parentheses are plenty `(1234567.456).toLocaleString()` – Sampson Crowley Apr 08 '20 at 03:16