前端页面模拟浏览器搜索功能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, "<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>
搜索功能实现流程图
注
- 文章是个人知识点整理总结,如有错误和不足之处欢迎指正。
- 如有疑问、或希望与笔者探讨技术问题(包括但不限于本章内容),欢迎添加笔者微信(o815441)。请备注“探讨技术问题”。欢迎交流、一起进步。
前端页面模拟浏览器搜索功能Ctrl+F实现相关推荐
- vue实现一个类似浏览器搜索功能(ctrl + f)
目录 引言 一.介绍自己项目的需求 二.先说说我的数据怎么设置的 三.具体功能的实现思路: 1.点击左侧目录跳转到对应位置 2.滚动到相应位置左侧目录树的对应标题变蓝色 3.搜索功能 4.目录展开和收 ...
- Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
- Idea 控制台console 不能搜索日志 CTRL F 快捷键无效
Idea 控制台console 不能搜索日志 CTRL F 快捷键无效 一.问题描述 1.在使用Idea的过程中,由于习惯使用Eclipse的快捷键映射,习惯性的使用CTRL+F,搜索时候,发现没有效 ...
- 浏览器搜索功能的使用
浏览器搜索功能的使用 直接在地址栏中搜索你需要的内容 用浏览器的搜索栏进行搜索 用双引号 " " 进行搜索 转载于:https://www.cnblogs.com/GaoNa/p/ ...
- html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
- java学习总结(16.05.25)eclipse的查找和替换功能 Ctrl+F
有很多文本编辑器,或IDE都有查找和替换的功能,而且大多数查找/替换功能的快捷键都是Ctrl+F,前几天,我在eclipse下试了一下,eclipse也有查找/替换的功能.下面来说一下这个功能. 在e ...
- 当前页面实现简单搜索功能
功能描述:在搜索框中输入内容,在渲染出的网络数据中取出带输入关键字的内容,单独显示 功能实现: 1.index.wxml:循环一个数组 <view class='preson'><i ...
- 前端页面导出excel文件功能(导出)
方法一: 一.后台管理系统中常有导出excel功能,可定义一个函数,在其他.vue文件中导入即可用. 1.1定义函数 export function excelDown(res, name = &qu ...
- 上述所提到的所有资源文件,页面内搜索按住ctrl+f
目录 一.7z解压缩工具 二.Tomcat 三.alpine linux 四.Typora 一.7z解压缩工具 官网:https://www.7-zip.org/ 二.Tomcat 官网:https: ...
最新文章
- 01-CoreData 概述
- 51CTO路由技术电子书
- 安卓动态.9图拉伸实现方案
- 关于CSS中的相对路径和绝对路径
- 【Python金融量化 1- 100 】三、流行股票指数
- Composer帮你轻松管理PHP包 autoload
- 数据结构链表实验c语言程序,数据结构实验练习(—):链表实现100位数的加减法...
- ChemDraw 15支持哪些输入格式
- 使用正则表达式,取得点击次数,函数抽离
- 数据结构c语言版马睿课后答案,清华大学出版社-图书详情-《C语言程序设计习题解答与实验指导》...
- Web服务器处理Servlet处理请求过程
- Android Butterknife框架 注解攻略
- 怎样把xp计算机语言改为英文,ghost xp如何将语言设置为英文
- 制作网页头部用html,HTML网页头部代码实例详解_HTML/Xhtml_网页制作
- 解析几何:第六章 二次曲面(2)抛物面 二次锥面 柱面 一般二次曲面
- CVPR2019 | 论文分类汇总
- Tomcat修行之路-3.类加载机制的原理
- 公寓上网新认证方式破解研究
- Unity UI 框架
- python_matplot_图片批量保存