js 本页面搜索查找，包含查找下一个

Savalone

发布于 2020-02-11 04:46:21

2.1K00

代码可运行

文章被收录于专栏：Savalone's BlogSavalone's Blog

运行总次数：0

代码可运行

这个功能和浏览器自带的 Ctrl+F 属于重复了，但在某些地方还是需要这样的功能的，包括封装、自定义搜索样式等。

demo 下载：

本页面搜索demo.zip

效果：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>页内查找相关内容demo</title>
<style type="text/css">
.demo{width:800px; margin:40px auto 0 auto; min-height:250px; font-size:14px}
.demo p{line-height:22px}
.demo p strong{color:#f30}
.highlight { background: yellow; color: red; }
.prelight { background: blue; color: white; }
#tip { background: #FFFFCC; border: 1px solid #999; width: 200px; text-align: center; display: none; font-size: 12px; }
#search_box { background: white; opacity: 0.8; text-align:right }
#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px; width: 100px; line-height: 24px; color: white; }
#searchstr { font-size: 14px; height: 20px; }
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/search_demo.js"></script>
</head>
<body>
   <div class="demo">
     <div id="search_box" style="position: relative; top: 0px; left: -184px;">
<input class="textbox" id="searchstr" type="text" size="10" name="searchstr">　
        <input class="sbttn" id="search_btn" type="button" value="页内查找">
 </div>
<div id="content">
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>
<p>　
　　国政府奖学金留学生接受单位，是教育部首批“卓越法律人才教育培养计划”高校、教育部首 批开展专业学位研究生教育综合改革试点高校。 学校始建于1951年，名为东北教育学院，1953年更名为沈阳师范学院，是当时东北地区创办最 早的两所本科师范院校之一（辽宁省最早）；1965年更名为辽宁第一师范学院；1978年恢复沈阳师 范学院校名；2002年省政府决定并经教育部批准，沈阳师范学院与辽宁教育学院合并组建沈阳师 范大学。 截至2014年，学校占地面积1888.69亩，建筑面积76.36万平方米，藏书200余万册。学校共有全 日制本、专科生22000余人，硕士研究生33永康、运城。</p>

</div>
</div>
</body>
</html>

js部分：

// JavaScript Document
(function($) {
    $.fn.fixDiv = function(options) {
        var defaultVal = {
            top: 10
        };
        var obj = $.extend(defaultVal, options);
$this = this;
        var _top = $this.offset().top;
        var _left = $this.offset().left;
        $(window).scroll(function() {
            var _currentTop = $this.offset().top;
            var _scrollTop = $(document).scrollTop();
            if (_scrollTop > _top) {
                $this.offset({
                    top: _scrollTop + obj.top,
                    left: _left
                });
            } else {
                $this.offset({
                    top: _top,
                    left: _left
                });
            }
        });
        return $this;
    };
})(jQuery);
$(function(){
$("#search_box").fixDiv({ top: 0 });
$('#search_btn').click(highlight);//点击search时，执行highlight函数；
$('#searchstr').keydown(function (e) {
    var key = e.which;
    if (key == 13) highlight();
})
var i = 0;
var sCurText;
function highlight(){
clearSelection();//先清空一下上次高亮显示的内容；
var flag = 0;
    var bStart = true;
$('#tip').text('');
    $('#tip').hide();
    var searchText = $('#searchstr').val();
var _searchTop = $('#searchstr').offset().top+30;
var _searchLeft = $('#searchstr').offset().left;
if($.trim(searchText)=="" || $.trim(searchText)=='.'){
//alert(123);
showTips("请输入查找关键字",_searchTop,3,_searchLeft);
return;
}
var searchText = $('#searchstr').val();//获取你输入的关键字；
var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
var content = $("#content").text();
if (!regExp.test(content)) {
showTips("没有找到要查找的关键字",_searchTop,3,_searchLeft);
        return;
    } else {
        if (sCurText != searchText) {
            i = 0;
            sCurText = searchText;
         }
     }
$('p').each(function(){
var html = $(this).html();
var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');//将找到的关键字替换，加上highlight属性；
$(this).html(newHtml);//更新；
flag = 1;
});
if (flag == 1) {
if ($(".highlight").size() > 1) {
var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height();
var _tip = $(".highlight").eq(i).parent().find("strong").text();
if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text();
var _left = $(".highlight").eq(i).offset().left;
            var _tipWidth = $("#tip").width();
if (_left > $(document).width() - _tipWidth) {
                    _left = _left - _tipWidth;
            }
$("#tip").html(_tip).show();
            $("#tip").offset({ top: _top, left: _left });
            $("#search_btn").val("查找下一个");
}else{
var _top = $(".highlight").offset().top+$(".highlight").height();
var _tip = $(".highlight").parent().find("strong").text();
            var _left = $(".highlight").offset().left;
            $('#tip').show();
            $("#tip").html(_tip).offset({ top: _top, left: _left });
}
$("html, body").animate({ scrollTop: _top - 50 });
        i++;
        if (i > $(".highlight").size() - 1) {
            i = 0;
        }
}
}
function clearSelection(){
$('p').each(function(){
//找到所有highlight属性的元素；
$(this).find('.highlight').each(function(){
$(this).replaceWith($(this).html());//将他们的属性去掉；
});
});
}
//mask
var tipsDiv = '<div class="tipsClass"></div>'; 
$( 'body' ).append( tipsDiv );
function showTips( tips, height, time,left ){ 
var windowWidth = document.documentElement.clientWidth; 
$('.tipsClass').text(tips);
$( 'div.tipsClass' ).css({ 
'top' : height + 'px', 
'left' :left + 'px', 
'position' : 'absolute', 
'padding' : '8px 6px', 
'background': '#000000', 
'font-size' : 14 + 'px', 
'font-weight': 900,
'margin' : '0 auto', 
'text-align': 'center', 
'width' : 'auto', 
'color' : '#fff', 
'border-radius':'2px', 
'opacity' : '0.8' ,
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show(); 
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) ); 
} 
})
/**/