如何批量修改字符串中多个指定单词的文本颜色？

核心思路 #

通过DOM树遍历仅处理纯文本节点，避免破坏已有HTML结构；使用正则匹配完整单词，将匹配到的关键词用带内联样式的<span>包裹，严格按照预设的关键词-颜色映射表设置颜色，无需手动添加标签。

解决代码 #

function highlightKeywords(targetSelector, colorMap) {
  // 转义正则特殊字符，避免关键词含特殊字符时匹配错误
  const escapeRegex = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  
  // 生成匹配完整单词的正则，支持不区分大小写（可根据需求移除'i'标志）
  const keywordList = Object.keys(colorMap).map(escapeRegex);
  const keywordRegex = new RegExp(`\\b(${keywordList.join('|')})\\b`, 'gi');
  
  // 获取所有目标元素（如p、div）
  const elements = document.querySelectorAll(targetSelector);
  
  elements.forEach(element => {
    // 创建DOM遍历器，仅处理纯文本节点，且跳过已有span内的文本
    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
      acceptNode: node => {
        if (node.parentNode.tagName === 'SPAN') {
          return NodeFilter.FILTER_REJECT;
        }
        return NodeFilter.FILTER_ACCEPT;
      }
    }, false);
    
    let textNode;
    while (textNode = walker.nextNode()) {
      const originalText = textNode.textContent;
      // 仅当文本包含关键词时才处理
      if (keywordRegex.test(originalText)) {
        // 替换匹配的关键词为带颜色的span
        const replacedHTML = originalText.replace(keywordRegex, match => {
          const lowerMatch = match.toLowerCase();
          const color = colorMap[lowerMatch];
          return color ? `<span style="color: ${color}">${match}</span>` : match;
        });
        
        // 创建临时容器处理替换后的HTML节点
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = replacedHTML;
        
        // 替换原文本节点为新生成的节点
        while (tempContainer.firstChild) {
          textNode.parentNode.insertBefore(tempContainer.firstChild, textNode);
        }
        textNode.parentNode.removeChild(textNode);
      }
    }
  });
}

// 使用示例
const keywordColorMap = {
  'he': 'green',
  'walked': 'red'
};

// 调用函数，处理页面中所有p和div标签
highlightKeywords('p, div', keywordColorMap);

关键特性说明 #

1. 不影响已有HTML结构：通过TreeWalker仅遍历纯文本节点，且过滤掉已有<span>内的文本，避免修改原有样式标签。
2. 精准匹配完整单词：使用\b正则单词边界，确保仅匹配独立单词（不会误匹配hello中的he）。
3. 颜色映射准确：严格按照预设的colorMap为对应关键词设置颜色，解决颜色匹配错误问题。
4. 自动批量处理：无需手动添加<span>，函数自动遍历目标元素内的所有文本完成替换。

注意事项 #

• 如果需要区分大小写，移除正则中的i标志，并确保colorMap的键与文本中关键词的大小写完全一致。
• 若关键词包含正则特殊字符（如.、$），代码中的escapeRegex函数会自动转义，避免匹配异常。
• 对于动态加载的内容，需在内容渲染完成后再调用highlightKeywords函数。
• 如需扩展样式（如加粗、背景色），可修改colorMap为样式对象，例如：

  const keywordStyleMap = {
    'he': { color: 'green', fontWeight: 'bold' },
    'walked': { color: 'red', backgroundColor: '#ffebee' }
  };
  

  并将替换逻辑改为生成对应的style属性字符串。

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