Jquery实现页面关键字搜索

浏览数：19 / 时间：2015年06月09日

　<style type="text/css">
　　　.highlight { background-color:yellow; }
　</style>

　<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function ()
    {
        $(‘#search‘).click(highlight);//点击search时，执行highlight函数；

        function highlight()
        {

            clearSelection();//先清空一下上次高亮显示的内容；
            var searchText = $(‘#text‘).val();//获取你输入的关键字；
            var regExp = new RegExp(searchText, ‘g‘);//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
            $(‘p‘).each(function()//遍历文章；
            {
                var html = $(this).html();
                var newHtml = html.replace(regExp, ‘<span class="highlight">‘+searchText+‘</span>‘);//将找到的关键字替换，加上highlight属性；

                $(this).html(newHtml);//更新文章；
            });
        }
        function clearSelection()
        {
            $(‘p‘).each(function()//遍历
            {
                $(this).find(‘.highlight‘).each(function()//找到所有highlight属性的元素；
                {
                    $(this).replaceWith($(this).html());//将他们的属性去掉；
                });
            });
        }
    });
</script>

 

Jquery实现页面关键字搜索,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java html style src class 代码 java html style src

相关文章

随机文章

您可能还喜欢

您可能还喜欢