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)
                    }
                }
            }
        });
复制代码

效果图:

      

 

posted @   今♀妃惜彼  阅读(47)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示