使用JS实现博客搜索关键字高亮

说明

最近博客添加了搜索功能，有个需求是要针对搜索结果中搜索关键字需要高亮显示。

以便用户可以更快速的挑选自己中意的文章。

原理就是在渲染列表数据中给含有关键字的文本标签添加自定义class，渲染完毕后调用写好的高亮js方法。

 

实现效果

 

代码

// 搜索关键字高亮
var highlightKeyword=function(keyword) {
    //1.获取要高亮显示的行
    var rowNode = $('.highlightRow');
    //2.获取搜索的内容
    //3.遍历整行内容，添加高亮颜色
    rowNode.each(function() {
        var newHtml = $(this).html();
        newHtml = newHtml.replace(keyword, '<span style="color:#ff6700;">' + keyword + '</span>');
        $(this).html(newHtml);
    });
}

 

// 拼接列表
                        var dataRow = "";
                        if (data.rows != null && data.rows != '') {
                            $.each(data.rows, function(i, r) {
                                // 拼接DOM
                                dataRow+='<div class="search-post-item">'+
                                            '<h4 class="">'+
                                                '<a href="'+ctx+'/author/'+postAuthor+'/post/detail/'+r.id+'" target="_blank">'+
                                                    '<span class="post-title highlightRow">'+r.postTitle+'</span>'+
                                                '</a>'+
                                            '</h4>'+
                                            '<p class="post-content highlightRow">'+r.postExcerpt+
                                            '</p>'+
                                            '<div class="post-info-box">'+
                                                '<p>' +
                                                    '<span class="date">'+new Date(r.postTime).Format("yyyy-MM-dd hh:mm:ss")+'</span>'+
                                                '</p>'+
                                                '<p class="point"></p>'+
                                                '<p>'+
                                                    '<span class="read-num">阅读数 <span class="num">'+r.readCount+'</span> </span>'+
                                                '</p>'+
                                                '<p class="point"></p>'+
                                                '<p>'+
                                                    '<span class="comment-num">评论数 <span class="num">'+r.commentCount+'</span> </span>'+
                                                 '</p>'+
                                            '</div>'
                                        '</div>';


                                dataRow+='</div>';

                            });

                            // console.log(dataRow);
                            $("#post-list").append(dataRow);
                            // 高亮关键字
                            highlightKeyword(postTitle);