如何从JavaScript String中提取数学运算的操作符与操作数

开发者阿泽

2026-9-26

实现方案

可以通过正则表达式分别匹配数字和运算符，一次性得到两个目标数组，同时修复原代码末尾多显示运算符的问题：

核心逻辑

匹配操作数：用/\d+/g匹配所有连续数字（需要支持小数可替换为/\d+\.?\d*/g）
匹配运算符：用/[+\-*/]/g匹配所有加减乘除符号

完整修改后的代码

const selectElement = document.querySelector('.formule');
selectElement.addEventListener('change', (event) => {
  segmentFormule(event.target.value);
});

const segmentFormule = function (value){
  // 提取操作数数组，自动转为数字类型，不需要可以去掉.map(Number)
  const myOperands = value.match(/\d+/g)?.map(Number) || [];
  // 提取运算符数组
  const operations = value.match(/[+\-*/]/g) || [];
  
  let ColoredFormule = "";
  // 遍历拼接，避免末尾多显示运算符
  for (let i = 0; i < myOperands.length; i++) {
    // 先拼红色操作数
    ColoredFormule += `<span style="color:Red">${myOperands[i]}</span> `;
    // 不是最后一个操作数的话，拼后面的蓝色运算符
    if (i < operations.length) {
      ColoredFormule += `<span style="color:blue">${operations[i]}</span> `;
    }
  }
  document.querySelector('.result').innerHTML = ColoredFormule;
  
  // 可以按需返回两个数组
  // return { myOperands, operations }
}