如何为DOM元素中指定文本添加<span>标签，规避textContent/innerHTML解析异常？

你遇到的问题很典型——直接用innerHTML替换会误改元素属性里的内容（比如链接的href），用textContent又无法插入样式标签。下面提供一个安全的解决方案，通过操作DOM文本节点来实现精准高亮，不会破坏原有页面结构。

解决方案代码 #

function highlightText(element, searchText) {
  const regEx = new RegExp(searchText, "ig");
  // 倒序遍历子节点，避免替换节点时索引混乱
  for (let i = element.childNodes.length - 1; i >= 0; i--) {
    const node = element.childNodes[i];
    
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      const fragments = [];
      let lastIndex = 0;
      let match;

      // 拆分文本，插入高亮标签
      while ((match = regEx.exec(text)) !== null) {
        // 添加匹配前的普通文本
        if (match.index > lastIndex) {
          fragments.push(document.createTextNode(text.slice(lastIndex, match.index)));
        }
        // 创建带样式的span节点
        const highlightSpan = document.createElement('span');
        highlightSpan.className = 'red';
        highlightSpan.textContent = match[0]; // 保留原文本大小写
        fragments.push(highlightSpan);
        
        lastIndex = regEx.lastIndex;
      }

      // 添加剩余的普通文本
      if (lastIndex < text.length) {
        fragments.push(document.createTextNode(text.slice(lastIndex)));
      }

      // 替换原文本节点
      if (fragments.length > 0) {
        node.replaceWith(...fragments);
      }
    } 
    // 递归处理子元素，跳过不需要处理的标签
    else if (node.nodeType === Node.ELEMENT_NODE) {
      if (!['SCRIPT', 'STYLE', 'TITLE'].includes(node.tagName)) {
        highlightText(node, searchText);
      }
    }
  }
}

// 调用示例
const items = document.querySelectorAll('.item span');
const searchedText = 'apple';
items.forEach(item => highlightText(item, searchedText));

关键优势说明 #

• 精准操作文本节点：只修改纯文本内容，完全不会触碰元素的属性（比如href里的字符串不会被误替换）
• 保留原文本格式：用匹配到的match[0]赋值，保留原文本的大小写，避免强制统一为searchedText的格式
• 不破坏原有结构：递归处理嵌套元素，但跳过script、style这类不需要高亮的标签，保证页面功能正常

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