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

说明

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

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

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

 

实现效果

 

代码

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

 

// 拼接列表
                        var dataRow = "";
                        if (data.rows != null && data.rows != '') {
                            $.each(data.rows, function(i, r) {
                                // 拼接DOM
                                dataRow+='
'+
                                            '
'+
                                                ''+
                                                    ''+r.postTitle+''+
                                                ''+
                                            '
'+
                                            '
'+r.postExcerpt+
                                            '
'+
                                            '
'+
                                                '
' +
                                                    ''+new Date(r.postTime).Format("yyyy-MM-dd hh:mm:ss")+''+
                                                '
'+
                                                '
'+
                                                '
'+
                                                    '阅读数 '+r.readCount+' '+
                                                '
'+
                                                '
'+
                                                '
'+
                                                    '评论数 '+r.commentCount+' '+
                                                 '
'+
                                            '
'
                                        '
';


                                dataRow+='

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