全文检索高亮显示及上下跳转定位

351 阅读1分钟

# 首先要介绍一个冷门的API(至少对我来说很冷门)requestIdleCallback

先看看MDN上面的解释

`window.requestIdleCallback()` 方法插入一个函数,这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执
行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。函数一般会按先进先调用的顺序执行,然而,如果回调函数
指定了执行超时时间`timeout`,则有可能为了在超时前执行函数而打乱执行顺序。

所以本文的主要检索逻辑会交给requestIdleCallback来执行,使得超级长的文本在搜索起来变得不那么卡顿。

#1 简单封装一个selector

carbon (2).png

#2 获取目标文本的所有的node节点

对目标节点遍历它下面的所有子节点,将这些节点存到数组中返回。 carbon (3).png

#3 高亮函数

搜索的关键词默认使用空格分开的字符串,因此可以通过replace的第二个参数将匹配到的检索词进行对应的替换。 carbon (4).png

#4 检索函数

将每一次的高亮操作放入栈中,等待浏览器闲时执行 carbon (5).png

#5 清除高亮函数

对高亮的标签进行还原,并清除搜索栈中可能残余的回调。 carbon (6).png

#6 获取节点高度函数

复杂文本中可能存在表格,因此需要向上遍历拿到当前节点相对document的真实高度。

carbon (10).png

#7 跳转至上一个高亮函数

carbon (8).png

#8 跳转至下一个高亮函数

carbon (9).png