如何验证id为screen的div内p元素是否为有效数学表达式并计算结果

要实现验证screen容器内<p>元素组成的数学表达式并计算结果，需要完成表达式拼接、特殊运算符转换、安全验证、计算执行这几个核心步骤，以下是具体实现：

核心问题分析 #

原代码的operationLogic仅单独处理每个<p>元素的数值，未拼接成完整表达式；同时计算器里的x（乘）、÷（除）并非JS原生支持的运算符，需先转换；另外直接使用eval存在安全风险，必须做表达式合法性校验。

完整实现代码 #

JavaScript部分 #

let screen = document.getElementById('screen');

function getButtonValue() {
  const element = event.target.innerHTML;
  // 点击=时清空原有表达式，只展示计算结果
  if (element === '=') {
    screen.innerHTML = '';
    const result = operationLogic();
    const insert = document.createElement("p");
    insert.innerHTML = result;
    screen.appendChild(insert);
    return;
  }
  const insert = document.createElement("p");
  insert.innerHTML = element;
  screen.appendChild(insert);
};

function operationLogic() {
  // 1. 拼接所有<p>的内容为完整表达式
  const pElements = screen.querySelectorAll('p');
  let expression = Array.from(pElements).map(el => el.textContent.trim()).join('');
  
  // 2. 转换计算器特殊运算符为JS支持的格式
  expression = expression.replace(/x/g, '*').replace(/÷/g, '/');
  
  // 3. 验证表达式合法性：仅允许数字、运算符、括号、小数点、百分号
  const validPattern = /^[\d+\-*/().%]+$/;
  if (!validPattern.test(expression)) {
    return '无效表达式';
  }
  
  // 4. 安全计算结果（用Function替代eval，降低注入风险）
  try {
    // 处理百分号：例如10%转为0.1
    expression = expression.replace(/(\d+)%/g, (match, num) => Number(num)/100);
    const calculate = new Function(`return ${expression}`);
    const result = calculate();
    // 处理NaN或无限大的异常情况
    if (isNaN(result) || !isFinite(result)) {
      return '计算错误';
    }
    return result;
  } catch (e) {
    return '表达式错误';
  }
}

HTML部分（保持原结构即可） #

<div id="calculator">
  <div id=screen></div>
  <div id="operationMain">
    <ul>
      <li class="operatorColor" onclick="getButtonValue()">{</li>
      <li class="operatorColor" onclick="getButtonValue()">}</li>
      <li class="operatorColor" onclick="getButtonValue()">(</li>
      <li class="operatorColor" onclick="getButtonValue()">)</li>
      <li class="blue" onclick="getButtonValue()">=</li>
      <li class="operatorColor" onclick="getButtonValue()">+</li>
      <li class="operatorColor" onclick="getButtonValue()">-</li>
      <li class="operatorColor" onclick="getButtonValue()">x</li>
      <li class="operatorColor" onclick="getButtonValue()">÷</li>
      <li class="operatorColor" onclick="getButtonValue()">%</li>
      <li class="operatorColor" onclick="getButtonValue()">.</li>
      <li onclick="getButtonValue()">0</li>
      <li onclick="getButtonValue()">1</li>
      <li onclick="getButtonValue()">2</li>
      <li onclick="getButtonValue()">3</li>
      <li onclick="getButtonValue()">4</li>
      <li onclick="getButtonValue()">5</li>
      <li onclick="getButtonValue()">6</li>
      <li onclick="getButtonValue()">7</li>
      <li onclick="getButtonValue()">8</li>
      <li onclick="getButtonValue()">9</li>
      <li onclick="getButtonValue()">00</li>
    </ul>
  </div>
</div>

关键细节说明 #

• 表达式拼接：通过Array.from将NodeList转为数组，提取每个<p>的文本内容后拼接成完整表达式字符串。
• 运算符转换：把计算器的x替换为*、÷替换为/，确保JavaScript能识别运算逻辑。
• 合法性校验：用正则表达式限制输入仅为合法数学字符，避免恶意代码注入。
• 安全计算：使用new Function替代eval，它仅在局部作用域执行，风险更低；同时处理百分号转换、除零错误、非法括号等异常场景。
• 交互优化：点击=时清空原有表达式，只展示计算结果，避免重复拼接导致的逻辑混乱。

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