带小数的 JavaScript 正则表达式自动逗号

Question

我正在使用以下 JavaScript + Regex 在用户输入时自动添加逗号:

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/[^-\d.]/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});

这很好用，但不适用于小数。它在小数点后加了逗号，这是我不想要的。

我可以更新代码来检查小数点后是否有逗号。不过，我认为 Regex 可能有更优雅的解决方案。

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    var num = value
    .replace(/[^-\d.]/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    var numSplit = num.split('.');
    if(numSplit.length > 1){
      num = numSplit[0] + '.' + numSplit[1].replace(/,/g, "");
    }
    return num;
  });
});

我尝试添加一个检查以首先查看 . 是否存在。但是我没有写对。

\B(?=[^.](\d{3})+(?!\d))

有没有更好的方法使用正则表达式来做到这一点？

https://codepen.io/anon/pen/gNOgMm

Answer 1

仅将正则表达式应用于整数

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    var num = value
      .replace(/[^-\d.]/g, "")
    var numSplit = num.split('.');
    if (numSplit.length > 1) {
      num = numSplit[0]
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + numSplit[1].replace(/,/, "");
    } else {
      num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
    return num;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">

精简版

$('input.number').keyup(function(event) {

  // skip for arrow keys
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    var num = value
      .replace(/[^-\d.]/g, "")
      .replace(/^\.+/g, "")
      .replace(/\./, "x").replace(/\./g, "").replace(/x/, ".")
      
    return (/^\d+\.\d+$/.test(num))
      ? num.replace(/(\d)(?=(\d{3})+(?:\.\d+)$)/g, "$1,") 
      : num.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">