1.什么是“突出文字”？

有些学生可能不知道“跨字突出”是什么意思。这里有一个典型的“跨字突出显示”:

上面显示的示例网站可以在这里访问。当用户选择一段文字(即划字)时，高亮显示的背景会自动添加到选择的文字中，用户可以轻松地在网页上添加在线笔记。

前段时间，笔者实现了一个针对线上业务的文字高亮备注功能，与内容结构不耦合。解耦意味着高亮功能不需要建立专门的页面DOM结构，高亮功能对业务几乎透明。这个功能的核心部分有很强的通用性和可移植性，我就分享给大家。

本文的具体核心代码已经打包成一个独立的图书馆网页-荧光笔。如果在阅读过程中有什么问题，可以参考里面的代码。

2.实现“突出文字”需要解决哪些问题？

实现“高亮字”在线记笔记功能，需要解决两个核心问题：

突出背景。即如何根据用户在网页上的选择给对应的文本添加高亮背景；突出显示区域的持续和恢复。即如何保存用户的高亮信息并在下次浏览时准确还原，否则下次打开页面时用户的高亮信息会丢失。一般来说，突出文字的业务需求端主要针对自己制作的内容，可以轻松控制网页上内容的布局和HTML标签。在这种情况下，处理高亮需求会更方便。毕竟可以根据高亮需求调整现有内容的HTML。

但笔者面临的情况是页面HTML排版结构复杂，无法推动业务按照高亮要求更改HTML。这也产生了一个更一般的解决方案的要求，目标是为任何内容“突出文字”，并支持在随后的访问中恢复突出状态，而不关注内容的组织结构。

下面具体说说如何解决以上两个核心问题。

3.如何“突出背景”？

根据动画演示，我们可以知道在用户选择了某一段文字后(以下简称“用户选择区”)，我们会给这段文字添加一个高亮的背景。

例如，用户选择上面图片中的文本(即蓝色部分)。突出它的基本思想如下：

获取选择的文本节点：通过用户选择的区域的信息获取所有选择的文本节点；向文本节点添加背景色：用具有指定背景色的新元素层包装这些文本节点。3.1.如何获取选中的文本节点？

1)选择应用编程接口

我们需要基于浏览器的选择应用编程接口。它的兼容性还不错。如果您想支持较旧的浏览器，Polyfill是必需的。

选择API可以返回一系列关于用户选择的信息。那么你能直接通过它得到选择中所有的DOM元素吗？

很遗憾，我不能。但幸运的是，它可以返回选择的第一个和最后一个节点信息：

const range=window.getSelection()。getRangeAt(0)；const start={ node : range . start container，offset : range . start offset }；const end={ node : range . end container，offset : range . endoffset }；Range对象包含选择的开始和结束信息，包括节点和文本偏移。不用说，这里解释一下offset是什么意思：比如标签p是一段文字/p的例子，用户选择的部分是“一段文字”。此时，开始和结束节点都是p元素中的Text Node，startOffset和endOffset分别是2和6。

2)拆分第一个和最后一个文本节点

理解了偏移的概念之后，自然会发现有一个问题需要解决。由于用户选择可能只包含文本节点的一部分(即偏移量不为0)，我们只希望最终获得用户选择中包含的节点中的第一个和最后一个文本节点的这一“部分”。要解决这个问题，我们可以用。拆分文本()以拆分文本节点：

//第一个节点if(cur node==$ start node){ if(cur node。nodetype===3) {curnode。split text(start offset)；const node=curNode.nextSiblingselectedNodes.push(节点)；} }//尾节点if(cur node==$ end node){ if(cur node . nodetype===3){ const node=cur node；node . splittext(endofset)；选择节点。按(点头