javascript - 即使存在非数字字符也要计数的数字计数器

Question

我有一个数字计数器，如果输入只是一个数字，它就可以工作。但是，情况可能并非总是如此，例如，用户可能输入 16,000 而不是 16000。

在我当前的设置中，如果代码只是一个数字，它就可以工作，但是如果存在非数字字符，我该如何防止它被破坏？

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 3000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

.count{
    font-size: 80px;
    font-weight: bold;
    color: #3C3C3C;
}

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<span class="count">16000</span>
<br>
<span class="count">16,000 +</span>

编辑:

我不想删除任何字符，如果确实存在非数字字符，我希望它们保持静态，但数字仍然有效。

Answer 1

要解决此问题，您可以使用正则表达式从字符串中删除任何非数字字符，如下所示:

Counter: $(this).text().replace(/\D/g, '')

I want the numbers to count up and non number chars to stay as is

在这种情况下，您需要执行上述操作，因为计数器只能处理数值，然后您需要在步骤中再次显示该值时重新格式化该值处理函数，像这样:

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text().replace(/\D/g, '')
  }, {
    duration: 3000,
    easing: 'swing',
    step: function(now) {
      $(this).text(numberWithCommas(Math.ceil(now)));
    }
  });
});

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

.count {
  font-size: 80px;
  font-weight: bold;
  color: #3C3C3C;
}

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<span class="count">16000</span><br />
<span class="count">16,000 +</span>