如何一次性批量替换字符串？优化class选择器下的JS重复代码

你当前的代码重复遍历DOM元素多次，完全可以通过一次遍历+批量替换规则来精简，只需要把所有替换规则整理成数组，对每个元素的内容依次执行所有替换即可，避免冗余的DOM查询和循环：

// 获取所有目标元素
const elements = document.querySelectorAll('.information');

// 定义所有替换规则：[原字符串, 替换后字符串]
const replaceRules = [
  [" pages", " pp."],
  [" page", " p."],
  ["colour & ", "colour & "],
  [" ill", " ill"],
  [" × ", " × "],
  [" cm", " cm"],
  [" / ", " / "]
];

// 遍历每个元素，依次应用所有替换规则
elements.forEach(element => {
  let html = element.innerHTML;
  replaceRules.forEach(([from, to]) => {
    html = html.replace(from, to);
  });
  element.innerHTML = html;
});

优化说明： #

• 用document.querySelectorAll替代getElementsByClassName，返回静态NodeList，避免动态集合可能带来的遍历问题
• 把所有替换规则集中在数组里，后续新增/修改规则只需调整数组，维护更方便
• 仅遍历一次DOM元素，对每个元素的内容一次性完成所有替换，减少DOM操作次数，提升性能
• 使用ES6箭头函数和数组解构，代码更简洁易读

内容的提问来源于stack exchange，提问作者R-G