jquery页面内容查找

180it 2020-05-06 PM 44℃ 0条

jquery页面内容查找

思路:
利用RegExp正则表达式进行匹配;
在搜索框下方显示搜索提示;
对匹配性进行高亮显示;
对多个匹配性进行逐个区别显示;
再次搜索时清除上次匹配结果;
固定搜索框。
代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery页面内容查找</title>
    <style>
        .disshow {
            display: none;
        }
 
        .highlight {
            color: #fb4232;
            background-color: #ff0;
            border: 1px solid transparent;
        }
 
        .highlight.select {
            background-color: #ddd;
            border: 1px solid #999;
        }
 
        .search {
            position: relative;
            margin-bottom: 40px;
        }
 
        .searchTip {
            padding: 5px 10px;
            position: absolute;
            top: 10px;
            left: 0;
            background: #333;
            box-shadow: 4px 5px 7px 1px #999;
            color: #fff;
            opacity: 0.9;
        }
    </style>
</head>
<body>
<div class="search">
    <input id="key-word" class="key-word" value="请输入搜索内容"/>
    <button id="search-button">搜索</button>
    <p class="searchTip disshow"></p>
</div>
<div id="mainContent">
    <p>在 ES5 中,RegExp构造函数的参数有两种情况。</p>
    <p>第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。</p>
    <p>第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。</p>
    <p>但是,ES5 不允许此时使用第二个参数添加修饰符,否则会报错。</p>
    <p>ES6 改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。</p>
    <p>上面代码中,原有正则对象的修饰符是ig,它会被第二个参数i覆盖。</p>
    <p>字符串对象共有 4 个方法,可以使用正则表达式:match()、replace()、search()和split()。</p>
    <p>ES6 将这 4 个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上。</p>
    <p>ES6 对正则表达式添加了u修饰符,含义为“Unicode 模式”,用来正确处理大于\uFFFF的 Unicode 字符。也就是说,会正确处理四个字节的 UTF-16 编码。</p>
    <p>上面代码中,\uD83D\uDC2A是一个四个字节的 UTF-16 编码,代表一个字符。但是,ES5 不支持四个字节的 UTF-16 编码,会将其识别为两个字符,导致第二行代码结果为true。加了u修饰符以后,ES6 就会识别其为一个字符,所以第一行代码结果为false。</p>
    <p>一旦加上u修饰符号,就会修改下面这些正则表达式的行为。</p>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
 
<script>
    (function ($) {
//    $.fn===$.prototype,把fixDiv方法扩展到了对象的prototype上
//        搜索框定位
        $.fn.fixDiv = function (options) {
            var defaultVal = {
                top: 20
            }
            var obj = $.extend(defaultVal, options)
            $this = this;
            var _top = $this.offset().top;
            var _left = $this.offset().left;
            $(window).scroll(function () {
                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 () {
//        调用fixDiv方法
        $('.search').fixDiv({top: 10});
        $('#search-button').click(hightLight);
//        回车进行搜索
        $('.key-word').keydown(function (e) {
            var key = e.which;
            if (key == 13) hightLight();
        })
 
        var index = 0;
        var historyText;
 
        function hightLight() {
            clearSelection();
            var flag = 0;
 
            var inpText = $('#key-word').val();
            var regExp = new RegExp(inpText, 'g');
            var content = $('#mainContent').text();
            if ($.trim(inpText) == '') {
                showTips('请输入查找内容');
                return;
            }
            if (!regExp.test(content)) {
                showTips('未找到匹配项');
                return;
            } else {
                if (historyText != inpText) {
                    index = 0;
                    historyText = inpText;
                }
            }
            $('#mainContent p').each(function () {
                var html = $(this).html();
                var newhtml = html.replace(regExp, '<span class="highlight">' + inpText + '</span>');
                $(this).html(newhtml);
                flag = 1;
            })
            if (flag == 1) {
                var _top = $(".highlight").eq(index).offset().top;
                $(".highlight").eq(index).addClass('select').siblings('.highlight').removeClass('select');
                $("#search-button").html("查找下一个");
                $("html, body").animate({scrollTop: _top-50});
                index++;
                if (index > $(".highlight").size() - 1) {
                    index = 0;
                }
            }
        }
//    清除选择
        function clearSelection() {
            $('#mainContent p').each(function () {
                $(this).find('.highlight').each(function () {
                    $(this).replaceWith($(this).html());
                })
            })
        }
//    显示提示信息
        function showTips(text) {
            $('.search .searchTip').text(text);
            $('.search .searchTip').removeClass('disshow').show();
            setTimeout(function () {
                $('.search .searchTip').fadeOut()
            }, 2000);
        }
    })
</script>
</body>
</html>
支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章或资源对您有帮助,欢迎打赏作者。一路走来,感谢有您!

标签: none

jquery页面内容查找