由于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略渣，因此用了简单的锚点来实现，可以说是投机的实现方式。
版权声明：本文为qq_32737755原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。