如何实现浏览器同款文本高亮？解决跨标签文本匹配高亮难题

常规文本高亮方案仅能处理单个文本节点内的匹配，无法应对跨HTML标签的文本场景（例如 <b>abc</b>def 中的 cd，c 位于 <b> 节点内，d 位于外部）。浏览器原生搜索能实现这类跨节点高亮，核心是忽略DOM层级，基于连续文本内容进行匹配，以下是具体实现方案：

核心思路 #

1. 收集文本节点与字符映射：递归遍历目标容器，收集所有非空文本节点，同时构建每个字符对应的DOM节点和偏移量，拼接出完整的连续文本。
2. 查找匹配范围：基于完整文本查找所有关键词匹配的起始、结束索引。
3. 倒序处理匹配：从后往前处理每个匹配范围，避免DOM节点拆分导致的索引偏移；拆分对应文本节点，将匹配部分用高亮元素（如 <mark>）包裹。

纯JavaScript实现 #

function highlightAcrossElements(container, searchTerm) {
  if (!searchTerm.trim()) return;

  // 清除已有高亮
  const existingMarks = container.querySelectorAll('mark');
  existingMarks.forEach(mark => {
    const parent = mark.parentNode;
    parent.replaceChild(document.createTextNode(mark.textContent), mark);
    parent.normalize();
  });

  // 1. 收集文本节点与字符映射
  const textNodes = [];
  let fullText = '';
  const charToNodeMap = [];

  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      textNodes.push(node);
      const text = node.textContent;
      for (let i = 0; i < text.length; i++) {
        charToNodeMap.push({ node, offset: i });
      }
      fullText += text;
    } else {
      for (const child of node.childNodes) {
        traverse(child);
      }
    }
  }

  traverse(container);

  // 2. 查找所有匹配位置（支持不区分大小写，可修改正则参数）
  const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(escapedTerm, 'gi');
  let match;
  const matches = [];

  while ((match = regex.exec(fullText)) !== null) {
    matches.push({ start: match.index, end: match.index + match[0].length });
    // 避免零宽匹配导致的无限循环
    if (match[0].length === 0) regex.lastIndex++;
  }

  // 3. 倒序处理匹配，拆分节点并插入高亮
  for (let i = matches.length - 1; i >= 0; i--) {
    const { start, end } = matches[i];
    let currentStart = start;

    while (currentStart < end) {
      const { node, offset } = charToNodeMap[currentStart];
      const nodeText = node.textContent;
      // 计算当前节点中需处理的结束偏移
      const nodeEndOffset = Math.min(end - currentStart + offset, nodeText.length);
      const highlightText = nodeText.substring(offset, nodeEndOffset);

      // 拆分出高亮部分之前的文本节点（若存在）
      if (offset > 0) {
        node.splitText(offset);
      }

      // 拆分出高亮部分的节点
      const highlightNode = node.splitText(nodeEndOffset - offset);
      // 创建高亮元素
      const mark = document.createElement('mark');
      mark.textContent = highlightText;
      // 替换原节点为高亮元素
      node.parentNode.replaceChild(mark, node);

      currentStart += nodeEndOffset - offset;
    }
  }
}

// 使用示例
const targetContainer = document.getElementById('your-target-container');
highlightAcrossElements(targetContainer, 'cd');

React组件实现 #

import { useEffect, useRef } from 'react';

const HighlightAcrossTags = ({ children, searchTerm }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container || !searchTerm.trim()) return;

    // 清除已有高亮
    const existingMarks = container.querySelectorAll('mark');
    existingMarks.forEach(mark => {
      const parent = mark.parentNode;
      parent.replaceChild(document.createTextNode(mark.textContent), mark);
      parent.normalize();
    });

    // 收集文本节点与字符映射
    const textNodes = [];
    let fullText = '';
    const charToNodeMap = [];

    function traverse(node) {
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
        textNodes.push(node);
        const text = node.textContent;
        for (let i = 0; i < text.length; i++) {
          charToNodeMap.push({ node, offset: i });
        }
        fullText += text;
      } else {
        for (const child of node.childNodes) {
          traverse(child);
        }
      }
    }

    traverse(container);

    // 查找匹配位置
    const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const regex = new RegExp(escapedTerm, 'gi');
    let match;
    const matches = [];

    while ((match = regex.exec(fullText)) !== null) {
      matches.push({ start: match.index, end: match.index + match[0].length });
      if (match[0].length === 0) regex.lastIndex++;
    }

    // 倒序处理匹配
    for (let i = matches.length - 1; i >= 0; i--) {
      const { start, end } = matches[i];
      let currentStart = start;

      while (currentStart < end) {
        const { node, offset } = charToNodeMap[currentStart];
        const nodeText = node.textContent;
        const nodeEndOffset = Math.min(end - currentStart + offset, nodeText.length);
        const highlightText = nodeText.substring(offset, nodeEndOffset);

        if (offset > 0) node.splitText(offset);
        const highlightNode = node.splitText(nodeEndOffset - offset);
        
        const mark = document.createElement('mark');
        mark.textContent = highlightText;
        node.parentNode.replaceChild(mark, node);

        currentStart += nodeEndOffset - offset;
      }
    }

    // 清理函数：组件卸载或搜索词变化时移除高亮
    return () => {
      if (container) {
        const marks = container.querySelectorAll('mark');
        marks.forEach(mark => {
          const parent = mark.parentNode;
          parent.replaceChild(document.createTextNode(mark.textContent), mark);
          parent.normalize();
        });
      }
    };
  }, [searchTerm]);

  return <span ref={containerRef}>{children}</span>;
};

// 使用示例
// <HighlightAcrossTags searchTerm="cd">
//   <b>abc</b>def
// </HighlightAcrossTags>

注意事项 #

• 倒序处理：必须从后往前处理匹配范围，否则拆分节点会改变DOM结构，导致前面的索引偏移。
• 正则转义：对搜索关键词中的正则特殊字符进行转义，避免语法错误。
• 样式自定义：可以通过CSS修改 <mark> 元素的样式，例如：

  mark {
    background-color: #ffeb3b;
    color: #000;
    padding: 0 2px;
  }
  

• 性能优化：对于大型DOM结构，可限制遍历范围或添加防抖处理，避免频繁操作DOM。

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