Vue在前端实现搜索结果的高亮效果

在搜索中，为了给用户提供更加醒目的搜索结果，通常需要把用户搜索的关键词在搜索结果中高亮显示。当我们采用elasticsearch的时候，后端会加上需要高亮的标签进行处理，前段直接显示就可以了，但是当使用mysql等数据库时，后端返回的是原始数据，没有加高亮标签，需要在前端对搜索结果进行处理。

先上效果图

如图所示，分为全文搜索和高级搜索，全文搜索就是在全文中搜索关键词，并把关键词在全文中高亮显示，如图一所示。高级搜索就是设置搜索条件，在每个字段中搜索，并只在该字段中高亮显示相应的关键词，如图二所示。

代码实现

实现高亮的js部分代码：

highLight(item, highLight) {
   return this.highLightTableMsg(item, highLight)
},
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
            // alert(length)
            var start = msgAssembly.indexOf(highLightAssembly)
            htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="background-color:#ffe72d;">' + highLightAssembly + '</span>'
            msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
            assemblyStr(msgAssembly, highLightAssembly)
        } else {
            htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
        }
    }
    return htmlStr;
},

核心函数是highLightTableMsg(msg, highLightStr)，参数msg是待查找的文本，highLightStr是你需要高亮显示的关键词。先进行判断非空和将非字符串转换为字符串，如果需要高亮显示的关键词highLightStr在待搜索文本中，就调用assemblyStr函数，如果不在，返回原文本不做任何处理。代码是下面部分。

if (msg.indexOf(highLightStr) !== -1) {
            assemblyStr(msg, highLightStr)

        } else {
            htmlStr = '<span>' + msg + '</span>'
        }

函数assemblyStr用来给高亮的文本加上标签，首先判断关键词highLightAssembly在文本msgAssembly中的开始位置，然后在关键字前加上span标签并设置背景颜色或字体颜色，再拼接上关键字和后面的内容，拼接后面的内容时采用递归方法，调用assemblyStr函数本身，由于此时if条件已经不满足，所以直接拼接上后面的文本，代码如下：

            var start = msgAssembly.indexOf(highLightAssembly)
            htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="background-color:#ffe72d;">' + highLightAssembly + '</span>'
            msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
            assemblyStr(msgAssembly, highLightAssembly)

前端代码

前端调用很简单，如下：

<span v-html="highLight(al.ajmc,keywords)"></span>

将搜索的关键词和从后端获取的文本传入highLight函数就可以了，返回的就是带有标签的数据了。

效果图上的全文搜索和高级搜索是怎么实现的呢，如下：

<span v-if="keywords" v-html="highLight(al.ajmc,keywords)"></span>
<span v-if="!keywords" v-html="highLight(al.ajmc,ajmc)"></span>

keywords是全文搜索框的值，如果有值，说明是全局搜索，如果没有值是高级搜索，判断一下显示哪个就可以了。