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

本文主要是介绍jquery-highlight在web页面让字符高亮显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果:

官网：

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

下载用到的jquery:

hightlight用到的jquery

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

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

<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有冲突把有冲突的引用去掉即可。

这篇关于jquery-highlight在web页面让字符高亮显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！