前端实现搜索并高亮文字的两种方式

钱得乐
21,582 阅读4分钟

在做文字处理的项目时经常会遇到搜索文字并高亮的需求，常见的实现方式有插入标签和贴标签两种。这两种方式适用于不同的场景，各有优劣。为了方便操作，直接起一个Vue项目，在里面演示。

插入标签的方式

简单做一个布局，handleSearch 中放主要逻辑

<script setup>
import { ref } from 'vue'

const text = ref('豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。')
const search = ref('')
const handleSearch = () => {
  console.log(search.value)
}
</script>
<template>
  <div class="editor">{{ text }}</div>
  <input type="text" v-model="search">
  <button @click="handleSearch">搜索</button>
</template>

<style scoped>
.editor {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  overflow: auto;
}
</style>

补充 handleSearch 的处理逻辑：

const handleSearch = () => {
  const regExp = new RegExp(search.value, 'g')
  text.value = text.value.replace(regExp, `<span style="background: yellow;">${search.value}</span>`)
}

用输入框中的内容创建一个正则，然后将内容做替换，外面裹上 span 标签并加背景颜色。

对 editor 稍作修改，否则标签渲染不出来

<div class="editor" v-html="text"></div>

于是就实现了预期：

image.png

然而在有些业务场景中被搜索的区域会是 contenteditable 可编辑区域，如果再使用插入标签的方式会污染原文，这时这种方式就行不通了。

贴标签的方式

这种方式需要两个前置的知识储备，一个是 Document.createRange() ，该方法用以创建一个包含节点与文本节点的一部分的文档片段。另一个是 Range.getBoundingClientRect() ，虽然是一个实验中的方法，但是主流浏览器基本都支持，该方法会返回一个 DOMRect 对象，包含8个属性，文档中有详细的介绍，在此就不赘述了。

对页面稍作修改：

<script setup>
import { ref, watch, onMounted } from 'vue'

const text = ref('豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。')
const search = ref('')
const highlight = ref([])
const editorRef = ref(null)
const wrapperRef = ref(null)
const handleSearch = () => {
  
}
</script>

<template>
  <div class="container">
    <div class="wrapper" ref="wrapperRef">
      <div class="editor" ref="editorRef" contenteditable>{{ text }}</div>
      <div class="highlight"></div>
    </div>
  </div>
  <input type="text" v-model="search">
  <button @click="handleSearch">搜索</button>
</template>

<style scoped>
.container {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  overflow: auto;
}

.wrapper {
  position: relative;
}

.highlight {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
</style>

增加了一个 highlight 框，用来存放高亮的块， highlight 数组用来存放需要高亮的块的位置信信息。

补充搜索函数中的逻辑

const len = search.value.length
const regExp = new RegExp(search.value, 'g')
const textNode = editorRef.value.firstChild
let result = null
while (result = regExp.exec(text.value)) {
  const { index } = result
  const range = document.createRange()
  range.setStart(textNode, index)
  range.setEnd(textNode, index + len)
  const rangeReact = range.getBoundingClientRect()
  highlight.value.push(rangeReact)
}

将要搜索的词创建一个正则，并获取文本框的文字节点。用 exec 来遍历原文内容，这样可以实现全文搜索并得到搜索信息，拿到 index 属性。此时就用到了前面提到的 createRange ，在文本结点根据起始位置和长度创建一个选中区域，并获取选中区域的dom信息，将它们存放到一个数组中。此时可以拿到一个dom信息的数组：

image.png

可以用这个数组渲染高亮块：

<div class="highlight">
  <span
    v-for="item in highlight"
    class="tag"
    :style="{
      left: item.left + 'px',
      top: item.top + 'px',
      width: item.width + 'px',
      height: item.height + 'px' }"></span>
</div>

增加对应的样式：

.tag {
  position: fixed;
  background: yellow;
}

这里使用 fixed 的原因是得到的距离信息时是相对于文档，而不是父元素。但是这种方式是不可靠的，因为例子中可编辑区域是可以滚动的，一滚动高亮区域就错位了：

image.png

所以还是要采用相对父元素定位，其实实现方式很简单，先算出父元素相对于页面的定位，再用刚才得出的距离详见，最后得出高亮标签相对于父元素的定位。画个简单的示意图：

667015778.133815.jpg

如图所示，想得到距离3也就是高亮标签相对于父元素的距离，就是距离2减去距离1。

const wrapperInfo = ref({})
onMounted(() => {
  wrapperInfo.value = wrapperRef.value.getBoundingClientRect()
})

在mounted状态下获取父元素的信息。

封装一个计算位置信息的函数，并修改搜索函数，获取 rangeReact 后增加和修改代码：

const calRectInfo = (rangeReact) => {
  let rectInfo = {}
  rectInfo.width = rangeReact.width
  rectInfo.height = rangeReact.height
  rectInfo.left = rangeReact.left - wrapperInfo.value.left
  rectInfo.top = rangeReact.top - wrapperInfo.value.top
  return rectInfo
}

highlight.value.push(calRectInfo(rangeReact))

这时就可以把定位改为 position: absolute; 了。

此时再滚动样式也不会错乱：

image.png

但是当被搜索词在跨行时会出现bug：

image.png

搜索“星分翼轸“，然而两行都被高亮了，通过调试可以看出它并不会很智能的分块返回，所以这段逻辑就需要手动去实现。

image.png

首先是如何知道需要高亮的区域是多行。从 DOMReact 中得以得到需要高亮的行高，如果知道一行的高度，就可以知道是不是多行了。

const standardRange = document.createRange()
standardRange.setStart(textNode, 0)
standardRange.setEnd(textNode, 0)
const standardRangeReact = standardRange.getBoundingClientRect()
const lineHeight = standardRangeReact.height

在空白处创建一个 range ，就可以得到行高。然后根据行高判断两种情况：

if (rangeReact.height === lineHeight) {
  highlight.value.push(calRectInfo(rangeReact))
} else {
  // 多行的情况
}

多行的情况可以用双指针来试，还以“星分翼轸”为例，设置 i = 0; j = 1; ，截取文字得到“星”，计算高度信息，然后 j++; 得到“星分”，当文字为“星分翼”的时候，行高变为两行，则应高亮“星分”。然后将 i 设置为 j - 1 。继续重复之前的操作。

let i = 0
let j = 1
while (j <= len) {
  const subRange = document.createRange()
  subRange.setStart(textNode, result.index + i)
  subRange.setEnd(textNode, result.index + j)
  const subRangeReact = subRange.getBoundingClientRect()
  if (subRangeReact.height === lineHeight) {
    if (j !== 1) highlight.value.pop()
    j++
  } else {
    i = j - 1
  }
  highlight.value.push(calRectInfo(subRangeReact))
}

每次不管是否是最终的结果都要把计算结果 push 到 highlight 中， 当后面的结果可以覆盖前面的时候则再 pop 出来。 if (j !== 1) 的判断是因为第一次截取时不应该把以前的结果也删除掉。

此时再进行搜索，可以折行显示了。

image.png

但其实还有不尽如人意的地方，因为这个框是可编辑区域，当插入新的文字时高亮框不会实时改变，留在了原地。

image.png

此时我们要监听文本框文字的改变

<div class="editor" ref="editorRef" contenteditable @input="handleChange">{{ text }}</div>

当文字改变时重新计算高亮区域。

const handleChange = () => {
  text.value = editorRef.value.innerText
}

watch(text, () => {
  highlight.value = []
  handleSearch()
})

这样当输入文字时，高亮区域可以实时计算：

image.png

写在后面

在项目时遇到了要高亮文字的需求，社区中也没有可以直接拿来用的插件，就自己实现了一个。本文只提供一个大概的思路，其实计算多行的算法还有优化的空间，也可能存在着未知的bug。如果文章中有错误的地方欢迎指出，有更好的实现方案欢迎留言。

我将本文中的代码上传到了我的 GitHub 中。

avatar
文章
阅读
粉丝