vue实现多组关键词对应的高亮功能

首先，效果图：

我们有多组关键词，在这里我们意识到关键词的背景颜色与匹配值的字体颜色值相同

先草拟一组数据

color :【‘# ffb5c 5’，‘# EEC 900’，‘# d1eee’，‘# 40e0d 0’，‘# ffffff00’，‘# ff7f 00’，‘# ff6a 6a’，‘# B3EE3A’，‘# 9f 79ee’，‘# ffc1c 1’】，keywordsdetail :【‘好看’，‘漂亮’，‘wfewf’】，评论：【{ text :’老师好看{text: '老师不能搞笑' }，{text: '老师：ox:beer:wfewf'}]我们定制了一些颜色值、关键词和详细文本。

通过内嵌样式设置关键词的不同背景颜色

Span v-for=' (item，index)in keywords detail ' : key=' index ' class=' keywords item ' : style=' {底色： colors[index]} ' @ click=' showpartkey(index，comments)' {{item}}

更改颜色(结果列表、关键词){关键词。map((关键项，关键索引)={结果列表。map((项，索引)={if(关键项关键项。length 0){//匹配关键字regular let replacereg=new regexp(键项，‘g’)；//突出显示并替换v-html值让替换字符串=' span class=' highlight ' ' ' style=' color : ' this。颜色[关键索引]'；“key item ”/span；结果列表[索引]。text=item . text . replace(RePlaceReG，RePlaceString)；} });});this.comments=[]；this.comments=resultsList}我们主要看这条线

让RePlaceString=' span class=' highlight ' ' ' style=' color : ' this . colors[key index]'；“key item ”/span；这里采用字符串拼接的方法进行渲染

但是如果你这样写

span class=' highlight ' key item/span然后在css中定义高亮样式。突出显示{color:red}这是无效的

解释一下我指的是这位兄弟说的话

因此，有几种解决方案

1.直接移除css的作用域属性，但是很容易弄乱布局

2.用下面的表格写。aaa。突出显示{color:red}

3.以字符串拼接的形式插入样式

这样做的好处是可以动态设置v-html的样式

摘要

如上所述，边肖介绍的vue实现了多组关键词高亮的功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！