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

使用 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 结构的。带来的结果有两个：

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

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

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

文字可能不好理解，