如何实现一个通用的划词高亮在线笔记功能，使其支持长尾词高亮？

本文共计6154个文字，预计阅读时间需要25分钟。

1.+ 划词高亮是什么？有些同学可能不太清楚划词高亮是指什么，下面就是一个典型的划词高亮例子：[点击这里访问示例网站]。用户选择一段文本（即划词），系统就会自动将其高亮显示。

1. 什么是“划词高亮”？

有些同学可能不太清楚“划词高亮”是指什么，下面就是一个典型的“划词高亮”：

上图的示例网站可以点击这里访问。用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。

笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性，故拿出来和大家分享交流一下。

本文具体的核心代码已封装成独立库 web-highlighter，阅读中如有疑问可参考其中代码↓↓。

2. 实现“划词高亮”需要解决哪些问题？

实现一个“划词高亮”的在线笔记功能需要解决的核心问题有两个：

1. 加高亮背景。即如何根据用户在网页上的选取，为相应的文本添加高亮背景；
2. 高亮区域的持久化与还原。即如何保存用户高亮信息，并在下次浏览时准确还原，否则下次打开页面用户高亮的信息就丢失了。