如何解决jQuery中blur事件重复触发致正则执行两次出现NaN的问题

嘿，我懂你碰到的这个糟心事！问题核心在于第一次格式化后，输入框里的值已经带上了$和千分位逗号，第二次触发blur时，parseInt没法从$ 1,234.56这种字符串里正确解析数字，直接返回了NaN，后续的toFixed自然就出问题了。

问题根源拆解 #

原来的代码在第二次触发blur时会踩坑：

• 输入框的值是已经格式化好的$ 1,234.56
• parseInt($(this).val())会从字符串开头尝试解析数字，但第一个字符是$，解析失败直接返回NaN
• 调用NaN.toFixed(2)后，最终结果就会出现NaN

修复方案：先清理非数字内容再格式化 #

我们需要先把输入框里的非数字、非小数点字符全部清理掉，提取出纯数字部分再处理——这样不管是第一次输入还是后续修改，都能正确解析数字。修改后的代码如下：

$(document).ready(function(){
  $('#myNumber').on('blur', function ({target}) {
    const rawValue = $(this).val().trim();
    if (!rawValue) return; // 空值直接返回，不做处理
    
    // 清理所有非数字和小数点的字符，只保留纯数字部分
    const cleanNumberStr = rawValue.replace(/[^0-9.]/g, '');
    // 转成浮点数，处理无效输入（比如用户只输入了符号的情况）
    const number = parseFloat(cleanNumberStr) || 0;
    
    // 格式化数字为带$和千分位的格式
    const formattedNum = '$ ' + number.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    $(this).val(formattedNum);
  });
});

完整可运行的HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <input type="text" id="myNumber">
</body>
</html>

关键改进说明 #

• rawValue.replace(/[^0-9.]/g, '')：把$、逗号、空格这些无关字符全部过滤掉，只保留数字和小数点
• parseFloat(cleanNumberStr) || 0：确保即使清理后得到空字符串（比如用户输入了一堆符号），也能得到0，彻底避免NaN
• 增加trim()：处理输入前后的空格，避免因空格导致的误判

这样不管触发多少次blur事件，都能正确提取数字并格式化，再也不会出现NaN啦！

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