前端关键字搜索筛选到的数据匹配的关键字高亮显示

前端关键字搜索筛选到的数据匹配的关键字高亮显示

前言
时隔一个月终于又来发布博客啦，博客不能停呀，多点积累多点沉淀，加油
要解决的问题是搜索到的关键字高亮显示
话不多说直奔主题
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 什么的高亮样式，就解决啦