indexof 在 document.body.innerhtml 中搜不到中文或换行，是因为浏览器已将原始 html 解析并规范化：换行符被压缩为空格、连续空白合并、中文可能被转义为 中文，且标签自动闭合，导致字符串与渲染内容不一致。
为什么 indexOf 在 HTML 字符串里搜不到中文或换行？
直接对 document.body.innerHTML 调用 indexOf 搜中文、空格、换行，经常返回 -1——不是没匹配，而是 HTML 已被浏览器解析并规范化了：换行变为空格、连续空白压缩、某些标签自动闭合（如 <br> 变成 <br>），甚至 DOM 序列化时编码会把中文转成 中文 形式。
真正要搜的是「渲染后用户看到的内容」，不是原始 HTML 字符串。所以得走文本节点遍历：
- 用
document.createTreeWalker遍历所有Node.TEXT_NODE，跳过 script/style/comment - 对每个文本节点的
nodeValue做includes()或正则匹配 - 匹配成功后，用
node.parentElement定位到宿主元素，方便高亮或滚动
如何让搜索不卡住页面？避免阻塞主线程
全量遍历 DOM + 高亮操作在长页面（比如 10k+ 节点）下极易掉帧。关键不是“怎么快”，而是“怎么不卡”：
- 用
requestIdleCallback分片处理：每次只处理 200 个文本节点，留出空闲时间给渲染 - 禁用高亮的实时 DOM 修改：先收集所有匹配位置（
{node, offset, length}），再批量用Range+DocumentFragment插入<mark></mark> - 搜索输入加
debounce（300ms），但首次输入不防抖，避免延迟感知
示例节选：
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
let node;
while (node = walker.nextNode()) {
if (node.parentElement && ['SCRIPT', 'STYLE', 'COMMENT'].includes(node.parentElement.tagName)) continue;
if (node.nodeValue.includes(keyword)) {
results.push({ node, index: node.nodeValue.indexOf(keyword) });
}
}
getSelection().getRangeAt(0) 在 iframe 里失效怎么办？
如果页面含 iframe 且需跨 frame 搜索，document.getSelection() 默认只返回当前主文档的选区。iframe 内容是独立执行上下文：
- 必须显式获取 iframe 的
contentDocument，再调用其getSelection() - 注意同源限制：跨域 iframe 的
contentDocument为null，此时只能忽略或提示“该区域不可搜索” - 搜索结果高亮需分别在各 iframe 内创建
Range，不能用主文档的Range跨越边界
检查方式：iframeEl.contentDocument?.readyState === 'complete' 再操作，否则报错。
搜索高亮后，scrollIntoView 定位不准的常见原因
调用 element.scrollIntoView({ block: 'center' }) 后，目标常被 header 遮挡或偏移——这不是 API bug，而是 CSS 布局干扰：
-
position: sticky或fixed的导航栏会改变滚动容器的 offsetTop - 高亮用
<mark></mark>包裹后，元素高度可能因 line-height、padding 变化，导致计算偏移错位 - 正确做法：用
element.getBoundingClientRect().top + window.scrollY - 80（减去 header 高度）手动window.scrollTo
更稳妥的是监听 scroll 后延迟 16ms 再定位，避开样式重排未完成的时机。
真实项目里，DOM 结构嵌套深度、CSS 层叠、iframe 权限、文本节点归一化，这几个点只要漏掉一个，搜索就变成“看起来能跑，实际总差一点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
