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">

Answer 2

因此，通过简单的replace回调，您可以匹配小数部分
然后返回它，或者将断言匹配成千上万个地方
然后返回,。
无需拆分，只会使其变得更加复杂。
由于您使用的是正则表达式，因此请使用正则表达式进行所有操作。

正则表达式扩展为：

   ( \. \d* )                    # (1), Decimal part
|                              # or,
   \B                            # Thousands part
   (?=
        (?: \d{3} )+
        (?! \d )
 )

var input = "122341234.188874";
input = input.replace (/[^-\d.]/g, "" );
input = input.replace (/(\.\d*)|\B(?=(?:\d{3})+(?!\d))/g, 
  function( m, g1 ) // match, group 1
  {
    if ( g1 > "" )
      return g1;
    else
      return ",";
  }

);

console.log(input);

您可能要考虑的另一件事是验证
去除无效字符后的 form 。

我相信您可以用
replace (/^(?:.*?(-?(?:\d+(?:\.\d*)?|\.\d+))|).*$/g, "$1" );

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

2 个答案: