扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了js如何实现一个通用的“划词高亮”在线笔记功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1. 什么是“划词高亮”？
有些同学可能不太清楚“划词高亮”是指什么，下面就是一个典型的“划词高亮”：
上图的示例网站可以点击这里访问。用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。
笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性，故拿出来和大家分享交流一下。
本文具体的核心代码已封装成独立库 web-highlighter，阅读中如有疑问可参考其中代码↓↓。
2. 实现“划词高亮”需要解决哪些问题？
实现一个“划词高亮”的在线笔记功能需要解决的核心问题有两个：
加高亮背景。即如何根据用户在网页上的选取，为相应的文本添加高亮背景；
高亮区域的持久化与还原。即如何保存用户高亮信息，并在下次浏览时准确还原，否则下次打开页面用户高亮的信息就丢失了。
一般来说，划词高亮的业务需求方主要是针对自己产出的内容，你可以比较容易对内容在网页上的排版、HTML 标签等方面进行控制。这种情况下，处理高亮需求会更方便一些，毕竟自己可以根据高亮需求调整现有内容的 HTML。
而笔者面对的情况是，页面 HTML 排版结构复杂，且无法根据高亮需求来推动业务改动 HTML。这也催生出了对解决方案更通用化的要求，目标就是：针对任意内容均可“划词高亮”并支持后续访问时还原高亮状态，而不用去关心内容的组织结构。
下面就来具体说说，如何解决上面的两个核心问题。
3. 如何“加高亮背景”？
根据动图演示我们可以知道，用户选择某一段文本（下文称为“用户选区”）后，我们会给这段文本加一个高亮背景。
例如用户选择了上图中的文本（即蓝色部分）。为其加高亮的基本思路如下：
获取选中的文本节点：通过用户选择的区域信息，获取所有被选中的所有文本节点；
为文本节点添加背景色：给这些文本节点包裹一层新的元素，该元素具有指定的背景颜色。
3.1. 如何获取选中的文本节点？
1）Selection API
需要基于浏览器为我们提供的 Selection API 。它的兼容性还不错。如果要支持更低版本的浏览器则需要用 polyfill。
Selection API 可以返回一系列关于用户选区的信息。那么是不是可以通过它直接获取选取中的所有 DOM 元素呢？
很遗憾并不能。但好在它可以返回选区的首尾节点信息：
const range = window.getSelection().getRangeAt(0);
const start = {
node: range.startContainer,
offset: range.startOffset
};
const end = {
node: range.endContainer,
offset: range.endOffset
};Range 对象包含了选区的开始与结束信息，其中包括节点（node）与文本偏移量（offset）。节点信息不用多说，这里解释一下 offset 是指什么：例如，标签
这是一段文本的示例
，用户选取的部分是“一段文本”这四个字，这时首尾的 node 均为 p 元素内的文本节点（Text Node），而 startOffset 和 endOffset 分别为 2 和 6。2）首尾文本节点拆分
理解了 offset 的概念后，自然就发现有个问题需要解决。由于用户选区（selection）可能只包含一个文本节点的一部分（即 offset 不为 0），所以我们最后得到的用户选区所包含的节点里，也只希望有首尾文本节点的这“一部分”。对此，我们可以使用 .splitText() 拆分文本节点：
// 首节点
if (curNode === $startNode) {
if (curNode.nodeType === 3) {
curNode.splitText(startOffset);
const node = curNode.nextSibling;
selectedNodes.push(node);
}
}
// 尾节点
if (curNode === $endNode) {
if (curNode.nodeType === 3) {
const node = curNode;
node.splitText(endOffset);
selectedNodes.push(node);
}
}以上代码会依据 offset 对文本节点进行拆分。对于开始节点，只需要收集它的后半部分；而对于结束节点则是前半部分。
3）遍历 DOM 树
到目前为止，我们准确找到了首尾节点，所以下一步就是找出“中间”所有的文本节点。这就需要遍历 DOM 树。
“中间”加上引号是因为，在视觉上这些节点是位于首尾之间的，但由于 DOM 不是线性结构而是树形结构，所以这个“中间”换成程序语言，就是指深度优先遍历时，位于首尾两节点之间的所有文本节点。DFS 的方法有很多，可以递归，也可以用栈+循环，这里就不赘述了。
需要提一下的是，由于我们是要为文本节点添加高亮背景，因此在遍历时只会收集文本节点。
if (curNode.nodeType === 3) {
selectedNodes.push(curNode);
}3.2. 如何为文本节点添加背景色？
这一步本身并不困难。在上一步的基础上，我们已经选出了所有被用户选中的 文本节点（包括拆分后的首尾节点）。对此，一个最直接的方法就是为其“包裹上”一个带背景样式的元素。
具体的，我们可以给每个文本节点外加上一个 class 为 highlight 的 元素；而背景样式则通过 CSS .highlight 选择器设置。
// 使用上一步中封装的方法获取选区内的文本节点
const nodes = getSelectedNodes(start, end);
nodes.forEach(node => {
const wrap = document.createElement('span');
wrap.setAttribute('class', 'highlight');
wrap.appendChild(node.cloneNode(false));
node.parentNode.replaceChild(wrap);
});.highlight {
background: #ff9;
}这样就可以给被选中的文字添加一个“永久”的高亮背景了。
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 表示该文本节点是其父亲的第几个儿子：
function serialize(textNode, root = document) {
const node = textNode.parentElement;
let childIndex = -1;
for (let i = 0; i < node.childNodes.length; i++) {
if (textNode === node.childNodes[i]) {
childIndex = i;
break;
}
}
const tagName = node.tagName;
const list = root.getElementsByTagName(tagName);
for (let index = 0; index < list.length; index++) {
if (node === list[index]) {
return {tagName, index, childIndex};
}
}
return {tagName, index: -1, childIndex};
}通过该方法返回的信息，再加上 offset 信息，即定位选取的起始位置，同时也完全可发送给后端进行保存了。
4.2 反序列化 DOM 节点
基于上一节的序列化方法，从后端获取到数据后，可以很容易反序列化为 DOM 节点：
function deSerialize(meta, root = document) {
const {tagName, index, childIndex} = meta;
const parent = root.getElementsByTagName(tagName)[index];
return parent.childNodes[childIndex];
}至此，我们大体已经解决了两个核心问题，这似乎已经是一个可用版本了。但其实不然，根据实践经验，如果仅仅是上面这些处理，往往是无法应对实际需求的，存在一些“致命问题”。
但不用灰心，下面会具体来说说所谓的“致命问题”是什么，而又是如何解决并实现一个线上业务可用的通用“划词高亮”功能的。
5. 如何实现一个生产环境可用的“划词高亮”？
1）上面的方案有什么问题？
首先来看看上面的方案会有什么问题。
当我们需要高亮文本时，会为文本节点包裹span元素，这就改动了页面的 DOM 结构。它可能会导致后续高亮的首尾节点与其 offset 信息其实是基于被改动后的 DOM 结构的。带来的结果有两个：
下次访问时，程序必须按上次用户高亮的顺序还原。
用户不能随意取消（删除）高亮区域，只能按添加顺序从后往前删。
否则，就会有部分的高亮选区在还原时无法定位到正确的元素。
文字可能不好理解，下面我举个例子来直观解释下这个问题。
非常高兴今天能够在这里和大家分享一下文本高亮的实现方式。
对于上面这段 HTML，用户分别按顺序高亮了两个部分：“高兴”和“文本高亮”。那么按照上面的实现方式，这段 HTML 变成了下面这样：