vue如何实现多组关键词对应高亮显示功能

　　介绍

这篇文章给大家分享的是有关vue如何实现多组关键词对应高亮显示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

先上效果图:

, vue如何实现多组关键词对应高亮显示功能

我们有多组关键词,这里实现了关键词的背景色与匹配值的字体颜色值相同

先拟定一组数据

颜色:,( 　　,,,“# FFB5C5", 　　,,,“# EEC900", 　　,,,“# D1EEEE", 　　,,,“# 40 e0d0", 　　,,,“# FFFF00", 　　,,,“# FF7F00", 　　,,,“# FF6A6A", 　　,,,“# B3EE3A", 　　,,,,# 9 f79ee" 　　,,,“# FFC1C1" 　　,,,, 　　,,,keywordsdetail:【“好看“,,“美丽“,,“wfewf"], 　　,,评论:, 　　,,,{ 　　,,,,:,“老师,好看好看222“; 　　,,,}, 　　,,,{ 　　,,,,:,“老师美丽11111极了“ 　　,,,}, 　　,,,{ 　　,,,,:,“老师太搞了“笑34234; 　　,,,}, 　　,,,{ 　　,,,,:,“老师搞笑的不的了, 　　,,,}, 　　,,,{ 　　,,,,:,“老师:牛:啤酒:wfewf啊“ 　　,,,} 　　,,)

我们自定义一些颜色值以及关键词和详情文字

用内联样式的方法设置关键词的不同背景色显示

& lt;跨度 　　,,,)=?项目、索引),拷贝keywordsdetail" 　　,,,:关键=癷ndex" 　　类,,,=発eyworditem" 　　,,,: 　　,,,@click=皊howpartkey(索引、注释)“; 　　,才能在{{项}}& lt;/span>

下面定义关键词匹配改变字体颜色的方法

changeColor (resultsList,,关键字),{ 　　,,keywords.map (keyitem, keyindex),=祝辞,{ 　　,,,resultsList.map((项目,,指数),=祝辞,{ 　　,,,,if  (keyitem ,,, keyitem.length 祝辞,0),{ 　　,,,,,//,匹配关键字正则 　　,,,,,let  replaceReg =, new 正则表达式(keyitem,“g"); 　　,,,,,//,高亮替换v-html值 　　,,,,let  replaceString =,,,,,,& # 39;& lt; span 类=癶ighlight" & # 39; + 　　,,,,,,& # 39;,风格=把丈?,& # 39;+ 　　,,,,,,this.colors (keyindex), + 　　,,,,,,& # 39;;“祝辞& # 39;+ 　　,,,,,,keyitem  + 　　,,,,,,“& lt;/span>“; 　　,,,,,resultsList(指数).text =, item.text.replace ( 　　,,,,,,replaceReg, 　　,,,,,replaceString 　　,,,,,); 　　,,,,} 　　,,,}); 　　,,}); 　　 　　,,this.comments =, []; 　　,,this.comments =, resultsList; 　　以前,,}

我们主要看这一行

let  replaceString =, & # 39; & lt; span 类=癶ighlight" & # 39;, + & # 39;,祝辞& # 39;,+,keyitem  +,“& lt;/span>“

这里采取了字符串拼接的方法来进行渲染

但如果你写成这样

& lt; span 类=癶ighlight"祝辞keyitem

然后在css中定义突出的样式

.highlight  { 　　颜色:红色 　　}

这样做是不生效的

解释我参考了这位兄弟说的

<强>所以解决方法有以下几种

1。直接去掉css的范围属性但是这样做很容易搞乱布局

2。写成以下形式

.aaa 在祝辞祝辞.highlight { 　　颜色:红色 　　}

3。把样式以字符串拼接的方式插入

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

感谢各位的阅读!关于“vue如何实现多组关键词对应高亮显示功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

vue如何实现多组关键词对应高亮显示功能