Chrome扩展开发：如何动态替换DOM中的多个指定关键词

针对你的需求，我们可以通过修正关键词存储方式、使用正则实现全局匹配，来完成多词汇的动态替换，以下是具体实现：

1. 核心问题修正 #

原代码里的const Key = ('covid-19', 'coronavirus', 'covid');是错误的逗号表达式，实际只会保留最后一个值，需要改为数组来存储多个关键词。

2. 完整修改代码 #

// 定义需要替换的关键词数组，支持后续动态扩展
const keywords = ['covid-19', 'coronavirus', 'covid'];
// 目标DOM元素选择器
const targetElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, li, td, caption, span');

// 创建标记元素（文本节点不能重复添加，直接创建带文本的div更合理）
const tagDiv = document.createElement('div');
tagDiv.id = 'tag';
tagDiv.textContent = 'TAG';

// 遍历每个目标元素
targetElements.forEach(element => {
  let currentHtml = element.innerHTML;
  let hasMatch = false;

  // 遍历每个关键词执行替换逻辑
  keywords.forEach(keyword => {
    // 构建忽略大小写的全局正则：g=全局匹配所有项，i=忽略大小写
    const matchRegex = new RegExp(keyword, 'gi');
    if (matchRegex.test(currentHtml)) {
      // 替换所有匹配的关键词
      currentHtml = currentHtml.replace(matchRegex, '<a href="https://www.cdc.gov/">ALERT</a>');
      hasMatch = true;
    }
  });

  // 只有发生替换时，才更新元素并添加标记
  if (hasMatch) {
    element.innerHTML = currentHtml;
    // 克隆标记节点，避免原节点被多次移动
    element.appendChild(tagDiv.cloneNode(true));
  }
});

关键改动说明 #

• 用数组存储关键词，后续新增词汇只需往数组里添加即可，无需修改替换逻辑
• 使用RegExp的gi模式，确保匹配所有出现的关键词，且不区分大小写（适配网页中COVID-19、Covid等不同写法）
• 修复文本节点重复添加的问题：通过cloneNode(true)克隆标记元素，保证每个替换后的元素都能拥有独立的标记
• 优化性能：先统一检查所有关键词的匹配情况，再一次性更新元素HTML，避免多次操作DOM

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