JavaScript中如何获取输入框值得到运算结果而非原表达式字符串？

你当前代码的问题是仅直接读取输入框的字符串内容赋值给输出节点，没有执行表达式计算逻辑，所以只会返回原表达式字符串，不会得到运算结果。

方案1：快速实现（仅适合自用无外部用户输入的场景） #

使用eval执行表达式计算，同时添加异常捕获处理输入错误的情况，修改后的JS代码如下：

function calc() {
  const inputExp = document.getElementById('CalcInput').value;
  try {
    const calcResult = eval(inputExp);
    document.getElementById('Output').innerHTML = calcResult;
  } catch (err) {
    document.getElementById('Output').innerHTML = '表达式无效，请检查输入内容';
  }
}

注意：eval会执行传入的任意JS代码，如果你的页面允许外部用户输入内容，会存在XSS安全风险，不建议直接使用。

方案2：添加输入校验的安全版本 #

如果仅需要支持基础的四则运算，可以先对输入内容做格式校验，过滤掉非法字符，再执行计算，降低安全风险：

function calc() {
  const inputExp = document.getElementById('CalcInput').value;
  // 仅允许数字、四则运算符、小数点、括号和空格
  const legalRule = /^[\d+\-*/.()\s]+$/;
  if (!legalRule.test(inputExp)) {
    document.getElementById('Output').innerHTML = '仅支持数字与四则运算相关符号输入';
    return;
  }
  try {
    const calcResult = eval(inputExp);
    document.getElementById('Output').innerHTML = calcResult;
  } catch (err) {
    document.getElementById('Output').innerHTML = '表达式格式错误，请重新输入';
  }
}

修改后测试输入2*10点击按钮，输出节点就会展示运算结果20。

内容的提问来源于stack exchange，提问作者Simon Lovelace