Adding comma as thousands separator (javascript) - output being deleted instead

Question

I am attempting to dynamically adjust a numerical value entered to include thousand separators

Here is my code:

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


<input type="number"  onkeyup="this.value=addCommas(this.value);" />

However when I enter numbers after the 4 one, the field is cleared.

Any ideas where I am going wrong? If there is a jQuery solution I'm already using that on my site.

With [JSFiddle](http://jsfiddle.net/WHcZC/) it doesn't work as expected, but the field isn't cleared. — Olaf Dietsche, Nov 29 '12 at 09:01

score 13 · Answer 1 · answered Nov 29 '12 at 08:46

13

Try this regex:

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

answered Nov 29 '12 at 08:46

phemt.latd

1,775
21
33

4

Exactly the same outcome, just deletes it after the 4th – Gideon Nov 29 '12 at 08:49

Isioma Nnodum · Answer 2 · 2013-08-07T21:48:21.280

To add the thousands separator you could string split, reverse, and replace calls like this:

function addThousandsSeparator(input) {
    var output = input
    if (parseFloat(input)) {
        input = new String(input); // so you can perform string operations
        var parts = input.split("."); // remove the decimal part
        parts[0] = parts[0].split("").reverse().join("").replace(/(\d{3})(?!$)/g, "$1,").split("").reverse().join("");
        output = parts.join(".");
    }

    return output;
}

addThousandsSeparator("1234567890"); // returns 1,234,567,890
addThousandsSeparator("12345678.90"); // returns 12,345,678.90

score 6 · Accepted Answer · answered Nov 29 '12 at 08:56

6

Try

<input type="text" onkeyup="this.value=addCommas(this.value);" />

instead. Since the function is working with text not numbers.

answered Nov 29 '12 at 08:56

Dillon Benson

4,280
4
23
25

1

You're a god damn genius sir. It's working -sort of, the commas are adding after every number except the last three, but I can fix that I think – Gideon Nov 29 '12 at 09:02
1

Cna you please tell how you fixed the issue where comma was added after every number – Annapurna Mar 01 '18 at 09:28
Did you fix the extra commas that appear? – Eugene van der Merwe Feb 22 '21 at 21:48

score 2 · Answer 4 · answered Nov 29 '12 at 09:43

as Dillon mentioned, it needs to be a string (or you could use typeof(n) and stringify if not)

function addCommas(n){
    var s=n.split('.')[1];
    (s) ? s="."+s : s="";
    n=n.split('.')[0]
    while(n.length>3){
        s=","+n.substr(n.length-3,3)+s;
        n=n.substr(0,n.length-3)
    }
    return n+s
}

score 2 · Answer 5 · edited May 23 '17 at 11:46

2

In each case before formatting try to remove existing commas first, like there: Removing commas in 'live' input fields in jquery

Example:

function addThousandsSeparator(x) {
    //remove commas
    retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;

    //apply formatting
    return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

edited May 23 '17 at 11:46

Community

1
1

answered Jan 13 '15 at 15:11

V.K.

101
1
4

This seems to be the best answer, the only issue is that when the field is empty "0" is returned and I cannot determine why. – tekstrand May 07 '15 at 20:33

Adding comma as thousands separator (javascript) - output being deleted instead

5 Answers5

Linked