基於vue實現搜索高亮關鍵字

有一個需求是在已有列表中搜索關鍵詞，然后在列表中展示含有相關關鍵字的數據項並且對關鍵字進行高亮顯示，所以該需求需要解決的就兩個問題：

1.搜索關鍵詞過濾列表數據

2.每個列表高亮關鍵字

ps: 此問題基於數組對象，其他數據類型也可參考此思路。

關鍵詞搜索：過濾數據很簡單，無非就是監聽search，對源數據過濾即可，貼一下代碼：

const search = this.search
if (search) {
    this.showdata = this.copyshowdata.filter(data => {
         return Object.keys(data).some(key => {
             return String(data[key]).indexOf(search) > -1
        })
    })       
} else {
    this.showdata = this.copyshowdata
}        

showdata是展示在頁面的，copyshowdata是showdata副本，還原列表時使用的，對其不做任何處理。

上面是使用watch監聽search值變化處理的，也可以使用computed屬性計算showdata。

高亮關鍵字：思路是遍歷showdata，對每一項item的值進行正則匹配（也可匹配指定項），使用<span class="highlights-text"></span> 替換掉search

highlights () {
        const search = this.search
        this.showdata = this.showdata.map(item => {
          for (let key in item) {
            if (key === 'Issuecontent') {
              let replaceReg = new RegExp(search, 'g')// 匹配關鍵字正則
              let replaceString = '<span class="highlights-text">' + search + '</span>' // 高亮替換v-html值
              item[key + '-highlights'] = item[key].replace(replaceReg, replaceString) // 開始替換
            }
          }
          return item
        })
      }

頁面上則使用v-html=“item[key-highlights]”渲染

渲染之后還需要對樣式進行單獨處理，不能加在父類上面，而且scope要去掉，否則樣式不會生效。

<style lang="scss">
  .highlights-text {
    color: #ff5134;
  }
</style>

貼一張效果圖：