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