JavaScript formatting numbers in input by commas not working

Question

I need to separate number with commas and I used code block from another question I found here but it's not working as expected

The input

<input type="text" name="budget" placeholder="Total Budget" class="form-control">

The JS

$('input[name=budget]').keyup(function (e) { 
    e.preventDefault();
    let value = $(this).val();
    let newValue = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    $(this).val(newValue);
});

When I tested this code I faced a problem

I typed 1000 and it showed correctly 1,000

But when I typed another 0 the number returned into this 1,0,000

And every 0 I increase it adds a comma after it like this 1,0,0,0,0,000

mugiseyebrows · Accepted Answer · 2022-05-17 13:52:32Z

3

You need to remove commas first

let newValue = value.toString().replace(/,/g,"").replace(/\B(?=(\d{3})+(?!\d))/g, ",")

answered May 17, 2022 at 13:52

mugiseyebrows

4,9491 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tamás Katona · Accepted Answer · 2022-05-17 14:14:55Z

2

There is a native solution for formatting numbers Intl.NumberFormat

I would use that, instead of a regExp replace.

const numberFormatter = new Intl.NumberFormat();
const newValue = numberFormatter.format(value);

answered May 17, 2022 at 14:14

Tamás Katona

8739 silver badges16 bronze badges

1 Comment

Yogi Over a year ago

Yes, much better than a RegEx solution. Could also use Number.toLocaleString which accepts country and currency symbol. +1

Collectives™ on Stack Overflow

JavaScript formatting numbers in input by commas not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related