匹配搜尋關鍵高亮 new RegEXP 填坑

需求：在搜尋框輸入關鍵字，點選搜尋查詢內容，在正文中匹配搜尋關鍵字的內容高亮顯示

使用 new RegEXP 實現

matchKeyword (searchKeyword, value) { // searchKeyword搜尋關鍵字, value正文內容
    if (value) {      
      value = value + ''    //轉化為字串型別
    } else {
      return
    }
    if (searchKeyword && searchKeyword.length > 0) {
      let searchKeywords = searchKeyword.split(' ');
      for (let i = 0; i < searchKeywords.length; i++) {
        if (searchKeywords[i] !== '') {      //排除掉空字串，開始沒有考慮空值、空格情況，導致 
                                             //全文都被匹配
          let replaceReg = new RegExp(searchKeywords[i], 'gi');
          let replaceString = '<span style="background-color:#ffc600;color: #000 ">' + searchKeywords[i] + '</span>';
          value = value.replace(replaceReg, replaceString);
        }
      }
      return value   //返回替換後加上高亮樣式的正文內容
    } else {
      return value;
    }
  }

<p v-html="matchKeyword(key,value)"></p>
用v-html  去解析返回的內容，這樣樣式（html標籤）才會被解析

注意：一定要考慮  searchKeywords[i]  為空，導致  replaceReg 值為空的情況 ，當 replaceReg為空時，它與全文都能匹配，最後的結果是全文均能被匹配上，加上高亮樣式。

解決：1.關鍵字串包含多個用空格隔開的字串，把關鍵字分隔成陣列時，同時去除多餘字串

           2.字串分隔成陣列之後，判斷如果為空陣列則不進行匹配操作（如上文）