CSS Highlight API搜索高亮仅Test1生效，其他测试页失效求助

核心问题定位 #

切换测试页面后，页面内容已更新，但高亮逻辑未重新执行，导致新内容无法被高亮。

修改方案（仅修改最后一段脚本） #

将高亮逻辑封装为可复用函数，同时监听页面切换的触发事件（或DOM内容变化），确保内容更新后自动重新执行高亮：

// 封装高亮逻辑为可复用函数
function applySearchHighlight() {
  // --- 保留你原有的高亮实现代码 ---
  const searchTerm = document.getElementById('search-input')?.value.trim() || '';
  
  // 清除旧高亮
  if (window.searchHighlight) {
    CSS.highlights.delete(window.searchHighlight);
    window.searchHighlight = null;
  }
  
  if (!searchTerm) return;
  
  // 遍历当前页面的文本节点，收集匹配的Range
  const ranges = [];
  const contentContainer = document.querySelector('.active-test-content'); // 替换为实际的当前测试内容容器选择器
  if (!contentContainer) return;
  
  const textWalker = document.createTreeWalker(contentContainer, NodeFilter.SHOW_TEXT);
  let textNode;
  while (textNode = textWalker.nextNode()) {
    let matchIndex = textNode.textContent.indexOf(searchTerm);
    while (matchIndex !== -1) {
      const range = document.createRange();
      range.setStart(textNode, matchIndex);
      range.setEnd(textNode, matchIndex + searchTerm.length);
      ranges.push(range);
      matchIndex = textNode.textContent.indexOf(searchTerm, matchIndex + searchTerm.length);
    }
  }
  
  // 应用新高亮
  window.searchHighlight = new Highlight(...ranges);
  CSS.highlights.set('search-highlight', window.searchHighlight);
}

// 初始加载+搜索输入变化时触发
applySearchHighlight();
document.getElementById('search-input')?.addEventListener('input', applySearchHighlight);

// 监听页面切换：根据实际切换方式选择其一
// 方式1：如果是点击切换标签（假设标签类为test-tab）
document.querySelectorAll('.test-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // 延迟执行确保DOM更新完成
    setTimeout(applySearchHighlight, 0);
  });
});

// 方式2：如果是动态DOM更新（监听内容容器变化）
const contentParent = document.querySelector('.test-pages-container'); // 替换为测试页面的父容器
if (contentParent) {
  new MutationObserver(applySearchHighlight).observe(contentParent, {
    childList: true,
    subtree: true
  });
}

关键说明 #

1. 封装高亮函数后，可在多个场景（初始加载、搜索输入、页面切换）复用
2. 若切换是点击标签触发，用setTimeout规避DOM更新的异步问题
3. 若内容是动态渲染，用MutationObserver自动监听DOM变化，无需手动绑定点击事件

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