vue 搜索關鍵字列表結果高亮顯示

參考文檔：http://www.manongjc.com/article/37240.htm

 

 實現思路是：

1、寫一個方法過濾每一組字符串，需要高亮的加高亮的class

2、過濾器方法返回 html字符串

3、通過v-html將返回作為HTML標簽解析后輸出

過濾器代碼

新建 filters.js

export function highLightTableMsg(msg, highLightStr) {
  if (msg == null) {
    msg = ''
  }
  if (highLightStr == null) {
    highLightStr = ''
  }
  if (msg instanceof Object) {
    msg = JSON.stringify(msg)
  }
  if (highLightStr instanceof Object) {
    highLightStr = JSON.stringify(highLightStr)
  }
  if (!(msg instanceof String)) {
    msg = msg.toString()
  }
  if (!(highLightStr instanceof String)) {
    highLightStr = highLightStr.toString()
  }
  var htmlStr = ''
  if (highLightStr.length > 0) {
    if (msg.indexOf(highLightStr) !== -1) {
      assemblyStr(msg, highLightStr)
    } else {
      htmlStr = '<span>' + msg + '</span>'
    }
  } else {
    htmlStr = '<span>' + msg + '</span>'
  }
  function assemblyStr(msgAssembly, highLightAssembly) {
    if (msgAssembly.indexOf(highLightAssembly) !== -1) {
      var length = highLightAssembly.length
      var start = msgAssembly.indexOf(highLightAssembly)
      htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span class="highlights-text">' + highLightAssembly + '</span>'
      msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
      assemblyStr(msgAssembly, highLightAssembly)
    } else {
      htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
    }
  }
  return htmlStr
}

第一個參數是待搜索的字符串，第二個參數是要高亮的字符串 

導入方法

import { highLightTableMsg } from './components/filters'

頁面上定義一個方法     

 highLight(item, highLight) {
      return highLightTableMsg(item, highLight)
    }

css中定義高亮顯示的樣式

.highlights-text {
  color: #ff5134;
}

在頁面上使用

<span v-html="highLight(currentName, searchText)">{{currentName}}</span></span>