Osama Amr
Osama Amr

Reputation: 67

JavaScript formatting numbers in input by commas not working

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

Upvotes: 0

Views: 1223

Answers (2)

Tam&#225;s Katona
Tam&#225;s Katona

Reputation: 833

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

Upvotes: 2

mugiseyebrows
mugiseyebrows

Reputation: 4698

You need to remove commas first

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

Upvotes: 3

Related Questions