vue實現搜尋關鍵詞高亮的詳細教學

2022-07-26 18:00:04

正文

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

第一組

第二組

第三組

看到什麼規律了嗎？

沒錯！！這份程式碼就是依靠正規表示式來做出高亮效果，你負責傳入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搜尋關鍵詞高亮的資料請關注it145.com其它相關文章！