效果:

jquery-highlight在web页面让字符高亮显示_高亮效果



官网：

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html



下载用到的jquery:

hightlight用到的jquery


放到与静态页面并列的目录中 

jquery-highlight在web页面让字符高亮显示_javascript_02



使用方法 在页面的头文件中加入

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

  <script type="text/javascript" src="../js/jquery.highlight.js"></script>
 
 <style> .highlight{background-color: #FFFF88;} </style>
 
<script language="JavaScript">  $(document).ready(function() {    var href = window.location.href; var strs= new Array();strs=href.split('?'); var str=strs[1]; str= decodeURI(str);  $('*').highlight("物业类别"); }); </script>




.highlight{background-color: #FFFF88;}  可以改颜色

$('*').highlight("物业类别")  意思是在全页面中让 物业类别四个字高亮  如果要把高亮的范围 限制在某个div 或者class里  只要把$('*')修改为相应的选择器就行了

jQuery选择器总结



页面全部代码如下:(可放入txt保存为html直接用浏览器打开看效果)

<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
  <title>华润二十四城规划_产权年限_售楼电话_地址 - 安居客</title>
 <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>

  <script type="text/javascript" src="../js/jquery.highlight.js"></script>
 
 <style> .highlight{background-color: #FFFF88;} </style>
 
<script language="JavaScript">  $(document).ready(function() {    var href = window.location.href; var strs= new Array();strs=href.split('?'); var str=strs[1]; str= decodeURI(str);  $('*').highlight("物业类别"); }); </script>
 </head>
<body>
  <div id="container"> 
<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
        <tbody>
         <tr> 
          <td width="50%"><strong>物业类别 </strong> 住宅、普通住宅 </td> 
          <td width="50%"><strong>项目特色 </strong>小户型,复合地产,特色别墅,酒店式公寓</td> 
         </tr> 
         <tr> 
          <td width="50%"><strong>建筑类别 </strong> 塔楼 小高层 </td> 
          <td width="50%"><strong>装修状况 </strong>暂无资料</td> 
         </tr> 
         <tr> 
          <td width="50%"><strong>环线位置 </strong> <span class="fline"><a href="http://newhouse.cd.soufun.com/house/%B3%C9%B6%BC__%C8%FD%BB%B7%D2%D4%CD%E2_______________1___.htm" target="_blank" style="text-decoration:underline">三环以外</a></span> </td> 
          <td width="50%"><strong>所属商圈 </strong> <span class="zib"><a href="http://newhouse.cd.soufun.com/house/%B3%C9%B6%BC_%CE%C2%BD%AD____%CE%C2%BD%AD____________1___.htm" target="_blank">温江</a></span>   <span class="zib"></span></td> 
         </tr> 
         <tr> 
          <td width="50%"><strong>容 积 率 </strong>3.20 <span class="zi999">[<a title="锦汇城容积率" href="http://jinhuicheng028.soufun.com//house/3211094664/rongjilv.htm" target="_blank">容积率详情</a>]</span></td> 
          <td width="50%"><strong>绿 化 率 </strong>30% <span class="zi999">[<a title="锦汇城绿化率" href="http://jinhuicheng028.soufun.com//house/3211094664/lvhualv.htm" target="_blank">绿化率详情</a>]</span></td> 
         </tr> 
         <tr> 
          <td width="50%"><strong>开盘时间 </strong>2013年10月13日开盘 <span class="zi999">[<a title="锦汇城开盘时间" href="http://jinhuicheng028.soufun.com//house/3211094664/sale_history.htm" target="_blank">开盘时间详情</a>]</span></td> 
          <td width="50%"><strong>交房时间 </strong>预计2015年6月入住 <span class="zi999">[<a title="锦汇城交房时间" href="http://jinhuicheng028.soufun.com//house/3211094664/live_history.htm" target="_blank">交房时间详情</a>]</span></td> 
         </tr> 
         <tr> 
          <td><strong>物 业 费 </strong>暂无资料 </td> 
          <td width="50%"><strong>物业公司 </strong><span class="zib"><a href="http://newhouse.cd.soufun.com/company/3211094664_20130715174651.htm" target="_blank">成都宜居资产管理有限公司</a></span></td> 
         </tr> 
         <tr> 
          <td colspan="2"><strong>开 发 商 </strong> <span class="zib"><a href="http://newhouse.cd.soufun.com/company/3211094664_20130715174633.htm" target="_blank">成都常青藤置业有限公司</a></span>  </td> 
         </tr>
         <tr> 
          <td colspan="2"><strong>预售许可证 </strong> 暂无资料 </td>
         </tr> 
         <tr> 
          <td colspan="2"><strong>售楼地址 </strong>温江区川农大旁学府路（成温邛高速路出口）</td> 
         </tr> 
         <tr> 
          <td colspan="2"><strong>物业地址 </strong>温江成温邛高速北侧（公平镇和万春镇交汇处）<span class="zi999"> [<a href="http://jinhuicheng028.soufun.com//photo/list_901_3211094664.htm" target="_blank">交通图</a>]</span></td> 
         </tr> 
         <tr> 
          <td colspan="2"><strong>交通状况 </strong>公交 904路 川农站<span class="zi999"><a rel="nofollow" href="#jtzk">[更多]</a></span></td> 
         </tr> 
         <tr>
          <td style="font-size:14px;" colspan="2"><strong style="font-size:12px;">锦汇城房价 </strong> <span class="currentPrice fontStyle_sp">均价<strong class="fontStyle_sp">4300</strong>元/平方米 </span> <span class="zi999">[<a rel="nofollow" href="http://jinhuicheng028.soufun.com//house/3211094664/fangjia.htm" target="_blank">房价走势</a>] [<a rel="nofollow" href="/house/web/newhouse_new_info.php?newcode=3211094664" target="_blank">我要纠错</a>] [<a href="http://www.soufun.com/house/tools.htm" target="_blank">房贷计算器</a>]</span> </td> 
         </tr> 
        </tbody>
       </table>
</div> 
</body>
</html>






在某些页面中 如果失效 注意是不是 某些meta和jquery有冲突  把有冲突的引用去掉即可。