如何用JavaScript/jQuery无正则提取数字及实现三输入框运算功能

一、不使用正则表达式提取数字的方法 #

如果不想用正则，我们可以通过遍历字符串的每个字符，筛选出能组成有效数值的部分（数字、单个小数点，逗号后续移除），具体实现如下：

function extractNumber(str) {
  let numStr = '';
  let hasDecimal = false; // 标记是否已经添加过小数点

  for (let char of str) {
    // 处理数字字符（排除空格）
    if (!isNaN(parseInt(char)) && char !== ' ') {
      numStr += char;
    } 
    // 小数点只保留第一个，避免出现多个小数点的无效数值
    else if (char === '.' && !hasDecimal) {
      numStr += char;
      hasDecimal = true;
    }
    // 暂时保留逗号，后续统一移除（千分位逗号不影响数值）
    else if (char === ',') {
      numStr += char;
    }
  }

  // 移除逗号（不用正则，用split+join实现）
  const cleanedNumStr = numStr.split(',').join('');
  // 转成数值，若为空或无效则返回0
  return isNaN(Number(cleanedNumStr)) ? 0 : Number(cleanedNumStr);
}

这个函数的逻辑很直观：

• 遍历输入字符串的每一个字符
• 只保留数字、第一个小数点，以及千分位逗号
• 最后移除逗号并转成有效数值，避免出现NaN的情况

二、完整需求实现（输入框实时提取+计算功能） #

接下来我们实现你要的交互效果：三个输入框、输入框1实时展示提取的数字、计算按钮执行指定运算。

HTML结构

先搭好页面基础结构：

<div style="margin: 10px 0;">
  <label>输入框1：</label>
  <input type="text" id="input1" placeholder="例如：$123456.00X">
  <div id="extractedDisplay" style="margin-top: 5px; color: #666;"></div>
</div>
<div style="margin: 10px 0;">
  <label>输入框2：</label>
  <input type="text" id="input2" placeholder="例如：¥987.65">
</div>
<div style="margin: 10px 0;">
  <label>输入框3：</label>
  <input type="text" id="input3" placeholder="例如：€12.34">
</div>
<button id="calcBtn" style="padding: 5px 15px;">计算（输入1 × 输入2 ÷ 输入3）</button>
<div id="calcResult" style="margin-top: 10px; font-weight: bold;"></div>

纯JavaScript实现

// 获取DOM元素
const input1 = document.getElementById('input1');
const extractedDisplay = document.getElementById('extractedDisplay');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const calcBtn = document.getElementById('calcBtn');
const calcResult = document.getElementById('calcResult');

// 输入框1实时提取数字并展示
input1.addEventListener('input', function() {
  const num = extractNumber(this.value);
  extractedDisplay.textContent = `提取的有效数值：${num}`;
});

// 计算按钮点击事件
calcBtn.addEventListener('click', function() {
  // 提取三个输入框的数值
  const num1 = extractNumber(input1.value);
  const num2 = extractNumber(input2.value);
  const num3 = extractNumber(input3.value);

  // 处理除数为0的异常情况
  if (num3 === 0) {
    calcResult.textContent = '⚠️ 错误：除数不能为0';
    calcResult.style.color = '#dc3545';
    return;
  }

  // 执行运算并保留两位小数
  const result = (num1 * num2) / num3;
  calcResult.textContent = `✅ 计算结果：${result.toFixed(2)}`;
  calcResult.style.color = '#28a745';
});

// 复用之前的extractNumber函数
function extractNumber(str) {
  let numStr = '';
  let hasDecimal = false;

  for (let char of str) {
    if (!isNaN(parseInt(char)) && char !== ' ') {
      numStr += char;
    } else if (char === '.' && !hasDecimal) {
      numStr += char;
      hasDecimal = true;
    } else if (char === ',') {
      numStr += char;
    }
  }

  const cleanedNumStr = numStr.split(',').join('');
  return isNaN(Number(cleanedNumStr)) ? 0 : Number(cleanedNumStr);
}

jQuery版本实现（如果习惯用jQuery）

$(document).ready(function() {
  // 输入框1实时提取数字
  $('#input1').on('input', function() {
    const num = extractNumber($(this).val());
    $('#extractedDisplay').text(`提取的有效数值：${num}`);
  });

  // 计算按钮逻辑
  $('#calcBtn').on('click', function() {
    const num1 = extractNumber($('#input1').val());
    const num2 = extractNumber($('#input2').val());
    const num3 = extractNumber($('#input3').val());

    if (num3 === 0) {
      $('#calcResult').text('⚠️ 错误：除数不能为0').css('color', '#dc3545');
      return;
    }

    const result = (num1 * num2) / num3;
    $('#calcResult').text(`✅ 计算结果：${result.toFixed(2)}`).css('color', '#28a745');
  });

  // 提取数字函数
  function extractNumber(str) {
    let numStr = '';
    let hasDecimal = false;

    for (let char of str) {
      if (!isNaN(parseInt(char)) && char !== ' ') {
        numStr += char;
      } else if (char === '.' && !hasDecimal) {
        numStr += char;
        hasDecimal = true;
      } else if (char === ',') {
        numStr += char;
      }
    }

    const cleanedNumStr = numStr.split(',').join('');
    return isNaN(Number(cleanedNumStr)) ? 0 : Number(cleanedNumStr);
  }
});

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