日期:2014-05-16  浏览次数:20786 次

关于jquery查找关键字,高亮显示的问题
页面index.aspx中有全文检索,限制输入一个关键字查询,点击后显示list.aspx结果页面,显示对应的新闻标题,点击任意一条新闻,转到read.aspx页,显示具体内容。我想要在内容页面高亮显示所有的关键字。

 //按钮单击时候,生成会话cookies.
     Response.Cookies["key"].Value = System.Web.HttpUtility.UrlEncode (primarySearchtxt.Text.Trim());

//前台

<style type="text/css">
        .key {
            color:white;
            background-color:red;
            font-size:14px;
        }
    </style>
    <script src="script/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="script/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var key = $.cookie('key');
            $("#labBody :contains(key)").wrap("<b></b>").addClass("key");
      }
    );
    </script>


可是前台却没有运作,alert(key)能够显示出我的cookie内容,请高手指教!
------解决方案--------------------
<style type="text/css">
.key {
color:white;
background-color:red;
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var key = '123';

//1.
//$("#labBody :contains("+key+")").wrap("<b></b>").addClass("key");

// or

//2.
$("#labBody").html( function(i, h){
return h.replace(new RegExp(key, 'gi'), '<b class="key">$&</b>');
} )
  }
);
</script>
<div id="labBody">
gdfgdfgd<span>123</span>ggf123fgdfgfgdfg1fd2fd3fd2fdfd
</div>
------解决方案--------------------
正则替换innerHTML,参考#2的第二种方法,第一种放就算包含key也无法给key加粗,因为选择不了文本节点,只能是labBody