前端关键字搜索筛选到的数据匹配的关键字高亮显示
前言
时隔一个月终于又来发布博客啦,博客不能停呀,多点积累多点沉淀,加油
要解决的问题是搜索到的关键字高亮显示
话不多说直奔主题
this.listData = JSON.parse(this.listDataBf).filter(item=>{
let flag = item.corporation.indexOf(val)>-1 //搜索匹配到的列
let replaceReg = new RegExp(val, 'g'); //匹配当前的关键字
let replaceString = '<span class="search-text">' + val + '</span>'; //给匹配到的添加类名
if(item.corporation.indexOf(val)>-1){
this.$set(item,'corporation',item.corporation.replace(replaceReg, replaceString)) //替换匹配到的关键字
}
return flag
})
我所在的是vue项目 所以要用到数据 v-html 渲染数据 如果是原生的就直接原生渲染啦
然后写类名加个color:#red 什么的高亮样式,就解决啦