腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程

更新時(shí)間：2022年07月26日 17:11:39 作者：Monday1997

這篇文章主要為大家介紹了vue實(shí)現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

廢話少說(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 &gt; 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)文章！

您可能感興趣的文章: