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

Question

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

我尝试使用 mask 插件创建 mask ，但遇到了一些错误。也尝试使用 toLocaleStrings。

我对 mask 和结果有疑问。这就是预期的结果:

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')
}

});

Answer 1

尝试使用正则表达式解析所有非数字和小数符号。下面的 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>