jQuery function to to format number with commas and decimal

Question

I'm using the following function to format numbers as the user types. It will insert a comma every 3 numbers. Ex: 45696.36 becomes 45,696.36.

However, I've run into a problem with it. If the numbers after the decimal are longer than 3 digits, it starts adding commas to them. Ex: 1136.6696 becomes 1,136.6,696.

This is my function:

$.fn.digits = function(){
  return this.each(function() {
    $(this).val( $(this).val().replace(/[^0-9.-]/g, '') );
    $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
  }) 
}

How can I fix this so it stops placing commas after the decimal? I'm using jQuery 1.8. Thanks!

Answer 1

You could accomplish this by splitting your string at the '.' character and then performing your comma-conversion on the first section only, as such:

function ReplaceNumberWithCommas(yourNumber) {
    //Seperates the components of the number
    var n= yourNumber.toString().split(".");
    //Comma-fies the first part
    n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return n.join(".");
}

ReplaceNumberWithCommas(1136.6696); //yields 1,136.6696

Example