如何禁用Chrome查找功能匹配position: fixed的Toc元素文本？

要让Chrome的页面查找功能忽略固定定位的TOC元素，优先用JavaScript实现的方案如下：

核心思路 #

Chrome的查找功能只会匹配DOM中实际存在的文本节点，我们可以通过替换TOC内的文本节点，用CSS伪元素来显示文本，让查找功能"看不到"这些内容，同时不影响视觉展示和交互。

实现步骤 #

1. JavaScript代码（假设你的TOC元素id为toc）：

const toc = document.getElementById('toc');

function replaceTextNodes(element) {
  Array.from(element.childNodes).forEach(node => {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      const span = document.createElement('span');
      span.dataset.text = node.textContent;
      span.style.display = 'inline';
      span.style.setProperty('--text', `"${node.textContent}"`);
      node.replaceWith(span);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      replaceTextNodes(node);
    }
  });
}

replaceTextNodes(toc);

2. 配套CSS：

#toc span[data-text]::after {
  content: var(--text);
}

效果说明 #

• 替换后，TOC的文本通过CSS伪元素渲染，DOM中不存在对应的文本节点，Chrome查找功能无法匹配这些内容。
• 完全保留TOC的视觉样式和点击跳转等交互功能。
• 如果TOC是动态生成的，只需在生成完成后调用replaceTextNodes(toc)即可。

内容的提问来源于stack exchange，提问作者Nor.Z