简单js模仿浏览器crtl+f功能

由于crtl+f在某些浏览器中并不是十分好用（比如查找一些特殊字符串），就用js简单的写了一个例子模仿crtl+f，实现输入内容点击查找，高亮标注匹配值，并跳到第一个高亮值处，点击下一个跳到第二个高亮值处...。

前端代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<title>简单模仿 crtl+f</title>
<style type="text/css">.fixe{margin: 0 auto;position: fixed;}
</style>
</head>
<body><div class="fixe"><input id="searchtxt" type="search"><input id="searchbtn" type="button" value="查找"><input id="searchbtn11" type="button" value="查找下一个"></div><br><br><br><br><br><br><div class="pretimet">西丰、五女山、<span>E22-+1/p-aTLj-KUCv-t//b-YrV5</span>雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、<a>迎宾路</a></div><br><br><br><br><br><br><div class="pretimet">西丰、五女山、<span>E22-+1/p-aTLj-KUCv-t//b-YrV5</span>雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、<a>迎宾路</a></div><br><br><br><br><br><br><div class="pretimet">西丰、五女山、<span>E22-+1/p-aTLj-KUCv-t//b-YrV5</span>雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、<a>迎宾路</a></div>.................................... 如果测试，请多复制点div</body>
</html>

<script>
var j = 0;
String.prototype.Trim = function(){//去空格return this.replace(/(^\s*)|(\s*$)/g, "");
}
window.onload = function(){document.getElementById("searchbtn").onclick = function(){var content = document.getElementsByClassName("pretimet");var searchtext = document.getElementById("searchtxt");var value = searchtext.value.Trim();if(!value){alert("请输入内容！");return;}var j = 0;for (var i = 0; i < content.length; i++) {var str = content[i].innerText;if(str == null){str = content[i].textContent;}var values = str.split(value);content[i].innerHTML = values.join('<span id= "animateDian_'+j+'" style="background:yellow;">' + value + '</span>');if(content[i].innerHTML.indexOf("<span",1) > 0){j++;}}window.location.hash = "animateDian_0"; //定位到第一处锚点document.getElementById("searchbtn11").onclick = function(){//点击查找下有一个按钮，查找当前的锚点var animate = location.hash;//将锚点值 分割为数组（两个值animateDian 和 后面的数字）animate = animate.split("_");var animateLen = parseInt(animate[1])+1;//跳到末尾后，回到第一个锚点if (animateLen >= j) {  //此处用到j因此 j应该定义为全局变量animateLen = 0;}animate = animate[0]+"_"+animateLen;window.location.hash = animate;}}}
</script>

以上是js代码，我js略渣，因此用了简单的锚点来实现，可以说是投机的实现方式。

简单js模仿浏览器crtl+f功能相关推荐

Html5结合JS实现浏览器全屏功能
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
用js模仿word格式刷功能
<script type="text/javascript"> </script> 运行代码 (PS:如果你要拷贝代码下去测试,不要直接拷贝下面的代码,下面 ...
python实现浏览器ctrl+f页面搜索功能_JS 页面内容搜索，类似于 Ctrl+F功能的实现代码...
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码更新时间:2007年08月13日 19:58:11 作者: WinWebMail 帮助查看:[大字中字小字] 登录系统时的增强安全 ...
【转】js实现复制到剪贴板功能，兼容所有浏览器
2019独角兽企业重金招聘Python工程师标准>>> 两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家 ...
浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
js屏蔽浏览器（IE和FireFox）的刷新和右键等功能
js屏蔽浏览器(IE和FireFox)的刷新和右键等功能一.js屏蔽浏览器(IE和FireFox)的刷新功能 document.οnkeydοwn=function() { if ((wind ...
JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
安卓手机如何打开php文件夹,Android_Android中调用系统的文件浏览器及自制简单的文件浏览器，调用系统自带的文件浏览器- phpStudy...
Android中调用系统的文件浏览器及自制简单的文件浏览器调用系统自带的文件浏览器这很简单: /** 调用文件选择软件来选择文件 **/ private void showFileChooser() ...
使用TensorFlow.js在浏览器中进行深度学习入门
目录设置TensorFlow.js 创建训练数据检查点定义神经网络模型训练AI 测试结果终点线内存使用注意事项下一步是什么?狗和披萨? 下载TensorFlowJS示例-6.1 MB T ...

简单js模仿浏览器crtl+f功能

简单js模仿浏览器crtl+f功能相关推荐

最新文章

热门文章