前言
使用关键字搜索后,出现的文章,需要把关键字都标红,已达到文章含关键字的含量,其实方法很简单,直接上代码
效果图
解决办法
首先需要获取要高亮的关键字,把他保存到一个变量中,让后在需要高亮的文字中使用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, `<em class='hei'>${key}</em>`)
}
</script>
// 注意:如果样式不生效的话,可以再写一个style标签去掉scoped把样式写在第二个标签中
<style scoped>
// 给高亮的文字设置样式
.hei{
color:red;
}
</style>
// 如果在scoped中样式没生效的话,写第二个style标签,不加scoped,即可生效
<style>
// 给高亮的文字设置样式
.hei{
color:red;
}
</style>
有问题的话可以留言讨论,也可以私信,看到会回复