講真的想實現這個功能的時候瘋狂百度但是都不是非常的稱心如意，所以自己摸索了一會，先說一下用到的知識點
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