前端页面模拟浏览器搜索功能Ctrl+F实现

文章目录

  • 划重点(∩_∩)

<html>
<head>
    <style type="text/css">
        .res
        {
            color: Red;
        }
		.result{
			background: yellow;
		}
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.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, "" + key + "")); // 高亮操作
                $("#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;">
        145648897454</div>
    <div style="height: 100px;">
        2、据 Ben Geskin 推文显示,三星 S10 果真具有早先已传闻的“打孔屏”设计。对此,营长并不觉得是什么稀奇的事,因为近几年手机市场的厂商们,几乎都在盘算着如何“以貌取胜”,同时,配备让智能手机更智能的 AI 技术也是如今手机的一大卖点。
    </div>
    <div style="height: 100px;">
        2015年,三星风投投资了区块链消费设备ADEPT;。
    </div>
    <div style="height: 100px;">
        2016年,三星集团旗下最大子公司三星数据系统(Samsung SDS)宣布,将投资一家为公司提供基于区块链开发平台的当地公司,理由是区块链技术是足以改变世界的金融创新技术;
    </div>
    <div style="height: 100px;">
        2017年,三星建立以云计算为主的企业级区块链平台 Nexledger;
    </div>
    <div style="height: 100px;">
        20181月,三星数据系统宣布投资两家初创公司,其中一家为韩国区块链公司 Blocko,另一家为英国网络安全公司 Darktrace;
    </div>
    <div style="height: 100px;">
       20184月,三星开始为 Halong Mining 的 DragonMint T1 矿机生产 10nm 芯片。
    </div>
    <div style="height: 100px;">
        20189月,三星 SDS 与韩国海关、韩国银行等合作开发区块链认证平台,
    </div>
    <div style="height: 100px;">
        201810月,三星与荷兰银行 ABN AMRO 展开区块链贸易试点项目。
    </div>
    <div style="height: 100px;">
        2019123日,据一位名为 Ben Geskin 的推特网友爆料,三星 Galaxy S10 手机将内置区块链数字钱包服务,并首次报道于三星新闻网站 SamMobile。但截止到撰稿时间,三星对此并没有做出任何回应。但种种迹象表明,这次真有点实锤的意思!
    </div>
    <div style="height: 100px;">
       6666666666666
    </div>
</body>
</html>

搜索功能实现流程图

Created with Raphaël 2.2.0 开始 确认关键词是否有效? oldKey==key? 定位到关键词位置并添加样式 结束 查找关键词、高亮、记录位置 yes no yes no


划重点(∩_∩)

本人程序媛一枚,因为离港澳较近,周末兼职港澳人肉代购。

欢迎各位大佬添加本人微信,还会经常有点赞活动送价值不菲的小礼品哦。

即使现在不需要代购,等以后有了女(男)朋友、有了宝宝就肯定会需要的喽。

动动手指头,扫码一下,就当是对本博文的支持嘛,也是对一个平凡、勤劳、勇敢、秀外慧中等等优点的程序媛莫大的支持哈。

你可能感兴趣的:(前端页面模拟浏览器搜索功能Ctrl+F实现)