序
分享一個(gè)常用的的小功能：輸入關(guān)鍵詞东羹，在列表中高亮顯示輸入的關(guān)鍵詞糜值。如：
實(shí)現(xiàn)步驟
1. 思路
讓選中的關(guān)鍵字高亮顯示丰捷，說明要給關(guān)鍵字添加標(biāo)簽坯墨，然后給相應(yīng)標(biāo)簽添加樣式。因此關(guān)鍵之處就在于：
- 匹配關(guān)鍵字
- 替換關(guān)鍵字為帶有標(biāo)識(shí)（標(biāo)簽）的關(guān)鍵字
- 給標(biāo)識(shí)（標(biāo)簽）添加樣式
2. 示例
以vue項(xiàng)目示例
2.1 基礎(chǔ)布局
<!-- html -->
<!-- 關(guān)鍵詞輸入框 -->
<div class="search">
<el-input placeholder="請輸入關(guān)鍵詞" prefix-icon="el-icon-search"></el-input>
</div>
<!-- 內(nèi)容區(qū)域： 內(nèi)容列表循環(huán)展示 -->
<div class="article">
<div v-for="(item, index) in needText" :key="index" v-html="item.text"></div>
</div>
// 數(shù)據(jù)
data() {
return {
// 關(guān)鍵詞
keyword: '',
// 原數(shù)據(jù)列表
texts: [
{text: '春江潮水連海平病往，海上明月共潮生捣染。'},
{text: '滟滟隨波千萬里，何處春江無月明停巷！'},
{text: '江流宛轉(zhuǎn)繞芳甸耍攘，月照花林皆似霰；'},
{text: '空里流霜不覺飛畔勤，汀上白沙看不見蕾各。'},
{text: '江天一色無纖塵，皎皎空中孤月輪庆揪。'},
{text: '江畔何人初見月示损？江月何年初照人？'},
{text: '人生代代無窮已嚷硫，江月年年望相似检访。'},
{text: '不知江月待何人，但見長江送流水仔掸。'},
{text: '白云一片去悠悠脆贵，青楓浦上不勝愁。'},
{text: '誰家今夜扁舟子起暮？何處相思明月樓卖氨？'},
{text: '可憐樓上月裴回，應(yīng)照離人妝鏡臺(tái)负懦。'},
{text: '玉戶簾中卷不去筒捺，搗衣砧上拂還來。'},
{text: '此時(shí)相望不相聞纸厉，愿逐月華流照君系吭。'},
{text: '鴻雁長飛光不度，魚龍潛躍水成文颗品。'},
{text: '昨夜閑潭夢落花肯尺，可憐春半不還家。'},
{text: '江水流春去欲盡躯枢，江潭落月復(fù)西斜则吟。'},
{text: '斜月沉沉藏海霧，碣石瀟湘無限路锄蹂。'},
{text: '不知乘月幾人歸氓仲，落月?lián)u情滿江樹。'}
],
// 處理后的數(shù)據(jù)列表，要展示到html中去的
needText: [],
}
}
// 初始化
mounted() {
// 初始化時(shí)敬扛，將原數(shù)據(jù)列表賦值給needText一份晰洒，做初始化的展示
this.needText = this.texts;
}
然后布局居中即可。完成后如下：
2.2 綁定關(guān)鍵詞舔哪，做關(guān)鍵詞替換
將輸入內(nèi)容綁定到 keyword欢顷，添加回車事件
<el-input
placeholder="請輸入關(guān)鍵詞"
prefix-icon="el-icon-search"
+ v-modal="keyword"
+ @keyup.enter.native="alternateText"
>
</el-input>
剛才說過槽棍，做關(guān)鍵詞替換捉蚤，其實(shí)就是將關(guān)鍵詞替換為帶有標(biāo)簽的關(guān)鍵詞，那么可以根據(jù)正則將文字替換炼七。
先來搞一下關(guān)鍵詞和將關(guān)鍵詞帶上標(biāo)簽：
// 正則缆巧，全局
let exp = new RegExp(this.keyword, 'g');
// 帶有標(biāo)簽的關(guān)鍵詞，此處使用 span 標(biāo)簽豌拙，也可以是其他標(biāo)簽
let node = `<span>${this.keyword}</span>`;
正則替換：
// 遍歷原數(shù)據(jù)數(shù)組陕悬，將替換后的塞到 needText 中去展示即可
this.texts.map((item, index) => {
item = item.text.replace(exp,node);
this.needText.push({text: item});
});
注：在替換之前要先將 needText 清空。
將以上兩步封裝成alternateText方法即可按傅。也就是在方法內(nèi)部先將 needText 清空捉超，然后正則全局替換關(guān)鍵詞為帶有 span 標(biāo)簽的關(guān)鍵詞。
檢驗(yàn)：是否帶有 span 標(biāo)簽：
2.3 將帶標(biāo)簽的關(guān)鍵詞添加樣式
既然標(biāo)簽有了唯绍，那么添加樣式即可拼岳。比如我此處的 class 是 "article"，那么我可以：
.article{
width: 100%;
margin: 50px auto;
&>div{
text-align: center;
margin: 15px 0;
+ span{
+ color: orange;
+ }
}
}
然后嘗試一下……發(fā)現(xiàn)并沒有加上去顏色况芒！
不賣關(guān)子了惜纸，正確的處理方式是：
.article{
width: 100%;
margin: 50px auto;
&>div{
text-align: center;
margin: 15px 0;
- span{
+ &::v-deep span{
color: orange;
}
}
}
v-deep 小妙招~
OK，重新檢驗(yàn)下：
搞定~收工绝骚！
完整代碼私信我獲取~
小結(jié)
其實(shí)做完后發(fā)現(xiàn)還是挺簡單的耐版，一個(gè)正則替換，將關(guān)鍵字（詞）替換為帶有標(biāo)簽的關(guān)鍵詞压汪，在寫樣式的時(shí)候注意要保證能渲染到 span 標(biāo)簽上即可寥掐。另外需要注意的是最好不要在原數(shù)據(jù)上做修改，不然會(huì)導(dǎo)致系列問題擎鸠，如給原數(shù)據(jù)添加上標(biāo)簽之后可能會(huì)導(dǎo)致后續(xù)的關(guān)鍵詞覆蓋搜索不到等逛拱，因此建議將原數(shù)據(jù)保留，將操作后的數(shù)據(jù)存的新的變量中去滴须。
