vue实现搜索并高亮文字的两种方式总结

更新时间：2023年11月15日 14:38:49 作者：钱得乐

在做文字处理的项目时经常会遇到搜索文字并高亮的需求,常见的实现方式有插入标签和贴标签两种,这两种方式适用于不同的场景,各有优劣,下面我们就来看看他们的具体实现吧

插入标签的方式

简单做一个布局，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>

于是就实现了预期：

然而在有些业务场景中被搜索的区域会是 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信息的数组：

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

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

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

如图所示，想得到距离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; 了。

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

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

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

首先是如何知道需要高亮的区域是多行。从 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) 的判断是因为第一次截取时不应该把以前的结果也删除掉。

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

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

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

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

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

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

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

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

以上就是vue实现搜索并高亮文字的两种方式总结的详细内容，更多关于vue高亮文字的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue
高亮

Vue3 diff算法的简单解刨
如今Vue3的势头正盛，在diff算法方面也做了相应的变化，利用到了最长递增子序列把性能又提升了一个档次。本文就来带大家简单解刨一下Vue3中的diff算法
2023-02-02
vue3中h函数的常用使用方式汇总
其实h()函数和createVNode()函数都是创建dom节点,他们的作用是一样的,下面这篇文章主要给大家介绍了关于vue3中h函数的常用使用方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
element table数据量太大导致网页卡死崩溃的解决办法
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下
2023-02-02
vue项目引入字体.ttf的方法
今天小编就为大家分享一篇vue项目引入字体.ttf的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue设计一个倒计时秒杀的组件详解
这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
使用vue实现pdf预览功能的方法
许多朋友想要材料上传之后点击预览实现在浏览器上预览的效果,所以本文将给大家介绍如何使用vue实现pdf预览功能,文中有实现代码,有需要的朋友可以参考阅读下
2023-08-08
vue中路由的前进和后退问题
这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Element-ui中元素滚动时el-option超出元素区域的问题
这篇文章主要介绍了Element-ui中元素滚动时el-option超出元素区域的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue实现push数组并删除的例子
今天小编就为大家分享一篇Vue实现push数组并删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue.js整合vux中的上拉加载下拉刷新实例教程
这篇文章主要给大家介绍了关于vue.js整合vux中上拉加载下拉刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01

vue实现搜索并高亮文字的两种方式总结

目录

插入标签的方式

贴标签的方式

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具