如何将jQuery中的运算符输出设置为数千个分隔符和2个小数点？

Question

我有这些html输入来计算两个输入1和2并将结果显示到输入3中：

<input type="text" class="inputdecimals" id="txt_balance_dec" name="txt_balance_dec" value="0.00">
<input type="text" class="inputdecimals" id="txt_nett_dec"    name="txt_nett_dec"    value="0.00"readonly>


<input type="text" class="inputdecimals" id="txt_balance_nov" name="txt_balance_nov" value="0.00">

这是用于输入小数的jQuery：

<script>
    $(document).ready(function(e){
        $('input.inputdecimals').keyup(function(event) {
            if(event.which >= 37 && event.which <= 40) return;
            $(this).val(function(index, value) {
              return value
              .replace(/[^\d.]/g, "")
              .replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3')
              .replace(/\.(\d{2})\d+/, '.$1')
              .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              ;
            });
          });
    });
</script>

我的目标是减去值（ txt_bal_dec - txt_bal_nov ），并将总数显示为 txt_nett_dec 。

由于我的输入HTML输入已将值更改为千位分隔符和2个小数点，因此输出未如我所愿。

例如10,000.00-6,000.00等于6，而不是6,000.00（下图）

我不确定如何首先替换千位分隔符，然后在保持2位小数的同时进行计算。当显示输出时，我需要放回千位分隔符和2位小数。

我的jQuery计算如下。抱歉，我对jQuery不太满意。

$("#txt_balance_dec").keyup(function() {
        var bal_dec = parseFloat($(this).val(), 2);
        var bal_nov = parseFloat($('#txt_balance_nov').val(), 2);
        var result = bal_dec - bal_nov;
        $('#txt_nett_dec').val(result);
    }); 

感谢有人可以帮助我解决此问题。谢谢。

Answer 1

在尝试解析字符串之前，必须将所有逗号从字符串中剥离出来，因为用逗号解析数字只会将解析为第一个逗号。

//For example           Result
parseFloat("5,4,3")     // 5
parseFloat("15,000")    // 15
parseFloat("123,456")   // 123

这可以使用简单的替换操作完成：.replace(/,/g,'');

---

我还进行了一些更改以使收拾整齐：

• 制作了一个同时执行replace和parseFloat的函数称为parseCurrency，以使其易于重用
• 将格式放入名为formatCurrency的函数中，以使其易于重用
• 进行的dec_balance和nov_balance输入可以共享一个事件，因为对二者之一的更改都将强制进行net重新计算

const formatCurrency = (str) => (""+str).replace(/[^\d.]/g, "").replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3').replace(/\.(\d{2})\d+/, '.$1').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const parseCurrency = (str) => str.replace(/,/g,'');

$('input.inputdecimals').keyup(function(event) {
  if (event.which >= 37 && event.which <= 40) return;
  $(this).val((i,v) => formatCurrency(v));
});

$("#txt_balance_dec, #txt_balance_nov").keyup(function() {
  var bal_dec = parseCurrency( $("#txt_balance_dec").val() );
  var bal_nov = parseCurrency( $("#txt_balance_nov").val() );
  var result = bal_dec - bal_nov;
  $('#txt_nett_dec').val(formatCurrency(result));
});

input { display: block; margin: 10px 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Dec <input type="text" class="inputdecimals" id="txt_balance_dec" name="txt_balance_dec" value="0.00">
Nov <input type="text" class="inputdecimals" id="txt_balance_nov" name="txt_balance_nov" value="0.00">
Net <input type="text" class="inputdecimals" id="txt_nett_dec" name="txt_nett_dec" value="0.00" readonly>

（还值得注意的是，您的格式化功能似乎剥离了-，因此net将是绝对值。）