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>