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

最新推荐文章于 2023-07-31 13:59:04 发布

不如喫茶去

最新推荐文章于 2023-07-31 13:59:04 发布

阅读量2.1k

点赞数

分类专栏： Js学习之路文章标签： js实现ctrl+f功能 js锚点 js查找内容 js查找并高亮显示

本文链接：https://blog.csdn.net/qq_32737755/article/details/86596166

版权

Js学习之路专栏收录该内容

14 篇文章 0 订阅

订阅专栏

由于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略渣，因此用了简单的锚点来实现，可以说是投机的实现方式。