在html页面上,有时候会遇到一些检索高亮显示的问题,具体用js是实现的方式,代码展示。

Jsp页面设置方式

<li class="pull-left" id="search_box">
    <input type="text"  id="searchstr" name="searchstr"   placeholder="请输入要查找的内容">
 <%--   <input
class="textbox" id="searchstr" type="text"
size="10" name="searchstr" />
 --%>
   <%-- <input
class="sbttn" id="search_btn" type="button"
value="页内查找" />--%>
   
<button   id="search_btn" type="button" >搜索</button></li>

CSS样式控制

<link rel="stylesheet" type="text/css" href="../css/main.css" />
<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;  }
    .prelight { background: blue; color: white; }
    #tip { background: #FFFFCC; border: 1px solid #999; width: 200px; text-align: center; display: none; font-size: 12px; }
    #search_box text-align:right }
    #search_btn { background-color:#0a64ad; border: 0px; color: white;margin-left:-5px; }
    #searchstr { font-size: 14px; height: 30px; }
</style>

js实现

 <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        (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 = $("#lawcontent").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 ) );
            }
        })
        /**/
   
</script>

js实现在当前页面搜索高亮显示字的方法的更多相关文章

  1. js灵活打印web页面区域内容的通用方法

      我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...

  2. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  3. js中常用framesetiframe页面跳转传参方法实例大全

    logf的空间

  4. IDEA 2018.3.5,修改js文件,html页面不及时更新

    问题描述 使用IDEA 开发时,修改js文件,前端页面不能及时更新. 解决方法: 1. IDEA settings--> Compiler --> Build project automa ...

  5. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  6. jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!

    今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...

  7. JS 页面繁简字转换

    // 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示// 在用户第一次访问网页时,会自动检测客户端语言进行操作并提示.此功能可关闭// 本程序只在UTF8编码下测 ...

  8. FlexPaper二次开发问题及搜索高亮显示

    原文:FlexPaper二次开发问题及搜索高亮显示 最近有个需求,做一个IT知识库,类似于文库,说到文库肯定会用到在线浏览文档了,所有在网上翻阅了一下类似豆丁的在线浏览器插件的资料,将其进行了二次开发 ...

  9. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

随机推荐

  1. PAT1082:Read Number in Chinese

    1082. Read Number in Chinese (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  2. springboot中自定义根路径的配置

    Spring boot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application ...

  3. 优雅的玩PHP多进程

    proc_open (PHP 4 >= 4.3.0, PHP 5, PHP 7) proc_open — 执行一个命令,并且打开用来输入/输出的文件指针. 说明¶ resource proc_o ...

  4. 2101: Bake Off

    Description Davy decided to start a weekend market stall where he sells his famous cakes. For the fi ...

  5. Python random() 函数

    描述 random() 方法返回随机生成的一个实数,它在[0,1)范围内. 语法 以下是 random() 方法的语法: import random random.random() 注意:random ...

  6. CSS实现核辐射警告标志

    今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的. 我一直努力想用一 ...

  7. CAN总线的显性电平与隐性电平

    读CAN总线的书时,都会涉及到总线电平的问题,CAN总线的电平分为显性电平与隐性电平,这是CAN总线物理层的核心部分,也是总线仲裁的基础.那何为显性,何为隐性呢? 根据孔丙火(微信公众号:孔丙火)的理 ...

  8. Python数据结构应用4——搜索(search)

    Search是数据结构中最基础的应用之一了,在python中,search有一个非常简单的方法如下: 15 in [3,5,4,1,76] False 不过这只是search的一种形式,下面列出多种形 ...

  9. Java Applet 与Servlet之间的通信

    1 Applet对Servlet的访问及参数传递的实现 2.1.1创建URL对象 在JAVA程序中,可以利用如下的形式创建URL对象 URL servletURL = new URL( "h ...

  10. validatebox相关验证

    $(document).ready( function(){ $.extend($.fn.validatebox.defaults.rules, { minLength: { validator: f ...