Tengo un formulario simple en javascript. Voy a calcular una fórmula.
Quiero seleccionar elementos por id y luego detectar operadores y finalmente calcular el resultado final.
<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>La expresión de ejemplo es: (v1+v2)*v3-(v4-v1)/v2
Puede usar eval y mapeo automático por ids (no es necesario llamar a getElementById ) para tener esa implementación
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> Pero una cosa que debe tener en cuenta, eval no es seguro al 100%, si no protege su código correctamente, alguien puede inyectar scripts maliciosos. Aquí está el caso de muestra
eval("alert('Not safe')")Si desea tener una forma más segura, debe tener una función para convertir cadenas en operadores con números como este
Finalmente encontré esta solución:
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; }