html检索词高亮

在搜索网站中高亮功能是比较常见的，下图是百度文库的搜索结果页面，输入"检索词"之后渲染的列表标题和摘要中的"检索词"都变成红色的了，这个的实现方法有很多种，前后台都可以，这里使用前端思维实现这个功能

 

首先约定后台返回的数据一定是数组，而且标题和内容不用想是文本格式的也就是字符串，而字符串只有部分是高亮显示的，找出这一部分转化成span，加上相应的样式就完成了，搜索的问题需要两个要素，一个是搜索的源头，另一个是搜索的目标，在结果页中，列表的标题和摘要是搜索的源头，这是需要遍历的，而搜索的目标是输入框中的文本，不管是源头还是目标都需要判断是否空值，还有一点值得思考，是不是列表的每一项都有高亮呢，在后台逻辑无误的情况下会不会查出无关的数据，理论上sql执行无误的情况下不会查出不含关键词的结果，如果担心出错建议加判断，考虑完了该动手了，模板和渲染的逻辑都不贴了

//使用字符串切分的方法显示高亮
function LightHighReg(source, target) {
    //源文本和目标文本都不空的时候才显示高亮
    if(source && target){
        var hightText = '<span style="color:red;">' + target + '</span>'
        var result = source.split(target)

        //如果源文本包含目标文本，正常情况下都是包含的，否则查不出来
        if(result.length > 1){
            return result.join(hightText);
        }else{
            return source;
        }
    }else{
        return source;
    }
}

这里使用了数组和字符串转换的方法，先使用split将文本分割成数组，再使用join拼接，类似的用法还有这种的，在遍历复选框的时候要把复选框的值用逗号拼接，常规的写法如下，判断下标是最后一个就不加逗号

       function getCheckValue(){
               let infos = '';
               
               //jquery筛选元素，可以用伪类
               const checks = $('#check-group').children('.active').toArray();
               //遍历得到的数组
               checks.forEach((element, index) => {
                    if (index == checks.length - 1) {
                        infos += $(element).attr('data-value');
                    } else {
                        infos += $(element).attr('data-value') + ',';
                    }
                })
                return infos;
        }

 如果借助数组就轻松加愉快了，直接用map映射成数组，最后再用join拼接

       function getCheckValue(){
               let infos = null;

               const checks = $('#check-group').children('.active').toArray();

               infos = checks.map(element => $(element).attr('data-value'))          

               return infos.join(',')
        }