单输入框公式计算：失焦时用结果替换公式（jQuery实现）

核心思路 #

• 彻底摒弃风险极高的eval()，通过白名单过滤合法字符+安全的表达式求值逻辑规避注入风险
• 基于类名绑定事件，支持任意数量的输入框复用该功能

方案一：原生JavaScript实现（无外部依赖） #

HTML结构 #

<input type="text" class="formula-calculator" placeholder="输入公式，如2+2">
<input type="text" class="formula-calculator" placeholder="输入公式，如(8*4)+3">

JavaScript代码 #

// 安全的公式求值函数
function safeEvaluateFormula(formula) {
  // 白名单正则：仅允许数字、+-*/()和空格
  const validChars = /^[\d+\-*/()\s]+$/;
  if (!validChars.test(formula)) {
    // 包含非法字符，返回原输入
    return formula;
  }

  try {
    // 使用Function构造函数替代eval，避免访问当前作用域变量
    const cleanFormula = formula.replace(/\s/g, '');
    const result = new Function(`return ${cleanFormula}`)();
    
    // 验证计算结果为有效数字，排除NaN/Infinity
    if (typeof result === 'number' && !isNaN(result) && isFinite(result)) {
      return result;
    }
  } catch (err) {
    console.error('公式语法错误:', err);
  }
  
  // 计算失败或无效时返回原公式
  return formula;
}

// 绑定失焦事件到所有目标输入框
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.formula-calculator').forEach(input => {
    input.addEventListener('blur', function() {
      const inputValue = this.value.trim();
      if (inputValue) {
        this.value = safeEvaluateFormula(inputValue);
      }
    });
  });
});

安全说明 #

• 白名单过滤确保输入仅包含合法数学字符，从根源上阻止恶意代码注入
• Function构造函数仅在自身独立作用域执行，不会访问当前上下文的变量，风险远低于eval()
• 异常捕获机制处理语法错误，避免页面崩溃
• 结果验证确保仅返回有效数字，排除计算异常情况

方案二：jQuery实现（解决JSFiddle未加载库的问题） #

如果偏好jQuery，需先在页面中引入jQuery库，再执行以下代码：

HTML结构 #

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<input type="text" class="formula-calculator" placeholder="输入公式，如2+2">
<input type="text" class="formula-calculator" placeholder="输入公式，如(8*4)+3">

JavaScript代码 #

function safeEvaluateFormula(formula) {
  const validChars = /^[\d+\-*/()\s]+$/;
  if (!validChars.test(formula)) {
    return formula;
  }

  try {
    const cleanFormula = formula.replace(/\s/g, '');
    const result = new Function(`return ${cleanFormula}`)();
    if (typeof result === 'number' && !isNaN(result) && isFinite(result)) {
      return result;
    }
  } catch (err) {
    console.error('公式语法错误:', err);
  }
  
  return formula;
}

$(document).ready(() => {
  $('.formula-calculator').on('blur', function() {
    const inputValue = $(this).val().trim();
    if (inputValue) {
      $(this).val(safeEvaluateFormula(inputValue));
    }
  });
});

进阶优化方向 #

• 添加输入实时验证：监听input事件，当用户输入非法字符时给出提示或自动过滤
• 扩展支持的运算符：如需支持取模%，只需更新白名单正则为/^[\d+\-*/()%\s]+$/
• 支持基础数学函数：如需计算sin(30)这类表达式，可在白名单中添加函数名，并在Function中显式声明允许的函数（需严格控制，避免引入新风险）

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