javascript - 如何将包含自然值和货币的字段相乘？

我正在尝试将计算器从Excel电子表格复制到网页。
第一个字段是自然数的输入(不带逗号)，第二个字段是某些货币值(带逗号，点等)，第三个字段是合计值，但具有定义的值(例如0.38美分) )。两个字段都必须相乘并在第三个字段中给出结果。

我尝试使用 mask 插件创建 mask ，但是有几个错误。试图也使用toLocaleStrings。

我的口罩和结果有问题。
那是预期的结果:


的HTML

<form>
<!-- simple number to start the calculation -->
<label>Natural Number</label>
<input type="text" id="base" />
<br>
<!-- currency including the cents -->
<label>Currency value</label>
<input type="text" id="ticket" />
<br>
<!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
<label>Currency total</label>
<input type="text" id="cost" readonly /></form>

JQUERY

$(document).ready(function(){
$('#cost').mask('000.000.000.000.000,00', {reverse: true});

$('#base').keyup(calculate);
$('#ticket').keyup(calculate)

function calculate(e) {
$('#cost').val($('#base').val() * $('#ticket').val() * 0.38).trigger('input')
}

});

最佳答案

尝试使用正则表达式解析所有非数字和十进制符号。
下面的toDigits函数可以完成此操作，然后让您使用常规数学。

$(document).ready(function(){
  //add maskMoney listener
  $('#base').keyup(calculate);
  $('#ticket').keyup(calculate);
});

function calculate(e) {
  const percent = 0.38,
    baseValToDigits = toDigits($('#base').val() || 0),
    ticketValToDigits = toDigits($('#ticket').val() || 0),
    costVal = baseValToDigits * ticketValToDigits,
    percentageOfCostVal = costVal * percent;
  //format percentageOfCostVal as currency
  $('#cost').val(percentageOfCostVal).trigger('input')
}
function toDigits(val) {
    const isNeg = /(\(.*\))|^[-]/.test(val),
        digits = parseFloat(val.toString().replace(/[^0-9\.]+/g,""));
    return isNeg ? digits * -1 : +digits;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <!-- simple number to start the calculation -->
  <label>Natural Number</label>
  <input type="text" id="base" />
  <br>
  <!-- currency including the cents -->
  <label>Currency value</label>
  <input type="text" id="ticket" />
  <br>
  <!-- If the first field is "1" and the second is "1,00", this field has a value of 0.38 cents. -->
  <label>Currency total</label>
  <input type="text" id="cost" readonly />
</form>