如何不使用span等标签，通过JS高亮HTML搜索文本且不修改原HTML？

要实现不改动原有HTML文本的搜索高亮，推荐使用CSS自定义高亮API（Custom Highlight API），这是浏览器原生支持的方案，完全不需要修改DOM结构，只需要通过JS标记文本范围，再用CSS定义样式即可。

完整实现代码 #

HTML（示例结构）

<p>This is a paragraph with the word find me in it.</p>

CSS（定义高亮样式）

/* 通过自定义高亮名称绑定样式 */
::highlight(search-highlight) {
  background-color: #ffff00; /* 黄色高亮背景 */
  color: #000; /* 保持文本原色 */
}

JavaScript（搜索并标记高亮范围）

function highlightText(searchStr) {
  // 清除上一次的高亮，避免重复渲染
  if (window.highlightInstance) {
    CSS.highlights.delete(window.highlightInstance);
  }

  // 空搜索字符串直接返回
  if (!searchStr.trim()) return;

  // 选择要搜索的目标元素（这里选所有p标签，可按需调整）
  const targetElements = document.querySelectorAll('p');
  const matchRanges = [];

  targetElements.forEach(element => {
    // 获取元素内的文本节点
    const textNode = element.firstChild;
    if (textNode.nodeType !== Node.TEXT_NODE) return;

    const fullText = textNode.textContent;
    let currentPos = 0;
    let matchIndex;

    // 循环查找所有匹配的文本片段
    while ((matchIndex = fullText.indexOf(searchStr, currentPos)) !== -1) {
      // 创建Range对象定位匹配文本的精确位置
      const range = new Range();
      range.setStart(textNode, matchIndex);
      range.setEnd(textNode, matchIndex + searchStr.length);
      matchRanges.push(range);
      // 更新查找位置，避免重复匹配同一文本
      currentPos = matchIndex + searchStr.length;
    }
  });

  // 创建高亮实例并注册到浏览器
  window.highlightInstance = new Highlight(...matchRanges);
  CSS.highlights.set('search-highlight', window.highlightInstance);
}

// 调用示例：搜索"me"并高亮
highlightText('me');

方案说明 #

1. CSS部分：::highlight()伪元素是专门为自定义高亮设计的，通过指定的名称（这里是search-highlight）绑定样式，浏览器会自动对所有注册到该名称的文本范围应用样式。
2. JS部分：
   • 用Range对象精准定位文本中的匹配片段，该对象仅标记位置，不会修改原DOM的文本结构。
   • Highlight对象收集所有匹配的Range，再通过CSS.highlights注册，浏览器就会自动渲染高亮效果。
3. 兼容性：目前Chrome 105+、Edge 105+、Safari 17.1+都支持这个API；若需兼容旧浏览器，可考虑用背景渐变模拟（但仅支持单行文本，局限性较大）。

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