使用 jquery 自动计算 HTML 输入值答案

【问题标题】：using jquery to calculate HTML input value automatically使用 jquery 自动计算 HTML 输入值
【发布时间】：2015-06-22 01:39:28
【问题描述】：

我有以下 Html

<input class="top-display" value="5+5" id="display" disabled="disabled"> </input>
<button class="btn" > submit </button>

还有 jquery

$('.btn').click(function(){
    var selected = $('#display').val();
    alert(selected);

});

fiddle Here 我对这段代码的关注是让 jquery 自动为我做数学。就像 jquery 提醒“5+5”而不是提醒“10”一样。如果 value = "5-5" 应该警告 "0"；不添加任何 if 语句。

【问题讨论】：

一个快速的解决方案是将$('#display').val() 更改为eval($('#display').val())。虽然Eval can be dangerous。确保您阅读并理解它。
你为什么不在 Stack Overflow 上提问？ meta.stackexchange.com/a/129632/165773
因为我不能在那里问，这要感谢一些无缘无故地降低评级问题的人

标签： jquery

【解决方案1】：

你可以使用 eval()

eval() 方法评估表示为字符串的 JavaScript 代码。

将您的代码更改为：

$('.btn').click(function(){
    var selected = eval($('#display').val());
    alert(selected);
});

另请注意：

eval() 是一个危险的函数，它以调用者的权限执行它传递的代码。

在 MDN 上阅读更多内容以了解涉及 eval 的风险。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

【讨论】：

【解决方案2】：

Updated Fiddle

$('.btn').click(function(){
    var selected = $('#display').val();
    alert(eval(selected));
});

不要忘记添加适当的错误处理，以避免在存在兼容值的情况下出现错误。

编辑： eval 函数已知 security vulnerabilities。始终建议不要使用它。

$('.btn').click(function(){
    var selected = $('#display').val();
    alert(evil(selected));
});

function evil(fn) {
    return new Function('return ' + fn)();
}

这是我在another thread 中找到的另一个解决方案。

【讨论】：

【解决方案3】：

您在警报中获得 5+5 的原因是因为您的“表达”没有被执行。 eval(args) 将在哪里执行参数。

【讨论】：

【解决方案4】：

eval() 可以在这种情况下使用，只要您像下面这样清理输入字符串：

$('.btn').click(function(){
    // strip anything other than digits, (), -+/* and .
    var selected = $('#display').val().replace(/[^-()\d/*+.]/g, '');
    alert(eval(selected ));
});

您还可以参考this thread 了解 eval() 的其他替代方法。使用 eval() 的安全风险已在here 进行了详细讨论。

干杯！

编辑：更新小提琴链接here 进行测试。

【讨论】：