Html5通过js进行页面内搜索

近来使用网页页面查找
百度几个，进行测试，有一个不错，使用很方便，整理进行收藏，备用，网址如下：
https://www.helloweba.com/view-blog-246.html

/*将搜索输入框置顶*/    (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);        $('#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) == "") {                showTips("请输入关键字", _searchTop, 3, _searchLeft);                return;            }            //查找匹配            var searchText = $('#searchstr').val();            var regExp = new RegExp(searchText, '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>');                $(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()); //将他们的属性去掉；                });            });        }        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));        }    })

---

html5代码

<div id="search_box">        <input class="textbox" id="searchstr" type="text" size="10"            name="searchstr" /> <input class="sbttn" id="search_btn"            type="button" value="页内查找" />    </div>    <div id="content"></div>