在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. Spring @Conditional注解的使用

    Spring Boot的强大之处在于使用了Spring 4框架的新特性:@Conditional注释,此注释使得只有在特定条件满足时才启用一些配置. 下面来介绍如何使用Condition 首先写一个类 ...

  2. PAT1039: Course List for Student

    1039. Course List for Student (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...

  3. PowerDesigner如何将设计的表更新到数据库中

    前言: 软件开发的过程中,将设计的表更新到数据库中是一件繁琐的事情,使用好工具,能够事半功倍. 环境介绍:Oracle 11g x64 前期准备: 1.PowerDesigner工具(本人是32位的) ...

  4. redis与python交互

    import redis #连接 r=redis.StrictRedis(host="localhost",port=6379,password="sunck" ...

  5. 如何查找Linux服务器上JDK安装路径?

    成功远程到你要部署软件的Linux服务器上.这是第一步. 查看JDK版本:java -version 查看java执行路径:which java 查看JAVA_HOME路径:echo $JAVA_HO ...

  6. config.go

    package blog4go import ( "encoding/xml" "errors" "io/ioutil" "os& ...

  7. lease.go

    package ) type:]...) :]...) )*time.Second) )     go func() {         select {         case <-stop ...

  8. vue不是内部或外部命令解决验证方案

    一.前提 1.该教程是在你已经安装配置好node.js和express情况下 2.你已经完成了vue和vue-cli的全局安装 3.完成以上2步后,使用vue指令,会显示"vue不是内部或外 ...

  9. STM32基于固件库新建MDK工程模板(精简版)

    上个博文理论讲解的东西太多,太复杂,这里把所有步骤全部贴出 1.新建一个工程文件夹LED 2.LED文件夹下建立如下文件夹 3.Project –>New Uvision Project 到US ...

  10. String去重方法

    思路:利用集合的contains方法将某个字符串中的集合中没有的单个字符添加到集合中,然后再将集合中每个元素做拼接 @Test public void aa5(){ String aa="a ...