vue 搜索后让搜索的关键字高亮

前言

使用关键字搜索后，出现的文章，需要把关键字都标红，已达到文章含关键字的含量，其实方法很简单，直接上代码

效果图

解决办法

首先需要获取要高亮的关键字，把他保存到一个变量中，让后在需要高亮的文字中使用v-html进行渲染，在使用正则表达式对内容进行过滤，添加标签，给标签添加class样式，在css中给高亮的文字设置样式

代码

<template>
    <div>
		<p v-for='item in data' v-html='keyword(item.title)'></p>
    </div>
</template>

<script setup>
	// 测试数据
	const data = [
		{title:"这是一段测试文字，主要测试关键字方法是否好用",id:1},
		{title:"这是一段测试文字，主要测试关键字方法是否好用",id:2},
		{title:"这是一段测试文字，主要测试关键字方法是否好用",id:3}
	]
	
	// 搜索的关键字，如果用input输入的话把value值绑定到这里
	const key = '关键字'
	
	// 关键字高亮
	const keyword = (text) => {
	   // 正则表达式规则，ig表示全局替换，区分大小写，key为输入的关键字
	   const reg = new RegExp(key, 'ig')
	   // 用内容匹配关键字，如果有的话替换成带标签的内容给标签添加class类
	   return text.replace(reg, `${key}`)
	}
	
</script>

// 注意：如果样式不生效的话，可以再写一个style标签去掉scoped把样式写在第二个标签中
<style scoped>
// 给高亮的文字设置样式
.hei{
	color:red;
}
</style>


// 如果在scoped中样式没生效的话，写第二个style标签，不加scoped，即可生效
<style>
// 给高亮的文字设置样式
.hei{
	color:red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

有问题的话可以留言讨论，也可以私信，看到会回复