jquery-highlight Webページで文字をハイライト表示
効果:
公式サイト:
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
使用するjqueryをダウンロードします.
hightlightが使用するjquery
静的ページと並ぶディレクトリに配置
使用方法ページのヘッダファイルに追加
.highlight{background-color: #FFFF88;} 色を変えることができます
$('*')/highlight(「不動産カテゴリ」) 全ページで不動産カテゴリの4文字をハイライトするという意味です ハイライトされた範囲をdivまたはclassに制限する場合は $('*')を対応するセレクタに変更すればいいだけです
jQueryセレクタまとめ
ページのすべてのコードは以下の通りです:(txtを入れてhtmlに保存して直接ブラウザで開いて効果を見ることができます)
一部のページで失効した場合、metaとjqueryが競合しているかどうか注意します. 衝突した引用を消せばいい.
公式サイト:
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(「不動産カテゴリ」) 全ページで不動産カテゴリの4文字をハイライトするという意味です ハイライトされた範囲を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が競合しているかどうか注意します. 衝突した引用を消せばいい.