正文

前端页面模拟浏览器搜索功能ctrl+f实现(代码片段)

lxl57610  lxl57610  2022-12-10  750

关键词：

<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, "<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;">
        1、45648897454。
    </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;">
        2018年1月，三星数据系统宣布投资两家初创公司，其中一家为韩国区块链公司 Blocko，另一家为英国网络安全公司 Darktrace；
    </div>
    <div style="height: 100px;">
       2018年4月，三星开始为 Halong Mining 的 DragonMint T1 矿机生产 10nm 芯片。
    </div>
    <div style="height: 100px;">
        2018年9月，三星 SDS 与韩国海关、韩国银行等合作开发区块链认证平台，
    </div>
    <div style="height: 100px;">
        2018年10月，三星与荷兰银行 ABN AMRO 展开区块链贸易试点项目。
    </div>
    <div style="height: 100px;">
        2019年1月23日，据一位名为 Ben Geskin 的推特网友爆料，三星 Galaxy S10 手机将内置区块链数字钱包服务，并首次报道于三星新闻网站 SamMobile。但截止到撰稿时间，三星对此并没有做出任何回应。但种种迹象表明，这次真有点实锤的意思！
    </div>
    <div style="height: 100px;">
       6666666666666
    </div>
</body>
</html>

技术图片

delphi中如何实现模拟组合按键，如发送ctrl+f的按键

...ent函数可实现，如下面的代码用以实现在一个公共菜单中模拟Ctrl_F按钮以调用DBGridEH的查找对话框功能：这是在一个ActionList中的某一Action的OnExecute事件代码。 procedureTDM.act_LocateExecute(Sender:TObject); var myPopupMenu:TPopupM 查看详情

我做了一个网页，现在想设置一个按键，按一下就会实现浏览器ctrl+f的查找功能。。想请问高手这个怎么实现

参考技术A类似于Ctrl+F功能的实现代码详细出处参考：http://www.jb51.net/article/11009.htm 查看详情

电脑键盘快捷键

...统里的英语单词键盘上那么多快捷键，你用过几个？您的浏览器不支持HTML5视频zymedia(\'video\')参考技术A电脑键盘快捷键的使用能很好的提高工作效率，所谓的快捷键就是使用键盘上某一个或某几个键的组合完成一条功能命令，从... 查看详情

4.爱收藏——首页搜索功能实现(代码片段)

...在搜索页面，给后端传递关键词。根据关键词进行搜索。前端拿到返回结果，标记关键查看详情

怎么查询汉字的gb2312字符代码

我希望可以查询到汉字的GB2312字符代码有这种软件吗演示浏览器：QQ浏览器1、点击链接：动态网站制作指南-GB2312简体中文编码表，回车进入下面的页面，GB2312简体中文编码表。2、按Ctrl+F快捷键，输入要查找的汉字或者是编码，... 查看详情

[高分求]想用javascript实现类似ctrl+f的功能（兼容多种浏览器），求帮忙

...码http://bbs.51js.com/forum.php?mod=viewthread&tid=76008，但是在非ie浏览器上面不好用，查了好多document.all,document.getelementid之类的东东，看蒙了，求高人指点我该怎么做能使其兼容到不同内核的浏览器阿。<html><METAHTTP-EQUIV="Content-... 查看详情

myeclipse的ctrl+f搜索面板功能详解

...到下一个并选中Replace：替换一个Replace All：替换当前页面所有查看详情

js不区分大小写匹配字符串高亮模拟浏览器ctrl+f

参考技术A参数1：字符串或正则参数2：要替换的字符串或函数函数里有三个参数，不明白的童鞋可以console.log在控制台查看通过arguments来访问，我看完后顿时恍然大悟这个需求是一个朋友问的我，有点挂不住老脸，居然没解决，... 查看详情

ctrl+f是搜索?怎么用?

...个结果。3、正文也会有突出显示。4、或者Ctrl+H进入替换页面，然后点击进入超找，输入查找内容，点击阅读突出显示。5、正文也就可以显示出来了。参考技术ACTRL+F利用到电脑文件搜索就是（搜索和你问题对称的文件）CTRL+F利... 查看详情

vba如何模拟ctrl+f查找效果

...，并打印出来做证明。问题是：如何在一个excel的sheet中模拟ctrl+f的效果，并将查找结果截屏下来。贴到word里用以打印，如附件所示。是否可以用sendkeys实现，请各位大侠指点，关键语句也行，十分感谢！参考技术A是不是只是想... 查看详情

4.爱收藏——首页搜索功能实现(代码片段)

...在搜索页面，给后端传递关键词。根据关键词进行搜索。前端拿到返回结果，标记关键词。　　流程图：　　三、详细设计3.1搜索功能　　搜索，有两个参数传递路径。　　（1）首页的搜索，关键词通过url传递，搜索页面... 查看详情

android中实现模拟搜索的功能详解(代码片段)

...效果图，合适了再接着往下看：我们看到的这个页面，是由两部分组成，顶部的自定义的搜索框，和listView组成。首先我们来实现布局页面，自定义搜索框，和设置listView<?xmlversion="1.0"encoding&... 查看详情

前端vue路由返回恢复页面状态的实现方案(代码片段)

...案：路由参数；路由守卫需求描述在使用vue开发前端的时候遇到一个场景：在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页。但这时候之前的搜索记录和翻页就消失了，用户... 查看详情

前端vue路由返回恢复页面状态的实现方案(代码片段)

layuijs自定义打印功能实现(代码片段)

...#xff0c;然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印项目依赖：layuijquery记得换layui和jqu 查看详情

12-11锦上添花flutterai只能语音搜索功能实现

现在只欠调用我们的plugin完成语音识别。以及跳转到搜索页面，把识别的结果带过去。完成一个语音搜索的功能定义语音识别的结果的变量判断识别的结果如果不为空那么就设置识别结果的变量。彩蛋页面跳转，并把识别的结果... 查看详情

前端vue路由返回恢复页面状态的实现方案(代码片段)

...础类型、长度受限；路径看起来比较难看；只对浏览器返回有效，手动跳转回首页不行方案二：使用路由守卫钩子查看详情

win10edge浏览器键盘快捷键

Ctrl+D：将当前页面添加到收藏夹或阅读列表Ctrl+E：在地址栏中执行搜索查询Ctrl+F：在页面上查找Ctrl+H：打开历史记录面板Ctrl+G：打开阅读列表面板Ctrl+I：打开收藏夹列表面板（测试好像不起作用）Ctrl+J：打开下载列表页面Ctr... 查看详情