避免修改原始元素的高亮处理

高亮处理逻辑

/* 原始dom结构 */
<div>12</div>
/* 高亮后结构 */
<div>
  <span class='highlight'>12<span>
</div>

修改dom结构的缺陷

当长文章需要高亮时，如果里面拥有的匹配文字有N个时，就会修改N次，每次修改原始元素都会导致渲染耗时。

优化方案

避免修改原始结构，改用模态层设置高亮背景色，批量生成元素后，再插入document，减少渲染耗时。
主要技术难点在于获取匹配文字的宽高及位置。

文字获取高度/位置

可以通过 Range 类获取。

处理结果

<div style='position: relative; z-index: 2;'>
  <span>12</span>
</div>

const span = document.querySelector('span')
const parent = span.parentElement
const text = span.childNodes[0]

const range = document.createRange()
range.setStart(text, 0)
range.setEnd(text, text.length)

const rect = range.getBoundingClientRect()
const div = document.createElement('div')

const style = div.style
style.width = `${rect.width}px`
style.height = `${rect.height}px`
style.left = `${rect.left}px`
style.top = `${rect.top + parent.scrollTop}px` // 由于 parent 有可能存在滚动，如果不修复这个偏移，会导致文字定位在滚动后失效

style.position = 'absolute'
style.background = 'yellow'
style.zIndex = 1

document.body.appendChild(div)