讲真的想实现这个功能的时候疯狂百度但是都不是非常的称心如意，所以自己摸索了一会，先说一下用到的知识点
1、replace正则全文匹配（这里主要是因为使用replace默认替换第一个元素，所以使用正则）
2、字符串split转换为数组
3、v-html
好，那么首先看下代码
<div v-html="brightenKeyword(content,keyword)"></div>
对于html部分 ，就是这么简单，使用v-html标签，会输出运算以后的结果，
brightenKeyword 是我们在下面写的一个方法，他的两个参数
第一个参数 content 就是我们本身显示的文本的内容，也就是想要遍历寻找关键字的内容，
第二个参数 keyword 就是我们搜索的内容，
下面是具体的方法，首先我们要把关键字分成数组去遍历，如果content中有keyword，我们就进行替换，替换用的是正则表达，
很简单的正则，就是全文替换的意思，遇到关键字就变成红色，然后把修改后的内容返回就可以了，使用v-html他会自己读取标签和样式
//搜索高亮
brightenKeyword(val, keyword) { if (keyword.length > 0) { let keywordArr = keyword.split(""); val = val + ""; keywordArr.forEach(item => { if (val.indexOf(item) !== -1 && item !== "") { val = val.replace( new RegExp(item,'g'), '<font color="#f75353">' + item + "</font>" ); } }); return val; } else { return val; } }
图：
本文参考以下博客：
https://blog.csdn.net/wuguidian1114/article/details/107405565