如何高亮HTML元素文本且保留内部HTML结构？

你的问题根源在于直接通过element.textContent提取文本后覆盖innerHTML——这会彻底丢弃目标元素的所有子元素HTML结构。正确的做法是仅遍历并修改文本节点，完全不触碰元素节点，以此保留原有DOM层级。

实现思路 #

1. 递归遍历目标元素的所有子节点，区分文本节点与元素节点
2. 仅对文本节点做处理：若文本包含需高亮内容，将匹配片段拆分为独立的<mark>元素，替换原文本节点的对应部分
3. 对元素节点继续递归处理其子节点，确保嵌套结构中的深层文本也能被高亮

完整代码示例 #

const buttonEl = `<button>
  <span>
    Icon
  </span>
  Text
</button>
`;

document.body.innerHTML = buttonEl;

const foundButtonEl = document.querySelector("button");
const elements = [foundButtonEl];

function highlightTextNodes(node, text) {
  // 跳过无需处理的特殊元素
  if (node.nodeType === Node.ELEMENT_NODE && ['SCRIPT', 'STYLE'].includes(node.tagName)) {
    return;
  }

  // 处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    const textContent = node.textContent;
    const regex = new RegExp(`(${text})`, 'gi'); // 全局+不区分大小写，可按需调整
    const parts = textContent.split(regex);

    // 无匹配内容则直接返回
    if (parts.length === 1) return;

    // 用文档片段批量插入节点，减少DOM重排
    const fragment = document.createDocumentFragment();
    parts.forEach(part => {
      if (regex.test(part)) {
        const mark = document.createElement('mark');
        mark.textContent = part;
        fragment.appendChild(mark);
      } else {
        fragment.appendChild(document.createTextNode(part));
      }
    });

    // 替换原文本节点
    node.parentNode.replaceChild(fragment, node);
    return;
  }

  // 递归处理元素节点的子节点
  if (node.nodeType === Node.ELEMENT_NODE) {
    Array.from(node.childNodes).forEach(child => highlightTextNodes(child, text));
  }
}

function addHighlight(elements, text) {
  elements.forEach(element => highlightTextNodes(element, text));
}

addHighlight(elements, "T");

代码说明 #

• highlightTextNodes是核心处理函数：
  • 跳过script、style这类不需要处理的元素
  • 文本节点拆分后用文档片段批量插入，避免频繁DOM操作导致的性能问题
  • 对元素节点递归遍历，确保嵌套结构（比如示例中的<span>）完全保留
• 正则表达式的()捕获分组用于拆分文本时保留匹配内容，gi标志支持全局匹配和不区分大小写，可根据需求移除或修改

运行这段代码后，<span>标签会完整保留，同时"Text"中的"T"会被<mark>标签包裹实现高亮。

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