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

2020-05-23 06:17:02易采站长站整理

        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 class=”highlight”>’+searchText+'</span>’);
            $(this).html(newHtml);//更新;
            flag = 1;