jquery页面搜索关键词突出显示

 

页面搜索关键词突出

        // 页面搜索关键词突出
        $(function () {
            $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态
                'color': "#838792"
            });

            var tableTrTdContent = $(".list_r").find('p:contains("' + $('#txtSearch').val() + '")'); // 获取所有含有搜索内容的p，类似于集合存储       

            if ($('#txtSearch').val() != '') { // 如果搜索内容为空，就不用去更改样式

                if (tableTrTdContent.length > 0) { // 集合长度不为0，则表示搜索的内容存在

                    for (var a = 0; a < tableTrTdContent.length; a++) { // 遍历找到的p集合，进行每个渲染颜色
                        var contents = tableTrTdContent.eq(a).text(); // 获取到含有搜索内容的p里的集体内容，即字符串
                        var contentsArr = contents.split($('#txtSearch').val()); // 以搜索框中的内容将p的值进行分割成数组
                        var contentArrFirst = contentsArr[0]; // 将数组里的第一个值取出
                        for (var j = 1; j < contentsArr.length; j++) { // 将分割出来的内容进行染色后重新组合在一起
                            contentArrFirst += "<span style='color:#e33244;font-weight:bolder'>" + $('#txtSearch').val() + "</span>" + contentsArr[j];
                        };
                        tableTrTdContent.eq(a).html(contentArrFirst); // 将td里的值从新解析成html
                        console.log(tableTrTdContent.length - 1)
                    }
                }
            }
        });

效果图：