vue實現搜索關鍵詞高亮的詳細教程

Posted on by

正文

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

  • 第一組

  • 第二組

  • 第三組

看到什麼規律瞭嗎？

沒錯！！這份代碼就是依靠正則表達式來做出高亮效果，你負責傳入str與reg，而函數則負責實現代碼的高亮

解析

結構部分如下

<template>
  <div>
    <span
      :class="index%2!==0?'hightLight':''"
      v-for="(item,index) in textData"
      :key="index"
    >{{item}}</span>
  </div>
</template>

基本原理就是將傳入的str按照正則的規則進行切割，偶數部分負責高亮，奇數部分負責正常顯示

如：

str與reg分別為

let str = "高亮幾個詞語出來好不好";
let reg = /(高亮|詞語)/g;

將該部分切割為如下數組

"高亮幾個詞語出來好不好" —》 ['', '高亮', '幾個', '詞語', '出來好不好'] —-》

知道瞭基本原理，我們再來看一下代碼

      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;

代碼關鍵在於理解reg.exec，瞭解這個api的可以直接跳到提取關鍵字並分組

正則api——exec

理解瞭這個例子，也就基本理解瞭其他的例子

我們這樣規定，將被兩個#和一個空格包圍的內容進行高亮即## 內容 ##時,內容要被提取出來並高亮，首先要對其進行分組

"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));

執行結果如下

reg.exec執行

  • 第一次的時候會從字段中找到第一個匹配的字段（## 4455 ##），
  • 第二次：會在第一次匹配的位置後找到第二個匹配的字段（## 0011 ##），
  • 第三次：會在第二次匹配的位置後找到第三個匹配字段（## 000000 ##）
  • 第四次時，剩餘的字符已經沒有瞭匹配所有返回null

也就是說，在null之後的執行結果，都是循環之前的執行結果，所以咱們在執行結果為null時即可停止

接下來看看執行具體的執行結果

0: "## 4455 ##"
1: "4455"
groups: undefined
index: 4
input: "1212## 4455 #### 0011 ##44488## 000000 ##"
length: 2

返回的是一個數組，並帶有幾個字段屬性

結合一下其正則'0'是拿匹配到正則規則的值，'1'則是匹配到在正則裡第一個被括號包起來的值

,這個lenth你可以粗糙的理解為需要提取的（即有幾個括號）數量+1（這個指的是能匹配到的整體）

至於為什麼是一樣的還要用括號括起來，這個後面會說

知道原理之後我們來看看如何提取關鍵字並分組

提取關鍵字並分組

提取關鍵字並分組 首先我們清楚的看到，通過正則，他會給出三個有用的信息

第一個是匹配到的正則規則中的值

第二個是可以拿到我們想要提取出來 即用括號括起來的值

第三個是該值所在的index

我們一步一步來

分成這種結構，

也就是每次exec執行不為null時都做一次區分， 將匹配到的值前方位置提取作為普通字符串，再把當前的關鍵字提取作為高亮字符串，如下：

比如第一次匹配時,拿到的值是這樣的

  • 第二次匹配
/*
0: "## 4455 ##"
1: "4455"
groups: undefined
index: 4
input: "1212## 4455 #### 0011 ##44488## 000000 ##"
length: 2
*/

這裡index為4，將下標為0-4的字符提取為普通數組，而匹配到的字符串4455作為高亮字符

此時數組為['1212','4455']

  • 第二次匹配
0: "## 0011 ##"
1: "0011"
groups: undefined
index: 14
input: "1212## 4455 #### 0011 ##44488## 000000 ##"
length: 2

普通字符串應下標為為14-14即空字符串,高亮字符為匹配到的0011

此時數組為['','0011']

這裡需要明確兩個14分別是怎麼來的

第一個14是上一次匹配返回值的 index+上次匹配到字符串字符串## 4455 ##的長度

第二個14是本次配到的index,

可能這時還有點懵，看這最後一次匹配，你應該就理解瞭

  • 第三次匹配
0: "## 000000 ##"
1: "000000"
groups: undefined
index: 29
input: "1212## 4455 #### 0011 ##44488## 000000 ##"
length: 2

普通字符串應是下標為24-29即44488,高亮字符為000000

此時數組為['44488','000000']

同樣需要明確24，29分別是怎麼來的

第一個是上一次匹配返回值的 index+上次匹配到字符串### 0011 ##的長度

第二個則是本次匹配到的index 29

至此 我們用一個while循環將其包裹，利用上面的規則把對應的值push到數組中,並用一個值緩存上一次的index就可以得到我們的目標數組

	  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到數組中的值
      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 = "實現搜索詞高亮 - 百度文庫";
      // 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實現搜索關鍵詞高亮的詳細教程的詳細內容，更多關於vue搜索關鍵詞高亮的資料請關註WalkonNet其它相關文章！

推薦閱讀：