jQuery实现页面关键字搜索

　<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>

 

转载于:https://www.cnblogs.com/yyx3254/p/3739162.html