总体思路:获取目标文本,添加高亮样式。 获取目标文本可以通过
- 遍历 DOM,正则匹配
window.getSelection
方法
一、通过 CSS 样式
场景
- 适合简单场景
思路
- 将目标文本用
<span>
标签包裹,并添加特定的class
二、正则匹配高亮
场景
- 搜索高亮
思路
- 遍历 DOM 树(TreeWalker API),使用正则匹配目标文本
- 将目标文本用
<span>
标签包裹,并添加特定的class
- 更新 DOM
示例
三、使用 Range API 自定义高亮
场景
- 高度自定义场景,例如选择文本弹出自定义面板
思路
- 遍历 DOM 树,