前提是有明确引用锚点，如[1]或id="ref-1"；需用querySelectorAll定位引用节点，提取编号后匹配文献段落并添加highlighted-citation类；禁止innerHTML替换，应使用Range+mark元素精确包裹文本节点。
用 document.querySelectorAll 定位引用标记再匹配文献段落
动态高亮的前提是页面里已有明确的引用锚点，比如 [1]、(Smith, 2023) 或者带 id 的 元素。浏览器不识别“参考文献”语义，必须靠你能控制的结构线索来触发匹配。
常见错误是直接对所有 p 或 div 做全文关键词搜索——这会误标（比如正文里出现“[3]”但并非引用）、漏标（如换行或空格导致正则失效）、卡顿（大段文本反复 indexOf）。
推荐做法：
- 先用
document.querySelectorAll('sup[id^="ref-"], .citation')拿到所有可点击/可悬停的引用节点 - 从每个节点的
textContent提取编号或作者年份，例如node.textContent.trim().replace(/[\[\]\(\)]/g, '') - 再查文献列表中对应
id="ref-1"或data-cite="smith2023"的目标段落 - 匹配成功后给目标段落加临时 class，比如
element.classList.add('highlighted-citation')
避免用 innerHTML 插入高亮标签破坏 DOM 结构
很多教程教人用 str.replace(/(xxx)/g, '$1') 再赋回 innerHTML，这在学术文献场景极危险：原始段落可能含 MathML、LaTeX 渲染容器（如 ）、或 Zotero 插件注入的元数据 data-zotero- 属性——innerHTML 一刷全丢。
正确路径是操作 DOM 节点本身：
- 用
Range+SelectionAPI 精确包裹文本节点，再用document.createElement('mark')包裹，保持父节点结构不变 - 如果段落已由 CSL 编辑器或 Pandoc 渲染，优先监听其输出完成事件（如
csleditor:rendered），再执行高亮，避免操作未就绪的 fragment - 对含 DOI 链接的文献条目，不要高亮整个
a[href^="https://doi.org"]，只高亮文字部分，否则鼠标悬停会触发两次 click
CSS :target 能解决基础跳转高亮，但不适用于多选/悬停/持久化
如果只是点引用跳到文献并短暂高亮，:target 最轻量：#ref-5 { background-color: #fff9c4; }。但它有硬限制：
- 一次只能作用于一个
id，无法同时高亮多个被引段落 - 无交互反馈——用户悬停引用号时不能预览对应文献位置
- 刷新页面后高亮消失，不支持“保留当前所有高亮状态”的协作阅读场景
- 若文献块用了
display: contents或被 Shadow DOM 封装，:target失效
这时候就得上 JS：监听 click 和 mouseenter，用 scrollIntoView({ block: 'center' }) 定位，再结合 getBoundingClientRect() 判断是否在视口内决定是否触发高亮。
兼容 Zotero / Obsidian 双向链接需绕过其 DOM 隔离机制
InLine 或 Obsidian Web Export 生成的页面常把文献块包裹在自定义元素里，比如 querySelector 默认查不到。
应对方式：
- 检查是否启用
customElements.define注册，若有，等customElements.whenDefined('zotero-bibliography')完成后再查询 - 用
document.querySelectorAll('*')配合node.tagName.toLowerCase().includes('zotero')做兜底扫描（性能差但有效） - 若文献内容是通过
shadowRoot渲染的，必须用element.shadowRoot.querySelector('#ref-2')，普通querySelector查不到内部 - Zotero 6+ 默认启用
slot投影，高亮前先确认目标文本是否在mark标签会被 slot 机制吞掉
真正难的不是高亮动作本身，而是判断“这段文字到底算不算被当前引用所指涉”——这需要你提前约定好引用与文献之间的 ID 映射规则，而不是指望 JS 自动语义理解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
