码迷,mamicode.com
首页 > 其他好文 > 详细

实现ctrlF5搜索功能

时间:2020-12-08 12:17:40      阅读:4      评论:0      收藏:0      [点我收藏+]

标签:addclass   rgb   jquery   index   res   idt   指定位置   val   ddc   

<html>
<head>
    <style type="text/css">
        .res
        {
            color: Red;
        }
        .result{
            background: yellow;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var oldKey = "";
        var index = -1;
        var pos = new Array();//用于记录每个关键词的位置,以方便跳转
        var oldCount = 0;//记录搜索到的所有关键词总数
        
        function previous(){
            index--;
            index = index < 0 ? oldCount - 1 : index;
            search();
        }
        function next(){
            index++;
            //index = index == oldCount ? 0 : index;
            if(index==oldCount){
                index = 0 ;
            }
            search();
        }
 
        function search() {
            $(".result").removeClass("res");//去除原本的res样式
            var key = $("#key").val(); //取key值
            if (!key) {
                console.log("key为空则退出");
                $(".result").each(function () {//恢复原始数据
                    $(this).replaceWith($(this).html());
                });
                oldKey = "";
                return; //key为空则退出
            }
            if (oldKey != key) {
                console.log("进入重置方法");
                //重置
                index = 0;
                $(".result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                pos = new Array();
                var regExp = new RegExp(key+‘(?!([^<]+)?>)‘, ‘ig‘);//正则表达式匹配
                $("body").html($("body").html().replace(regExp, "<span id=‘result" + index + "‘ class=‘result‘>" + key + "</span>")); // 高亮操作
                $("#key").val(key);
                oldKey = key;
                $(".result").each(function () {
                    pos.push($(this).offset().top);
                });
                oldCount = $(".result").length;
                console.log("oldCount值:",oldCount);
            }
 
            $(".result:eq(" + index + ")").addClass("res");//当前位置关键词改为红色字体
 
            $("body").scrollTop(pos[index]);//跳转到指定位置
        }
    </script>
</head>
<body>
    <div style="position: fixed; right: 20px; top: 0;">
        <input id="key" type="text" style="width: 100px;"/>
        <input type="button" value="下一个" onclick="next()" />
        <input type="button" value="上一个" onclick="previous()" />
    </div>
    <div style="height: 100px;">
    </div>
    <div style="height: 100px;">
     11111111111</div>
    <div style="height: 100px;">
       222222222</div>

    <div style="height: 100px;">
      3333333
    </div>
</body>
</html>

 

实现ctrlF5搜索功能

标签:addclass   rgb   jquery   index   res   idt   指定位置   val   ddc   

原文地址:https://www.cnblogs.com/qinxuhui/p/14081934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!