如何用JS实现“划词高亮标记”的在线笔记功能？

例如用户选择了上图中的文本（即蓝色部分）。为其加高亮的基本思路如下：

获取选中的文本节点：通过用户选择的区域信息，获取所有被选中的所有文本节点；

为文本节点添加背景色：给这些文本节点包裹一层新的元素，该元素具有指定的背景颜色。

3.1. 如何获取选中的文本节点？

1）Selection API

需要基于浏览器为我们提供的 Selection API 。它的兼容性还不错。如果要支持更低版本的浏览器则需要用 polyfill。

Selection API 可以返回一系列关于用户选区的信息。那么是不是可以通过它直接获取选取中的所有 DOM 元素呢？

很遗憾并不能。但好在它可以返回选区的首尾节点信息：

1. const range = window.getSelection().getRangeAt(0);

2. const start = {

3. node: range.startContainer,

4. offset: range.startOffset

5. };

6. const end = {

7. node: range.endContainer,

8. offset: range.endOffset

9. };

Range 对象包含了选区的开始与结束信息，其中包括节点（node）与文本偏移量（offset）。节点信息不用多说，这里解释一下 offset 是指什么：例如，标签

这是一段文本的示例

，用户选取的部分是“一段文本”这四个字，这时首尾的 node 均为 p 元素内的文本节点（Text Node），而 startOffset 和 endOffset 分别为 2 和 6。

2）首尾文本节点拆分

理解了 offset 的概念后，自然就发现有个问题需要解决。由于用户选区（selection）可能只包含一个文本节点的一部分（即 offset 不为 0），所以我们最后得到的用户选区所包含的节点里，也只希望有首尾文本节点的这“一部分”。对此，我们可以使用 .splitText() 拆分文本节点：

1. // 首节点

2. if (curNode === $startNode) {

3. if (curNode.nodeType === 3) {

4. curNode.splitText(startOffset);

5. const node = curNode.nextSibling;

6. selectedNodes.push(node);

7. }

8. }

10. // 尾节点

11. if (curNode === $endNode) {

12. if (curNode.nodeType === 3) {

13. const node = curNode;

14. node.splitText(endOffset);

15. selectedNodes.push(node);

16. }

17. }

以上代码会依据 offset 对文本节点进行拆分。对于开始节点，只需要收集它的后半部分；而对于结束节点则是前半部分。

3）遍历 DOM 树

到目前为止，我们准确找到了首尾节点，所以下一步就是找出“中间”所有的文本节点。这就需要遍历 DOM 树。

“中间”加上引号是因为，在视觉上这些节点是位于首尾之间的，但由于 DOM 不是线性结构而是树形结构，所以这个“中间”换成程序语言，就是指深度优先遍历时，位于首尾两节点之间的所有文本节点。DFS 的方法有很多，可以递归，也可以用栈+循环，这里就不赘述了。

需要提一下的是，由于我们是要为文本节点添加高亮背景，因此在遍历时只会收集文本节点。

1. if (curNode.nodeType === 3) {

2. selectedNodes.push(curNode);

3. }

3.2. 如何为文本节点添加背景色？

这一步本身并不困难。在上一步的基础上，我们已经选出了所有被用户选中的 文本节点（包括拆分后的首尾节点）。对此，一个最直接的方法就是为其“包裹上”一个带背景样式的元素。

具体的，我们可以给每个文本节点外加上一个 class 为 highlight 的 元素；而背景样式则通过 CSS .highlight 选择器设置。

1. // 使用上一步中封装的方法获取选区内的文本节点

2. const nodes = getSelectedNodes(start, end);

4. nodes.forEach(node => {

5. const wrap = document.createElement(‘span’);

6. wrap.setAttribute(‘class’, ‘highlight’);

7. wrap.appendChild(node.cloneNode(false));

8. node.parentNode.replaceChild(wrap);

9. });

1. .highlight {

2. background: #ff9;

3. }

这样就可以给被选中的文字添加一个“永久”的高亮背景了。

p.s. 选区的重合问题

然而，文本高亮里还有一个比较棘手的需求 —— 高亮区域的重合。举个例子，最开始的演示图（下图）里，第一个高亮区域和第二个高亮区域之间存在重叠部分，即“本区域高”四个字。

这个问题目前来看似乎还不是问题，但在结合下面要提到的一些功能与需求时，就会变成非常麻烦，甚至无法正常运行（一些开源库这块处理也不尽如人意，这也是没有选择它们的一个原因）。这里简单提一下，具体的情况我会放到后续对应的地方再详细说。

4. 如何实现高亮选区的持久化与还原？

到目前我们已经可以给选中的文本添加高亮背景了。但还有一个大问题：

想象一下，用户辛辛苦苦划了很多重点（高亮），开心地退出页面后，下次访问时发现这些都不能保存时，该有多么得沮丧。因此，如果只是在页面上做“一次性”的文本高亮，那它的使用价值会大大降低。这也就促使我们的“划词高亮”功能要能够保存（持久化）这些高亮选区并正确还原。

持久化高亮选区的核心是找到一种合适的 DOM 节点序列化方法。

通过第三部分可以知道，当确定了首尾节点与文本偏移（offset）信息后，即可为其间文本节点添加背景色。其中，offset 是数值类型，要在服务器保存它自然没有问题；但是 DOM 节点不同，在浏览器中保存它只需要赋值给一个变量，但想在后端保存所谓的 DOM 则不那么直接了。

4.1 序列化 DOM 节点标识

所以这里的核心点就是找到一种方法，能够定位 DOM 节点，同时可以被保存成普通的 JSON Object，用以传给后端保存，这个过程在本文中被称为 DOM 标识 的“序列化”。而下次用户访问时，又可以从后端取回，然后“反序列化”为对应的 DOM 节点。

有几种常见的方式来标识 DOM 节点：

使用 xPath

使用 CSS Selector 语法

使用 tagName + index

这里选择了使用第三种方式来快速实现。需要注意一点，我们通过 Selection API 取到的首尾节点一般是文本节点，而这里要记录的 tagName 和 index 都是该文本节点的父元素节点（Element Node）的，而 childIndex 表示该文本节点是其父亲的第几个儿子：

1. function serialize(textNode, root = document) {

2. const node = textNode.parentElement;

3. let childIndex = -1;

4. for (let i = 0; i < node.childNodes.length; i++) {

5. if (textNode === node.childNodes[i]) {

6. childIndex = i;

7. break;

8. }

9. }

11. const tagName = node.tagName;

12. const list = root.getElementsByTagName(tagName);

13. for (let index = 0; index < list.length; index++) {

14. if (node === list[index]) {

15. return {tagName, index, childIndex};

16. }

17. }

18. return {tagName, index: -1, childIndex};

19. }

通过该方法返回的信息，再加上 offset 信息，即定位选取的起始位置，同时也完全可发送给后端进行保存了。

4.2 反序列化 DOM 节点

基于上一节的序列化方法，从后端获取到数据后，可以很容易反序列化为 DOM 节点：

1. function deSerialize(meta, root = document) {

2. const {tagName, index, childIndex} = meta;

3. const parent = root.getElementsByTagName(tagName)[index];

4. return parent.childNodes[childIndex];

5. }

至此，我们大体已经解决了两个核心问题，这似乎已经是一个可用版本了。但其实不然，根据实践经验，如果仅仅是上面这些处理，往往是无法应对实际需求的，存在一些“致命问题”。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

但不用灰心，下面会具体来说说所谓的“致命问题”是什么，而又是如何解决并实现一个线上业务可用的通用“划词高亮”功能的。

5. 如何实现一个生产环境可用的“划词高亮”？

1）上面的方案有什么问题？

首先来看看上面的方案会有什么问题。

当我们需要高亮文本时，会为文本节点包裹span元素，这就改动了页面的 DOM 结构。它可能会导致后续高亮的首尾节点与其 offset 信息其实是基于被改动后的 DOM 结构的。带来的结果有两个：

下次访问时，程序必须按上次用户高亮的顺序还原。

用户不能随意取消（删除）高亮区域，只能按添加顺序从后往前删。

否则，就会有部分的高亮选区在还原时无法定位到正确的元素。

文字可能不好理解，下面我举个例子来直观解释下这个问题。

1.  

2. 非常高兴今天能够在这里和大家分享一下文本高亮（在线笔记）的实现方式。

3.  

对于上面这段 HTML，用户分别按顺序高亮了两个部分：“高兴”和“文本高亮”。那么按照上面的实现方式，这段 HTML 变成了下面这样：

1.  

2. 非常

3. 高兴

4. 今天能够在这里和大家分享一下

5. 文本高亮

6. （在线笔记）的实现方式。

7.  

对应的两个序列化数据分别为：

1. // “高兴”两个字被高亮时获取的序列化信息

2. {

3. start: {

4. tagName: ‘p’,

5. index: 0,

6. childIndex: 0,

7. offset: 2

8. },

9. end: {

10. tagName: ‘p’,

11. index: 0,

12. childIndex: 0,

13. offset: 4

14. }

15. }

1. // “文本高亮”四个字被高亮时获取的序列化信息。

2. // 这时候由于p下面已经存在了一个高亮信息（即“高兴”）。

3. // 所以其内部 HTML 结构已被修改，直观来说就是 childNodes 改变了。

4. // 进而，childIndex属性由于前一个 span 元素的加入，变为了 2。

5. {

6. start: {

7. tagName: ‘p’,

8. index: 0,

9. childIndex: 2,

10. offset: 14

11. },

12. end: {

13. tagName: ‘p’,

14. index: 0,

15. childIndex: 2,

16. offset: 18

17. }

18. }

可以看到，“文本高亮”这四个字的首尾节点的 childIndex 都被记为 2，这是由于前一个高亮区域改变了

元素下的DOM结构。如果此时“高兴”选区的高亮被用户取消，那么下次再访问页面就无法还原高亮了 —— “高兴”选区的高亮被取消了，

下自然就不会出现第三个 childNode，那么 childIndex 为 2 就找不到对应的节点了。这就导致存储的数据在还原高亮选区时出现问题。

此外，还记得在第三部分末尾提到的高亮选取重合问题么？支持选取重合很容易出现如下的包裹元素嵌套情况：

1.  

2. 非常

3. 高兴

4. 今天能够在这里和大家分享一下

6. 文本

7. 高亮

9. （在线笔记）的实现方式。

10.  

这也使得某个文本区域经过多次高亮、取消高亮后，会出现与原 HTML 页面不同的复杂嵌套结构。可以预见，当我们使用 xpath 或 CSS selector 作为 DOM 标识时，上面提到的问题也会出现，同时也使其他需求的实现更加复杂。

到这里可以提一下其他开源库或产品是如何处理选区重合问题的：

开源库 Rangy 有一个 Highlighter 模块可以实现文本高亮，但其对于选区重合的情况是将两个选区直接合并了，这是不合符我们业务需求的。

付费产品 Diigo 直接不允许选区的重合。

Medium.com 是支持选区重合的，体验非常不错，这也是我们产品的目标。但它页面的内容区结构相较我面对的情况会更简单与更可控。

所以如何解决这些问题呢？

2）另一种序列化 / 反序列化方式

我会对第四部分提到的序列化方式进行改进。仍然记录文本节点的父节点 tagName 与 index，但不再记录文本节点在 childNodes 中的 index 与 offset，而是记录开始（结束）位置在整个父元素节点中的文本偏移量。

例如下面这段 HTML：

1.  

2. 非常

3. 高兴

4. 今天能够在这里和大家分享一下

5. 文本高亮

6. （在线笔记）的实现方式。

7.  

对于“文本高亮”这个高亮选区，之前用于标识文本起始位置的信息为childIndex = 2, offset = 14。而现在变为offset = 18（从

元素下第一个文本“非”开始计算，经过18个字符后是“文”）。可以看出，这样表示的优点是，不管

内部原有的文本节点被（包裹）节点如何分割，都不会影响高亮选区还原时的节点定位。

据此，在序列化时，我们需要一个方法来将文本节点内偏移量“翻译”为其对应的父节点内部的总体文本偏移量：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取

效又漫长，而且极易碰到天花板技术停滞不前！**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Dzm4cK1w-1713766775181)]

[外链图片转存中…(img-2c7QLDLw-1713766775182)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-Rvt1nw75-1713766775182)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-uwd8mqNY-1713766775183)]

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往免费获取