html中线段高亮效果,【前端技术】vue使用v-html实现一段字符串中关键字（词）高亮效果...

问题描述

需求：我们搜索某个关键字，后端返回给我们一个字符串，这个字符串中包含我们搜索的关键字，我们需要把这个字符串中的关键字部分加上高亮效果(类似于百度搜索关键字高亮的效果)。我们先看一下，大致类似的效果图：

如上图所示，需求很简单，就是关键字高亮。

思路分析

解决方式有两种，第一种就是进行字符串的切割，把关键字切出来，加上一个颜色。这种方式上一篇文章关于字符串的方法整理的文章已经说过了，不赘述，详情可点击链接跳转瞅瞅。

接下来我们说第二种方式，使用v-html指令加上字符串的替换方法，话不多说，上代码。

{{title}}

export default {

data() {

return {

title:"五百年前孙悟空大闹天宫",

searchWord:"孙悟空"

};

},

methods: {

highLight(title){

// 如果标题中包含，关键字就替换一下

if(title.includes(this.searchWord)){

title = title.replace(

this.searchWord,

// 这里是替换成html格式的数据，最好再加一个样式权重，保险一点

''+ this.searchWord +''

)

return title

}

// 不包含的话还用这个

else{

return title

}

}

},

};

代码效果图：

DOM元素审查

总结

v-html好像平常不怎么用到这个vue的指令，不过实际上在某些场景下，使用v-html能够很好的解决问题

demo中用font标签演示，其实不一定要用font标签，用使用span标签也可以的。补充一下：百度用的是em标签，必应用的是strong标签