如何用jQuery提取HTML中分数式数值并分别执行乘法运算

你的问题出在直接把整个带/的字符串（比如"2000 / 4000"）乘以2——JavaScript会尝试把这个混合字符串转换成数字，但因为包含非数字字符，转换结果是NaN，自然达不到预期效果。我们需要先拆分出两个独立数字，分别计算后再重新拼接成目标格式。

单元素处理方案 #

如果只需要处理第一个匹配的.elementClass元素，可以这样写：

// 获取目标DOM元素
const targetElement = $('.elementClass')[0];
// 获取原始文本并去除首尾多余空格
const originalContent = targetElement.innerHTML.trim();
// 按分隔符拆分出两个数字的字符串（这里用" / "作为分割符，匹配示例格式）
const [firstNumStr, secondNumStr] = originalContent.split(' / ');
// 转换为数字并各自乘以2
const updatedFirst = parseInt(firstNumStr, 10) * 2;
const updatedSecond = parseInt(secondNumStr, 10) * 2;
// 重新拼接成目标格式并赋值回去
targetElement.innerHTML = `${updatedFirst} / ${updatedSecond}`;

多元素批量处理方案 #

如果页面中有多个.elementClass元素需要统一处理，用jQuery的.each()遍历更高效：

$('.elementClass').each(function() {
  const originalContent = this.innerHTML.trim();
  // 用正则表达式分割，兼容分隔符前后空格不固定的情况
  const [firstNumStr, secondNumStr] = originalContent.split(/\s*\/\s*/);
  // 若数字可能是小数，用Number()或parseFloat()代替parseInt()
  const newFirst = Number(firstNumStr) * 2;
  const newSecond = Number(secondNumStr) * 2;
  this.innerHTML = `${newFirst} / ${newSecond}`;
});

关键细节说明 #

• 拆分字符串时，如果原始文本的/前后空格数量不固定，用正则/\s*\/\s*/分割比固定字符串更可靠，它能匹配任意数量的空格（包括零个）。
• 转换数字时，parseInt()适合整数场景，parseFloat()或Number()适合包含小数的数字，根据你的实际数值类型选择即可。

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