JavaScript实现字符串中数组元素的批量加粗样式问题

我看了你的代码，发现几个关键问题导致没法正确替换所有目标词汇，咱们一个个来解决：

现存问题拆解 #

1. 只替换第一个匹配项：普通的replace()方法默认只会替换字符串里第一个找到的目标词，像你表格里的venkel出现两次，只会改第一个。
2. 覆盖已加粗的内容：每次用textContent取内容再赋值回innerHTML，会把之前已经加上的<b>标签全部转成纯文本，等于白忙活前面的替换。
3. 循环顺序搞反了：你先遍历关键词再遍历DOM元素，导致同一个元素被反复重置内容，之前的修改会被覆盖。

修正后的完整代码 #

下面是修复后的代码，我还加了处理特殊字符的逻辑（比如crème fraîche里的重音符号），确保所有关键词都能全局匹配：

const productNames = ["witte asperges", "crème fraîche", "wijtingfilet", "selder", "BIO wortelen", "BIO rode ui", "venkel"];
const descriptionElements = document.querySelectorAll(".Description");

// 转义正则里的特殊字符，避免语法错误
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

// 先遍历每个描述元素，再逐个替换关键词
descriptionElements.forEach(descEl => {
  let currentHtml = descEl.innerHTML;
  productNames.forEach(product => {
    // 创建全局匹配的正则，确保替换所有出现的关键词
    const matchRegex = new RegExp(escapeRegExp(product), "g");
    // 用<b>标签包裹匹配到的内容，保留原文本格式
    currentHtml = currentHtml.replace(matchRegex, `<b>$&</b>`);
  });
  // 把修改后的HTML放回元素
  descEl.innerHTML = currentHtml;
});

为什么这么改？ #

• 用querySelectorAll()获取元素，比getElementsByClassName()更适合用forEach遍历，代码更简洁。
• escapeRegExp函数处理关键词里的特殊字符（比如空格、重音），防止正则表达式报错。
• 先处理单个DOM元素，再在这个元素的HTML里批量替换所有关键词，不会覆盖之前的加粗效果。
• 正则加了g标志，实现全局替换，同一个关键词出现多少次就加粗多少次。

测试结果 #

用你提供的HTML表格测试后，所有目标词汇都会被正确加粗：

• 第一个单元格里的wortelen、selder，还有两次出现的venkel都会变成加粗样式
• 第三个单元格里的crème fraîche会被精准识别并加粗
• 带BIO的关键词也能完美匹配替换

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