文件名称:详解实现一个通用的“划词高亮”在线笔记功能
文件大小:677KB
文件格式:PDF
更新时间:2023-12-23 21:25:29
const dom highlight
1. 什么是“划词高亮”? 有些同学可能不太清楚“划词高亮”是指什么,下面就是一个典型的“划词高亮”: 上图的示例网站可以点击这里访问。用户选择一段文本(即划词),即会自动将这段选取的文本添加高亮背景,用户可以很方便地为网页添加在线笔记。 笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构,而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性,故拿出来和大家分享交流一下。 本文具体的核心代码已封装成独立库 web-highlighter,阅读中如有疑问可参考其中代码↓↓。 2. 实现“划词高亮”需要解决哪