动态重新格式化 JavaScript 中的输入以向数字添加逗号

Question

我在输入数字时遇到问题。用户通常输入一个带有许多零的大数字， 而且经常会缺少一两个零，因为很难准确计数。

我认为 javascript 可以通过向用户显示他们输入的数字（用逗号格式化）来解决这个问题。

例如：

输入： | 1230000000000 |

结果：1,230,000,000,000

这是如何实现的？

Answer 1

中使用以下函数

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

在 javascript示例

addCommas('9999999.00')
// 9,999,999.00

Answer 2

这是一个老问题，但仍然没有正确的答案，所以，这是我的动态解决方案，它需要相同的 addCommas 函数来重新格式化输出，但添加一个 keyup 事件来清理当前值（删除 ',' ）并再次重新格式化新值价值。

$('.datainto').keyup(function () {
    var value = $(this).val().replace(/,/g,'');
    $(this).val(addCommas(value));
});

在这里检查工作解决方案：
http://jsfiddle.net/darorck/371zrjet/

Answer 3

function formatNumber() {
  // select the input box
  let numInput = document.getElementById("myNumberInput");

  //get the value from the selected input box, remove commas
  //and convert it into float
  let num = parseFloat(numInput.value.replace(/,/g, ""));

  //replace the value in the input box with comma separated value
  //only if it is a valid number
  if (!isNaN(num)) {
    let formattedNum = num.toLocaleString('en-US');
    numInput.value = formattedNum;
  } else {
    numInput.value = "";
  }
}

<input type="text" id="myNumberInput" onkeyup="formatNumber()" />

Answer 4

在现代浏览器中，您只需使用 toLocaleString() 即可实现此目的

console.log((1230000000000).toLocaleString());
console.log((12300000000).toLocaleString());
console.log((1230000.152).toLocaleString());

我知道我给出答案已经很晚了，但是我仍然发布了这个答案，因为这个问题出现在 How to add adynamic comma in number in javascript 的搜索结果中，所以我想我需要添加一个对于即将到来的开发人员来说更短、更好的答案。