jquery实现网页查找功能示例分享(2)

在函数highlight()需要做很多事情，1.清空上次高亮显示内容，2.隐藏并清空提示信息，3.判断输入内容为空的情况，4.获取输入的关键字，并与页面内容进行正则匹配，并用flag标记查找到结果，将查找结果高亮显示，5.根据查找结果的数量，确定提示信息的内容和位置偏移量，准确定位并显示提示信息。请看具体代码：

复制代码 代码如下:

$(function(){
    ...
    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');//创建正则表达式，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();
            //将找到的关键字替换，加上highlight属性；
            var newHtml = html.replace(regExp, '<span>'+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;
            }
        }
    }
      ...
});

上述代码中提到的clearSelection()函数用来清空高亮效果，代码如下：

复制代码 代码如下: