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
高亮

vue里面使用mui的弹出日期选择插件实例
今天小编就为大家分享一篇vue里面使用mui的弹出日期选择插件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue正则表达式限制input的输入范围
我们有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码,感兴趣的朋友跟随小编一起看看吧
2023-12-12
Vue3中引入scss文件的方法步骤
这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下
2023-08-08
vue.js项目使用原生js实现移动端的轮播图
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
vue项目之数量占比进度条实现方式
这篇文章主要介绍了vue项目之数量占比进度条实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
基于VUE选择上传图片并页面显示（图片可删除）
这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示，图片可以删除的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue中子组件向父组件传值$emit、.sync的案例详解
这篇文章主要介绍了Vue中子组件向父组件传值$emit、.sync的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09
Vue组件的继承用法示例详解
这篇文章主要介绍了Vue组件的继承用法,本文通过实例代码案例讲解给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，感兴趣的朋友一起看看
2018-05-05
Vue自定义v-has指令实现按钮权限判断
这篇文章主要给大家介绍了关于Vue自定义v-has指令实现按钮权限判断的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04

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

目录

插入标签的方式

贴标签的方式

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具