Vue实现搜索关键词高亮显示

最近的项目需要实现搜索关键词进行高亮展示的效果,写篇文章记录一下实现过程;

以上为实现效果展示;

整体思路 : 对后台返回的数据进行操作,使用正则去匹配搜索关键词后,使用replace进行字符串的替换;html部分使用v-html进行动态展示即可实现.

changeColor(result) {//result为接口返回的数据result.map((item, index) => {if (this.keyword) {/*** 使用正则表达式进行全文匹配关键词* ig : 表示 全文查找 ,忽略大小写* i : 忽略大小写* g : 全文查找** 使用字符串的replace方法进行替换* stringObject.replace('被替换的值',替换的值)*/let replaceReg = new RegExp(this.keyword, 'ig')let replaceString = `<span style="color: #ed4014">${this.keyword}</span>`result[index].title = item.title.replace(replaceReg, replaceString)result[index].content = item.content.replace(replaceReg, replaceString)}})this.records = result}