能否读取输入表单内的数学公式，并通过Javascript计算得到对应结果？

场景1：直接解析表单输入的完整数学公式 #

可以实现，但是需要重点关注执行安全，避免用户输入恶意代码造成注入风险。推荐先对输入内容做合法性过滤，再通过隔离作用域的方式执行运算，实现代码如下：

/**
 * 安全计算数学公式
 * @param {string} inputStr 用户输入的公式字符串
 * @returns {number} 运算结果
 */
function calcFormula(inputStr) {
  // 过滤非法字符：仅允许数字、四则运算符、括号、小数点、空白符
  if (/[^0-9+\-*/().\s]/.test(inputStr)) {
    throw new Error('输入包含非法运算内容');
  }
  try {
    // Function构造函数作用域隔离，比直接调用eval更安全
    return new Function(`return ${inputStr}`)();
  } catch (e) {
    throw new Error('公式格式错误，计算失败');
  }
}

// 调用示例
const formulaInput = document.querySelector('#formula-input').value.trim();
const calcResult = calcFormula(formulaInput);
console.log(calcResult); // 输入为"10 * 2"时，输出20

场景2：仅获取运算符和第二个数值，第一个值从其他DOM组件获取 #

按照「取值-校验-运算」的步骤实现即可，两种实现方式可选：

// 1. 从其他DOM获取第一个数值并校验
const firstNum = Number(document.querySelector('#base-value').textContent.trim());
if (isNaN(firstNum)) {
  throw new Error('基础数值不合法');
}

// 2. 获取运算符和第二个数值并校验
const operator = document.querySelector('#operator-select').value.trim();
const secondNum = Number(document.querySelector('#second-num').value.trim());
if (isNaN(secondNum) || !['+', '-', '*', '/'].includes(operator)) {
  throw new Error('运算符或第二个数值不合法');
}
if (operator === '/' && secondNum === 0) {
  throw new Error('除数不能为0');
}

// 3. 执行运算，二选一即可
// 方案A：分支判断（完全无注入风险，最推荐）
let finalResult;
switch(operator) {
  case '+': finalResult = firstNum + secondNum; break;
  case '-': finalResult = firstNum - secondNum; break;
  case '*': finalResult = firstNum * secondNum; break;
  case '/': finalResult = firstNum / secondNum; break;
}

// 方案B：拼接公式后调用场景1的calcFormula函数，适合需要支持复杂运算的场景
// const finalResult = calcFormula(`${firstNum}${operator}${secondNum}`);

console.log(finalResult);

注意事项 #

• 所有用户输入的内容都必须做合法性校验，避免非数字、非法运算符、除以零等异常情况
• 如果需要支持幂运算、取模、百分比等更多运算规则，只需在校验正则和switch分支中补充对应规则即可

内容的提问来源于stack exchange，提问作者Oscar Rabadan