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

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

在做文字处理的项目时经常会遇到搜索文字并高亮的需求,常见的实现方式有插入标签和贴标签两种。这两种方式适用于不同的场景,各有优劣。为了方便操作,直接起一个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))
}
复制代码

每次不管是否是最终的结果都要把计算结果 pushhighlight 中, 当后面的结果可以覆盖前面的时候则再 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 中。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改