序
分享一個常用的的小功能：輸入關鍵詞，在列表中高亮顯示輸入的關鍵詞。如：
實現步驟
1. 思路
讓選中的關鍵字高亮顯示，說明要給關鍵字添加標籤，然後給相應標籤添加樣式。因此關鍵之處就在於：
- 匹配關鍵字
- 替換關鍵字爲帶有標識（標籤）的關鍵字
- 給標識（標籤）添加樣式
2. 示例
以vue項目示例
2.1 基礎佈局
<!-- html -->
<!-- 關鍵詞輸入框 -->
<div class="search">
<el-input placeholder="請輸入關鍵詞" prefix-icon="el-icon-search"></el-input>
</div>
<!-- 內容區域： 內容列表循環展示 -->
<div class="article">
<div v-for="(item, index) in needText" :key="index" v-html="item.text"></div>
</div>
// 數據
data() {
return {
// 關鍵詞
keyword: '',
// 原數據列表
texts: [
{text: '春江潮水連海平，海上明月共潮生。'},
{text: '灩灩隨波千萬裏，何處春江無月明！'},
{text: '江流宛轉繞芳甸，月照花林皆似霰；'},
{text: '空裏流霜不覺飛，汀上白沙看不見。'},
{text: '江天一色無纖塵，皎皎空中孤月輪。'},
{text: '江畔何人初見月？江月何年初照人？'},
{text: '人生代代無窮已，江月年年望相似。'},
{text: '不知江月待何人，但見長江送流水。'},
{text: '白雲一片去悠悠，青楓浦上不勝愁。'},
{text: '誰家今夜扁舟子？何處相思明月樓？'},
{text: '可憐樓上月裴回，應照離人妝鏡臺。'},
{text: '玉戶簾中卷不去，搗衣砧上拂還來。'},
{text: '此時相望不相聞，願逐月華流照君。'},
{text: '鴻雁長飛光不度，魚龍潛躍水成文。'},
{text: '昨夜閒潭夢落花，可憐春半不還家。'},
{text: '江水流春去欲盡，江潭落月復西斜。'},
{text: '斜月沉沉藏海霧，碣石瀟湘無限路。'},
{text: '不知乘月幾人歸，落月搖情滿江樹。'}
],
// 處理後的數據列表，要展示到html中去的
needText: [],
}
}
// 初始化
mounted() {
// 初始化時，將原數據列表賦值給needText一份，做初始化的展示
this.needText = this.texts;
}
然後佈局居中即可。完成後如下：
2.2 綁定關鍵詞，做關鍵詞替換
將輸入內容綁定到 keyword，添加回車事件
<el-input
placeholder="請輸入關鍵詞"
prefix-icon="el-icon-search"
+ v-modal="keyword"
+ @keyup.enter.native="alternateText"
>
</el-input>
剛纔說過，做關鍵詞替換，其實就是將關鍵詞替換爲帶有標籤的關鍵詞，那麼可以根據正則將文字替換。
先來搞一下關鍵詞和將關鍵詞帶上標籤：
// 正則，全局
let exp = new RegExp(this.keyword, 'g');
// 帶有標籤的關鍵詞，此處使用 span 標籤，也可以是其他標籤
let node = `<span>${this.keyword}</span>`;
正則替換：
// 遍歷原數據數組，將替換後的塞到 needText 中去展示即可
this.texts.map((item, index) => {
item = item.text.replace(exp,node);
this.needText.push({text: item});
});
注：在替換之前要先將 needText 清空。
將以上兩步封裝成alternateText方法即可。也就是在方法內部先將 needText 清空，然後正則全局替換關鍵詞爲帶有 span 標籤的關鍵詞。
檢驗：是否帶有 span 標籤：
2.3 將帶標籤的關鍵詞添加樣式
既然標籤有了，那麼添加樣式即可。比如我此處的 class 是 "article"，那麼我可以：
.article{
width: 100%;
margin: 50px auto;
&>div{
text-align: center;
margin: 15px 0;
+ span{
+ color: orange;
+ }
}
}
然後嘗試一下……發現並沒有加上去顏色！
不賣關子了，正確的處理方式是：
.article{
width: 100%;
margin: 50px auto;
&>div{
text-align: center;
margin: 15px 0;
- span{
+ &::v-deep span{
color: orange;
}
}
}
v-deep 小妙招~
OK，重新檢驗下：
搞定~收工！
完整代碼私信我獲取~
小結
其實做完後發現還是挺簡單的，一個正則替換，將關鍵字（詞）替換爲帶有標籤的關鍵詞，在寫樣式的時候注意要保證能渲染到 span 標籤上即可。另外需要注意的是最好不要在原數據上做修改，不然會導致系列問題，如給原數據添加上標籤之後可能會導致後續的關鍵詞覆蓋搜索不到等，因此建議將原數據保留，將操作後的數據存的新的變量中去。