前端页面模拟浏览器搜索功能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>
前端页面模拟浏览器搜索功能Ctrl+F实现的更多相关文章
- 模拟浏览器搜索功能(Ctrl + F)
写的匆忙,示意一下,有待完善.把以下代码复制到文本文件中,把文件扩展名改为.html就可以运行了. <html> <head> <style type="tex ...
- Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- 表单提交---前端页面模拟表单提交(form)
有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...
- 使用springboot实现一个简单的restful crud——03、前端页面、管理员登陆(注销)功能
前言 这一篇我们就先引入前端页面和相关的静态资源,再做一下管理员的登陆和注销的功能,为后续在页面上操作数据做一个基础. 前端页面 前端的页面是我从网上找的一个基于Bootstrap 的dashboar ...
- Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...
- Web前端页面的浏览器兼容性测试心得（一）搭建测试用本地静态服务器
自从实习以来,我体验了由一个人编程再到多人协作编程的转换.同时也接触了很多新鲜事物,学到了很多东西.工作时,常常需要多个人协同测试一张H5页面(PC.手机.平板等跨设备测试),也会经常把页面给PM或老 ...
- 利用api模拟百度搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- UltraEdit （Ctrl + F） 查找、（Ctrl + R）替换功能失效
环境: Windows 7 Service Pack 1 X64 工具: UltraEdit Version 21 症状: UltraEdit (Ctrl + F) 查找.(Ctrl + R)替换功能 ...
随机推荐
- 在Chrome上运行安卓(ARC环境)
测试时所用Chrome版本为67 (Win10 64bit) 1,安装ARC Welder插件(100多M):https://chrome.google.com/webstore/detail/arc ...
- TextView实现文字水平滚动效果
有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...
- C++版本 ORM 访问数据库之ODB 的Window环境编译(一)
先简单说说我为什么要编译一个ORM访问数据库的版本, 以前在做C#访问数据库时候, 直接以orm方式访问数据库, 代码写起来简单, 不用写各种复杂的sql语句, 直接有orm框架生成, 后来转到C+ ...
- C#应用程序单例并激活程序的窗口 使其显示在最前端
public class SoftHelper { ///<summary> /// 该函数设置由不同线程产生的窗口的显示状态 /// </summary> /// <p ...
- 基于opencv+python的二维码识别
花了2天时间终于把二维码识别做出来了,不过效果一般,后面会应用在ROS辅助定位上,废话少说先上图: 具体过程参考了这位大神的博客:http://blog.csdn.net/qq_25491201/ar ...
- jsp之el表达式jstl标签
不管是el表达式还是jstl标签最终的目的都是要消除jsp中的java代码,当然是消除显式的java代码 el表达式的出现是为了简化jsp中读取数据并写入页面的操作. el表达式的功能不多,也很好记 ...
- Python OpenCV 显示图片，图片分类
def divide_image(path,g_path1,g_path0): img_lst = os.listdir(path) for i in img_lst: print('类别1,类别0' ...
- k8s网络原理
https://blog.csdn.net/watermelonbig/article/details/80646988 k8s中,每个 Pod 都有一个独立的 IP 地址,所有 Pod 在一个网络空 ...
- SpringMVC重要注解 @ControllerAdvice
@ControllerAdvice,是Spring3.2提供的新注解,从名字上可以看出大体意思是控制器增强.让我们先看看@ControllerAdvice的实现: package org.spring ...
- System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls = false
多线程程序中,新创建的线程不能访问UI线程创建的窗口控件,这时如果想要访问窗口的控件,发现无法对其控制. 这时可将窗口构造函数中的CheckForIllegalCrossThreadCalls设置为f ...