基于vue实现搜索高亮关键字

有一个需求是在已有列表中搜索关键词，然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示，所以该需求需要解决的就两个问题：

1.搜索关键词过滤列表数据

2.每个列表高亮关键字

ps: 此问题基于数组对象，其他数据类型也可参考此思路。

关键词搜索：过滤数据很简单，无非就是监听search，对源数据过滤即可，贴一下代码：

 1 const search = this.search
 2 if (search) {
 3     this.showdata = this.copyshowdata.filter(data => {
 4          return Object.keys(data).some(key => {
 5              return String(data[key]).indexOf(search) > -1
 6         })
 7     })
 8 } else {
 9     this.showdata = this.copyshowdata
10 }        

showdata是展示在页面的，copyshowdata是showdata副本，还原列表时使用的，对其不做任何处理。

上面是使用watch监听search值变化处理的，也可以使用computed属性计算showdata。

高亮关键字：思路是遍历showdata，对每一项item的值进行正则匹配（也可匹配指定项），使用<span class="highlights-text"></span> 替换掉search

 1 highlights () {
 2         const search = this.search
 3         this.showdata = this.showdata.map(item => {
 4           for (let key in item) {
 5             if (key === 'Issuecontent') {
 6               let replaceReg = new RegExp(search, 'g')// 匹配关键字正则
 7               let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替换v-html值
 8               item[key + '-highlights'] = item[key].replace(replaceReg, replaceString) // 开始替换
 9             }
10           }
11           return item
12         })
13       }

页面上则使用v-html=“item[key-highlights]”渲染

渲染之后还需要对样式进行单独处理，不能加在父类上面，而且scope要去掉，否则样式不会生效。

1 <style lang="scss">
2   .highlights-text {
3     color: #ff5134;
4   }
5 </style>

贴一张效果图：