开篇
文本划线是目前逐步风行的一个性能，不论你是小说浏览网站，还是卖教程的的网站，个别都会有记笔记或者评论的性能，传统的做法都是在文章底部加一个评论区，长处是简略，对立，毛病是不不便对文章的某一段或一句话进行针对性的评论，所以呈现了划线及评论的需要，目前我见到的产品有划线性能的有：微信浏览 APP、极客工夫：
InfoQ 写作平台：
等等，这个性能看似简略，实际上难点还是很多的，比方如何高性能的对各种简单的文本构造划线、如何尽可能少的存储数据、如何精准的回显划线、如何解决反复划线、如何应答文本后续编辑的状况等等。
作为一个前端搬砖工，每当看到一个有意思的小性能时我都想本人去把它做进去，然而看了仅有的几篇相干文章之后，发现，不会😓，这些文章介绍的都只是一个大略思路，看完让人感觉如同会了，然而细想就会发现很多问题，只能去看源码，看源码总是费时的，还不肯定能看懂。想要实现一个生产可用的难度还是很大的，所以本文退而求其次，单纯的写一个 demo 开心开心。demo成果请点击：http://lxqnsys.com/#/demo/textUnderline。
总体思路
总体思路很简略，遍历选区内的所有文本，切割成单个字符，给每个字符都包裹上划线元素，反复划线的话就在最深层持续包裹，事件处理的话从最深的元素开始。
存储的形式是记录该划线文本外层第一个非划线元素的标签名和索引，以及字符在其内所有字符里总的偏移量。
回显的形式是获取到上述存储数据对应的元素，而后遍历该元素的字符增加划线元素。
实现
HTML 构造
<div class="article" ref="article"></div>文本内容就放在上述的 div 里，我从掘金小册里轻易筛选了一篇文章，把它的 html 构造一成不变的复制粘贴进去：
显示 tooltip
首先要做的是在选区上显示一个划线按钮，这个很简略，咱们监听一下 mouseup 事件，而后获取一下选区对象，调用它的 getBoundingClientRect 办法获取地位信息，而后设置到咱们的 tooltip 元素上：
document.addEventListener('mouseup', this.onMouseup)
onMouseup () {
// 获取 Selection 对象，外面可能蕴含多个 `ranges`（区域）let selObj = window.getSelection()
// 个别就只有一个 Range 对象
let range = selObj.getRangeAt(0)
// 如果选区起始地位和完结地位雷同，那代表没有选到任何货色
if (range.collapsed) {return}
this.range = range.cloneRange()
this.tipText = '划线'
this.setTip(range)
}
setTip (range) {let { left, top, width} = range.getBoundingClientRect()
this.tipLeft = left + (width - 80) / 2
this.tipTop = top - 40
this.showTip = true
}
划线
给 tooltip 绑定一下点击事件，点击后须要获取到选区内的所有文本节点，先看一下 Range 对象的构造：
简略介绍一下：
collapsed属性示意开始和完结的地位是否雷同；
commonAncestorContainer属性返回蕴含 startContainer 和endContainer的公共父节点；
endContainer属性返回蕴含 range 起点的节点，通常是文本节点；
endOffset返回 range 起点在 endContainer 内的地位的数字；
startContainer属性返回蕴含 range 终点的节点，通常是文本节点；
startContainer返回 range 终点在 startContainer 内的地位的数字；
所以指标是要遍历 startContainer 和endContainer两个节点之间的所有节点来收集文本节点，受限于笔者匮乏的算法和数据结构常识，只能抉择一个投机取巧的办法，遍历 commonAncestorContainer 节点，而后应用 range 对象的 isPointInRange() 办法来检测以后遍历的节点是否在选区范畴内，这个办法须要留神的两个点中央，一个是 isPointInRange() 办法目前不反对 IE，二是首尾节点须要独自解决，因为首尾节点可能局部在选区内，这样这个办法是返回false 的。
mark ()
this.textNodes = []
let {commonAncestorContainer, startContainer, endContainer} = this.range
this.walk(commonAncestorContainer, (node) => {
if (
node === startContainer ||
node === endContainer ||
this.range.isPointInRange(node, 0)
) {// 起始和完结节点，或者在范畴内的节点，如果是文本节点则收集起来
if (node.nodeType === 3) {this.textNodes.push(node)
}
}
})
this.handleTextNodes()
this.showTip = false
this.tipText = ''
}walk是一个深度优先遍历的函数：
walk (node, callback = () => {}) {callback(node)
if (node && node.childNodes) {for (let i = 0; i < node.childNodes.length; i++) {this.walk(node.childNodes[i], callback)
}
}
}获取到选区范畴内的所有文本节点后就能够切割字符进行元素替换：
handleTextNodes () {
// 生成本次的惟一 id
let id = ++this.idx
// 遍历文本节点
this.textNodes.forEach((node) => {
// 范畴的首尾元素须要判断一下偏移量，用来截取字符
let startOffset = 0
let endOffset = node.nodeValue.length
if (
node === this.range.startContainer &&
this.range.startOffset !== 0
) {startOffset = this.range.startOffset}
if (node === this.range.endContainer && this.range.endOffset !== 0) {endOffset = this.range.endOffset}
// 替换该文本节点
this.replaceTextNode(node, id, startOffset, endOffset)
})
// 序列化进行存储，获取刚刚生成的所有该 id 的划线元素
this.serialize(this.$refs.article.querySelectorAll('.mark_id_' + id))
}如果是首节点，且 startOffset 不为 0，那么 startOffset 之前的字符不须要增加划线包裹元素，如果是尾节点，且 endOffset 不为 0，那么 endOffset 之后的字符不须要划线，两头的其余所有文本都须要进行切割及划线：
replaceTextNode (node, id, startOffset, endOffset) {
// 创立一个文档片段用来替换文本节点
let fragment = document.createDocumentFragment()
let startNode = null
let endNode = null
// 截取前一段不须要划线的文本
if (startOffset !== 0) {
startNode = document.createTextNode(node.nodeValue.slice(0, startOffset)
)
}
// 截取后一段不须要划线的文本
if (endOffset !== 0) {endNode = document.createTextNode(node.nodeValue.slice(endOffset))
}
startNode && fragment.appendChild(startNode)
// 切割两头的所有文本
node.nodeValue
.slice(startOffset, endOffset)
.split('')
.forEach((text) => {
// 创立一个 span 标签用来作为划线包裹元素
let textNode = document.createElement('span')
textNode.className = 'markLine mark_id_' + id
textNode.setAttribute('data-id', id)
textNode.textContent = text
fragment.appendChild(textNode)
})
endNode && fragment.appendChild(endNode)
// 替换文本节点
node.parentNode.replaceChild(fragment, node)
}成果如下：
此时 html 构造：
序列化存储
一次性的划线是没啥用的，那还不如在文章下面盖一个 canvas 元素，给用户一个自在画布，所以还须要进行保留，下次关上还能从新显示之前画的线。
存储的要害是要能让下次还能定位回去，参考其余文章介绍的办法，本文抉择的是存储划线元素外层的第一个非划线元素的标签名，以及在指定节点范畴内的同类型元素里的索引，以及该字符在该非划线元素里的总的字符偏移量。形容起来可能有点绕，看代码：
serialize (markNodes) {
// 抉择 article 元素作为根元素，这样的益处是页面的其余构造如果扭转了不影响划线元素的定位
let root = this.$refs.article
// 遍历刚刚生成的本次划线的所有 span 节点
markNodes.forEach((markNode) => {
// 计算该字符离外层第一个非划线元素的总的文本偏移量
let offset = this.getTextOffset(markNode)
// 找到外层第一个非划线元素
let {tagName, index} = this.getWrapNode(markNode, root)
// 保留相干数据
this.serializeData.push({
tagName,
index,
offset,
id: markNode.getAttribute('data-id')
})
})
}计算字符离外层第一个非划线元素的总的文本偏移量的思路是先算获取同级下之前的兄弟元素的总字符数，再顺次向上遍历父元素及其之前的兄弟节点的总字符数，直到外层元素：
getTextOffset (node) {
let offset = 0
let parNode = node
// 遍历直到外层第一个非划线元素
while (parNode && parNode.classList.contains('markLine')) {
// 获取后面的兄弟元素的总字符数
offset += this.getPrevSiblingOffset(parNode)
parNode = parNode.parentNode
}
return offset
}获取后面的兄弟元素的总字符数：
getPrevSiblingOffset (node) {
let offset = 0
let prevNode = node.previousSibling
while (prevNode) {
offset +=
prevNode.nodeType === 3
? prevNode.nodeValue.length
: prevNode.textContent.length
prevNode = prevNode.previousSibling
}
return offset
}获取外层第一个非划线元素在下面获取字符数的办法里其实曾经有了：
getWrapNode (node, root) {
// 找到外层第一个非划线元素
let wrapNode = node.parentNode
while (wrapNode.classList.contains('markLine')) {wrapNode = wrapNode.parentNode}
let wrapNodeTagName = wrapNode.tagName
// 计算索引
let wrapNodeIndex = -1
// 应用标签选择器获取所有该标签元素
let els = root.getElementsByTagName(wrapNodeTagName)
els = [...els].filter((item) => {// 过滤掉划线元素
return !item.classList.contains('markLine');
}).forEach((item, index) => {// 计算以后元素在其中的索引
if (wrapNode === item) {wrapNodeIndex = index}
})
return {
tagName: wrapNodeTagName,
index: wrapNodeIndex
}
}最初存储的数据示例如下：
反序列化显示
显示就是依据下面存储的数据把线画上，遍历下面的数据，先依据 tagName 和index获取到指定元素，而后遍历该元素下的所有文本节点，依据 offset 找到须要划线的字符：
deserialization () {
let root = this.$refs.article
// 遍历序列化的数据
markData.forEach((item) => {
// 获取到指定元素
let els = root.getElementsByTagName(item.tagName)
els = [...els].filter((item) => {// 过滤掉划线元素
return !item.classList.contains('markLine');
})
let wrapNode = els[item.index]
let len = 0
let end = false
// 遍历该元素所有节点
this.walk(wrapNode, (node) => {if (end) {return}
// 如果是文本节点
if (node.nodeType === 3) {
// 如果以后文本节点的字符数 + 之前的总数大于 offset，阐明要找的字符就在该文本内
if (len + node.nodeValue.length > item.offset) {
// 计算在该文本里的偏移量
let startOffset = item.offset - len
// 因为咱们是切割到单个字符，所以总长度也就是 1
let endOffset = startOffset + 1
this.replaceTextNode(node, item.id, startOffset, endOffset)
end = true
}
// 累加字符数
len += node.nodeValue.length
}
})
})
}后果如下：
删除划线
删除划线很简略，咱们监听一下点击事件，如果指标元素是划线元素，那么获取一下所有该 id 的划线元素，创立一个range，显示一下tooltip，而后点击后把该划线元素删除即可。
// 显示勾销划线的 tooltip
showCancelTip (e) {
let tar = e.target
if (tar.classList.contains('markLine')) {e.stopPropagation()
e.preventDefault()
// 获取划线 id
this.clickId = tar.getAttribute('data-id')
// 获取该 id 的所有划线元素
let markNodes = document.querySelectorAll('.mark_id_' + this.clickId)
// 抉择第一个和最初一个文本节点来作为 range 边界
let startContainer = markNodes[0].firstChild
let endContainer = markNodes[markNodes.length - 1].lastChild
this.range = document.createRange()
this.range.setStart(startContainer, 0)
this.range.setEnd(
endContainer,
endContainer.nodeValue.length
)
this.tipText = '勾销划线'
this.setTip(this.range)
}
}点击了勾销按钮后遍历该 id 的所有划线节点，进行元素替换：
cancelMark () {
this.showTip = false
this.tipText = ''let markNodes = document.querySelectorAll('.mark_id_' + this.clickId)
// 遍历所有划线街道
for (let i = 0; i < markNodes.length; i++) {let item = markNodes[i]
// 如果还有子节点，也就是其余 id 的划线元素
if (item.children[0]) {let node = item.children[0].cloneNode(true)
// 子节点替换以后节点
item.parentNode.replaceChild(node, item)
} else {// 否则只有文本的话间接创立一个文本节点来替换
let textNode = document.createTextNode(item.textContent)
item.parentNode.replaceChild(textNode, item)
}
}
// 从序列化数据里删除该 id 的数据
this.serializeData = this.serializeData.filter((item) => {return item.id !== this.clickId})
}
毛病
到这里这个极简划线就完结了，当初来看一下这个极简的办法有什么毛病.
首先毋庸置疑的就是如果划线字符很多，反复划线很屡次，那么会生成十分多的 span 标签及嵌套档次，节点数量是影响页面性能的一个大问题。
第二个问题是须要存储的数据也会很大，减少存储老本和网络传输工夫：
这能够通过把字段名字压缩一下，改成一个字母，另外能够把间断的字符合并一下来略微优化一下，然而然并卵。
第三个问题是如其名，文本划线，真的是只能给文本进行划线，其余的图片下面的就不行了：
第四个问题是无奈应答如果划线后文章被批改了，html构造变动了的问题。
这几个问题个个扎心，导致它只能是个demo。
略微优化一下
很容易想到的一个优化办法是不要把字符单个切割，整块包裹不就好了吗，情理是这个情理：
replaceTextNode (node, id, startOffset, endOffset) {
// ...
startNode && fragment.appendChild(startNode)
// 改成间接包裹整块文本
let textNode = document.createElement('span')
textNode.className = 'markLine mark_id_' + id
textNode.setAttribute('data-id', id)
textNode.textContent = node.nodeValue.slice(startOffset, endOffset)
fragment.appendChild(textNode)
endNode && fragment.appendChild(endNode)
// ...
}这样序列化时须要减少一个长度的字段：
let textLength = markNode.textContent.length
if (textLength > 0) {// 过滤掉长度为 0 的空字符，否则会有不可预知的问题
this.serializeData.push({
tagName,
index,
offset,
length: textLength,// ++
id: markNode.getAttribute('data-id')
})
}这样序列化后的数据量会大大减少：
接下来反序列化也须要批改，字符长度不定的话就可能跨文本节点了：
deserialization () {
let root = this.$refs.article
markData.forEach((item) => {let wrapNode = root.getElementsByTagName(item.tagName)[item.index]
let len = 0
let end = false
let first = true
let _length = item.length
this.walk(wrapNode, (node) => {if (end) {return}
if (node.nodeType === 3) {
let nodeTextLength = node.nodeValue.length
if (len + nodeTextLength > _offset) {
// startOffset 之前的文本不须要划线
let startOffset = (first ? item.offset - len : 0)
first = false
// 如果该文本节点残余的字符数量小于划线文本的字符长度的话代表该文本节点还只是划线文本的一部分，还须要到下一个文本节点里去解决
let endOffset = startOffset + (nodeTextLength - startOffset >= _length ? _length : nodeTextLength - startOffset)
this.replaceTextNode(node, item.id, startOffset, endOffset)
// 长度须要减去之前节点曾经解决掉的长度
_length = _length - (nodeTextLength - startOffset)
// 如果残余要解决的划线文本的字符数量为 0 代表曾经解决完了，能够完结了
if (_length <= 0) {end = true}
}
len += nodeTextLength
}
})
})
}最初勾销划线也须要批改，因为子节点可能就不是只有单纯的一个划线节点或文本节点了，须要遍历全副子节点：
cancelMark () {
this.showTip = false
this.tipText = ''let markNodes = document.querySelectorAll('.mark_id_' + this.clickId)
for (let i = 0; i < markNodes.length; i++) {let item = markNodes[i]
let fregment = document.createDocumentFragment()
for (let j = 0; j < item.childNodes.length; j++) {fregment.appendChild(item.childNodes[j].cloneNode(true))
}
item.parentNode.replaceChild(fregment, item)
}
this.serializeData = this.serializeData.filter((item) => {return item.id !== this.clickId})
}当初再来看一下成果：
html构造：
能够看到无论是序列化的数据还是 DOM 构造都曾经简洁了很多。
然而，如果文档构造很简单或者多次重复划线最终产生的节点和数据还是比拟大的。
总结
本文介绍了一个实现 web 文本划线性能的极简实现，最后的想法是通过切割成单个字符来进行包裹，这样的长处是非常简略，毛病也很显著，产生的序列号数据很大、批改的 DOM 构造很简单，在文章及 demo 的写作过程中通过实际，发现间接包裹整块文字也并不会带来太多问题，然而却能缩小和优化很多要存储的数据和 DOM 构造，所以很多时候，想当然是不对的，最初想说，数据结构和算法真的很重要😭。
示例代码在：https://github.com/wanglin2/textUnderline。
参考文章：
1. 如何用 JS 实现“划词高亮”的在线笔记性能？
2.「划线高亮」和「插入笔记」—— 不止是前端知识点