如何根据输入id用javascript编写公式并进行计算

Question

我有一个简单的javascript表单。我要计算一个公式。

我想通过id选择元素，然后检测运算符，最后计算出最终结果。

<p>
V1: <input id="v1" />
</p>
<p>
V2: <input id="v2" />
</p>
<p>
V3: <input id="v3" />
</p>
<p>
V4: <input id="v4" />
</p>
<p>
Fromula: <input id="f1" />
</p>
<p>
<button id="doAction">
Calculate
</button>
</p>

示例表达式为：(v1+v2(*v3-(v4-v1(/v2

Answer 1

您可以使用eval和ID自动映射(无需调用getElementById(来实现

doAction.addEventListener("click", () => {
const formula = f1.value
.replaceAll("v1", v1.value || 0)
.replaceAll("v2", v2.value || 0)
.replaceAll("v3", v3.value || 0)
.replaceAll("v4", v4.value || 0)
result.innerHTML = eval(formula)
})

<p>
V1: <input id="v1" />
</p>
<p>
V2: <input id="v2" />
</p>
<p>
V3: <input id="v3" />
</p>
<p>
V4: <input id="v4" />
</p>
<p>
Formula: <input id="f1" />
</p>
<p id="result">
</p>
<p>
<button id="doAction">
Calculate
</button>
</p>

但有一点你需要注意，eval不是100%安全的，如果你不正确地保护你的代码，有人可能会注入恶意脚本。这是的示例

eval("alert('Not safe')")

如果你想有一个更安全的方法，你需要有一个函数来将字符串转换为像这样的数字运算符

Answer 2

最后我找到了这个解决方案：

var doAction = document.getElementById('doAction');
doAction.addEventListener('click', (s, e) => {  
var scope=expressionArray("(v1+v2)*v3-v4");
var formula = document.getElementById('f1').value;
const result = math.evaluate(formula, scope)
console.log(result);
});
function expressionArray(init)
{
var text="";
var split_var = init.split(/[*-/+()]+/);
var obj={};
split_var.forEach((s,e)=>{    
if(document.getElementById(s))
{
obj[s]=document.getElementById(s).value;
}    
});
return obj;
}

https://jsfiddle.net/bshafiei/zyv7bsfd/51/