标签:style blog class c code java
<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实现页面关键字搜索,布布扣,bubuko.com
标签:style blog class c code java
原文地址:http://www.cnblogs.com/yyx3254/p/3739162.html