vue实现搜索并高亮文字的两种方式总结
作者：钱得乐
在做文字处理的项目时经常会遇到搜索文字并高亮的需求，常见的实现方式有插入标签和贴标签两种。这两种方式适用于不同的场景，各有优劣。为了方便操作，直接起一个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>
于是就实现了预期：
然而在有些业务场景中被搜索的区域会是 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高亮文字的资料请关注脚本之家其它相关文章！