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

快捷導(dǎo)航

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

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

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

正文

廢話少說先上效果（左側(cè)代碼，右側(cè)效果）

第一組

第二組

第三組

看到什么規(guī)律了嗎？

沒錯??！這份代碼就是依靠正則表達(dá)式來做出高亮效果，你負(fù)責(zé)傳入str與reg，而函數(shù)則負(fù)責(zé)實現(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 &gt; 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,

可能這時還有點懵，看這最后一次匹配，你應(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 = "實現(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實現(xiàn)搜索關(guān)鍵詞高亮的詳細(xì)教程的詳細(xì)內(nèi)容，更多關(guān)于vue搜索關(guān)鍵詞高亮的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: