vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程
正文
廢話少說(shuō)先上效果（左側(cè)代碼，右側(cè)效果）
- 第一組
- 第二組
- 第三組
看到什么規(guī)律了嗎？
沒(méi)錯(cuò)！！這份代碼就是依靠正則表達(dá)式來(lái)做出高亮效果，你負(fù)責(zé)傳入str與reg，而函數(shù)則負(fù)責(zé)實(shí)現(xiàn)代碼的高亮
解析
結(jié)構(gòu)部分如下
<template>
<div>
<span
:class="index%2!==0?'hightLight':''"
v-for="(item,index) in textData"
:key="index"
>{{item}}</span>
</div>
</template>
基本原理就是將傳入的str按照正則的規(guī)則進(jìn)行切割，偶數(shù)部分負(fù)責(zé)高亮，奇數(shù)部分負(fù)責(zé)正常顯示
如：
str與reg分別為
let str = "高亮幾個(gè)詞語(yǔ)出來(lái)好不好"; let reg = /(高亮|詞語(yǔ))/g;
將該部分切割為如下數(shù)組
"高亮幾個(gè)詞語(yǔ)出來(lái)好不好" ---》 ['', '高亮', '幾個(gè)', '詞語(yǔ)', '出來(lái)好不好'] ----》
知道了基本原理，我們?cè)賮?lái)看一下代碼
let str = "高亮幾個(gè)詞語(yǔ)出來(lái)好不好";
let reg = /(高亮|詞語(yǔ))/g;
let result = {};
let currentIndex = 0, returnData = [];
while ((result = reg.exec(str))) {
returnData.push(str.slice(currentIndex, result.index));
returnData.push(result[1]);
currentIndex = result.index + result[0].length;
}
if (str.length > currentIndex) {
returnData.push(str.slice(currentIndex, str.length));
}
console.log(returnData);
this.textData = returnData;
代碼關(guān)鍵在于理解reg.exec，了解這個(gè)api的可以直接跳到提取關(guān)鍵字并分組
正則api——exec
理解了這個(gè)例子，也就基本理解了其他的例子
我們這樣規(guī)定，將被兩個(gè)#和一個(gè)空格包圍的內(nèi)容進(jìn)行高亮即## 內(nèi)容 ##時(shí),內(nèi)容要被提取出來(lái)并高亮，首先要對(duì)其進(jìn)行分組
"1212## 4455 #### 0011 ##44488## 000000 ##"就會(huì)被分為
['1212', '4455', '', '0011', '44488', '000000'] 高亮文本與普通文本間隔排序
先來(lái)看看下面這部分代碼
let str = "1212## 4455 #### 0011 ##44488## 000000 ##"; let reg = /##\s+(.*?)\s+##/g; console.log(reg.exec(str)); console.log(reg.exec(str)); console.log(reg.exec(str)); console.log(reg.exec(str));
執(zhí)行結(jié)果如下
reg.exec執(zhí)行
- 第一次的時(shí)候會(huì)從字段中找到第一個(gè)匹配的字段（## 4455 ##），
- 第二次：會(huì)在第一次匹配的位置后找到第二個(gè)匹配的字段（## 0011 ##），
- 第三次：會(huì)在第二次匹配的位置后找到第三個(gè)匹配字段（## 000000 ##）
- 第四次時(shí)，剩余的字符已經(jīng)沒(méi)有了匹配所有返回null
也就是說(shuō)，在null之后的執(zhí)行結(jié)果，都是循環(huán)之前的執(zhí)行結(jié)果，所以咱們?cè)趫?zhí)行結(jié)果為null時(shí)即可停止
接下來(lái)看看執(zhí)行具體的執(zhí)行結(jié)果
0: "## 4455 ##" 1: "4455" groups: undefined index: 4 input: "1212## 4455 #### 0011 ##44488## 000000 ##" length: 2
返回的是一個(gè)數(shù)組，并帶有幾個(gè)字段屬性
結(jié)合一下其正則'0'是拿匹配到正則規(guī)則的值，'1'則是匹配到在正則里第一個(gè)被括號(hào)包起來(lái)的值
,這個(gè)lenth你可以粗糙的理解為需要提取的（即有幾個(gè)括號(hào)）數(shù)量+1（這個(gè)指的是能匹配到的整體）
至于為什么是一樣的還要用括號(hào)括起來(lái)，這個(gè)后面會(huì)說(shuō)
知道原理之后我們來(lái)看看如何提取關(guān)鍵字并分組
提取關(guān)鍵字并分組
提取關(guān)鍵字并分組 首先我們清楚的看到，通過(guò)正則，他會(huì)給出三個(gè)有用的信息
第一個(gè)是匹配到的正則規(guī)則中的值
第二個(gè)是可以拿到我們想要提取出來(lái) 即用括號(hào)括起來(lái)的值
第三個(gè)是該值所在的index
我們一步一步來(lái)
分成這種結(jié)構(gòu)，
也就是每次exec執(zhí)行不為null時(shí)都做一次區(qū)分， 將匹配到的值前方位置提取作為普通字符串，再把當(dāng)前的關(guān)鍵字提取作為高亮字符串，如下：
比如第一次匹配時(shí),拿到的值是這樣的
- 第二次匹配
/* 0: "## 4455 ##" 1: "4455" groups: undefined index: 4 input: "1212## 4455 #### 0011 ##44488## 000000 ##" length: 2 */
這里index為4，將下標(biāo)為0-4的字符提取為普通數(shù)組，而匹配到的字符串4455作為高亮字符
此時(shí)數(shù)組為['1212','4455']
- 第二次匹配
0: "## 0011 ##" 1: "0011" groups: undefined index: 14 input: "1212## 4455 #### 0011 ##44488## 000000 ##" length: 2
普通字符串應(yīng)下標(biāo)為為14-14即空字符串,高亮字符為匹配到的0011
此時(shí)數(shù)組為['','0011']
這里需要明確兩個(gè)14分別是怎么來(lái)的
第一個(gè)14是上一次匹配返回值的 index+上次匹配到字符串字符串## 4455 ##的長(zhǎng)度
第二個(gè)14是本次配到的index,
可能這時(shí)還有點(diǎn)懵，看這最后一次匹配，你應(yīng)該就理解了
- 第三次匹配
0: "## 000000 ##" 1: "000000" groups: undefined index: 29 input: "1212## 4455 #### 0011 ##44488## 000000 ##" length: 2
普通字符串應(yīng)是下標(biāo)為24-29即44488,高亮字符為000000
此時(shí)數(shù)組為['44488','000000']
同樣需要明確24，29分別是怎么來(lái)的
第一個(gè)是上一次匹配返回值的 index+上次匹配到字符串### 0011 ##的長(zhǎng)度
第二個(gè)則是本次匹配到的index 29
至此 我們用一個(gè)while循環(huán)將其包裹，利用上面的規(guī)則把對(duì)應(yīng)的值push到數(shù)組中,并用一個(gè)值緩存上一次的index就可以得到我們的目標(biāo)數(shù)組
let str = "1212## 4455 #### 0011 ##44488## 000000 ##";
let reg = /##\s+(.*?)\s+##/g;
let result = {};
let currentIndex = 0,
returnData = [];
while ((result = reg.exec(str))) {
console.log(result);
returnData.push(str.slice(currentIndex, result.index));
returnData.push(result[1]);
currentIndex = result.index + result[0].length;
}
// 最后一次匹配的高亮詞后可能還有沒(méi)push到數(shù)組中的值
if (str.length > currentIndex) {
returnData.push(str.slice(currentIndex, str.length));
}
console.log(returnData); // ['1212', '4455', '', '0011', '44488', '000000']
this.textData = returnData;
完整vue代碼
<template>
<div>
<span
:class="index%2!==0?'hightLight':''"
v-for="(item,index) in textData"
:key="index"
>{{item}}</span>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {
this.init();
},
methods: {
init() {
// let str = "實(shí)現(xiàn)搜索詞高亮 - 百度文庫(kù)";
// let reg = /([高亮詞文])/g;
// let str = "高亮幾個(gè)詞語(yǔ)出來(lái)好不好";
// let reg = /(高亮|詞語(yǔ))/g;
let str = "1212## 4455 #### 0011 ##44488## 000000 ##";
let reg = /##\s+(.*?)\s+##/g;
let result = {};
let currentIndex = 0,
returnData = [];
while ((result = reg.exec(str))) {
console.log(result);
returnData.push(str.slice(currentIndex, result.index));
returnData.push(result[1]);
currentIndex = result.index + result[0].length;
}
if (str.length > currentIndex) {
returnData.push(str.slice(currentIndex, str.length));
}
console.log(returnData);
this.textData = returnData;
}
}
};
</script>
<style>
.hightLight {
color: red;
}
</style>以上就是vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程的詳細(xì)內(nèi)容，更多關(guān)于vue搜索關(guān)鍵詞高亮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無(wú)感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪問(wèn)令牌）和refresh token（刷新令牌）組合,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
vue實(shí)現(xiàn)頁(yè)面滾動(dòng)到底部刷新
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面滾動(dòng)到底部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實(shí)現(xiàn)
本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue隨機(jī)驗(yàn)證碼組件的封裝實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何封裝一個(gè)隨機(jī)驗(yàn)證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細(xì)的用法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue下axios攔截器token刷新機(jī)制的實(shí)例代碼
這篇文章主要介紹了vue下axios攔截器token刷新機(jī)制的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue-cli下的vuex的簡(jiǎn)單Demo圖解(實(shí)現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡(jiǎn)單Demo（實(shí)現(xiàn)加1減1操作）,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02