vue前端模糊搜索高亮的一种实现

最终效果是这样的： 

思路是：

1、写一个方法过滤每一组字符串，需要高亮的加高亮的class

2、过滤器方法返回 html字符串

3、通过v-html将返回作为HTML标签解析后输出

过滤器代码：

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="log-hight-light">' + highLightAssembly + '</span>'
      msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
      assemblyStr(msgAssembly, highLightAssembly)
    } else {
      htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
    }
  }
  return htmlStr
}

第一个参数是待搜索的字符串，第二个参数是要高亮的字符串 

css中加一个高亮样式：

.log-hight-light{
  color: #ffe72d;
}

 在页面上这样使用：

导入这个过滤器方法

import { highLightTableMsg } from '@/filters/index'

页面上定义一个方法     

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

html中使用：

<div class="miniresult" v-for="item in messages">
  message：<span v-html="highLight(item, formData.msg)"></span>
</div>

 

如果您觉得这篇文章帮助到了您，可以留下您的评论或者捐赠支持一下。

一分两分也是爱，给点鼓励也不赖 。