查出來的資料, 透過 jQuery 反白關鍵字

某一個專案, 提供了 "查詢" 功能, 允許使用者輸入某些關鍵字, 並希望查出來的資料, 遇到 user 輸入的關鍵字時, 要反白(或高亮, hightlight) 顯示.

這有2個做法.
1. Server Side 解決: web server 丟出來的資料就反白好.
2. Client Side 解決: 透過 javascript 或 jQuery 解決.

這次要分享怎麼透過 client side 解決.

step1: include jQuery
step2: 隨便給要 highlight 的 block 一個 classname
step3: 呼叫下面的 javascript, 把 block 裡的 keyword highlight.
step4: 報告完畢.


範例 jQuery 如下:

<script language='javascript'>
var keyword;
keyword = '123';
$('.Title').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});
$('.tel').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});
$('.address').html(function() {
    return $(this).html().replace(keyword,"<font color=\"red\">"+keyword+"</font>");
});

</script>

說明:
1. 把所有 class='Title' 的 block 裡出來 '123' 都變成 紅色字體.
2. 把所有 class='tel' 的 block 裡出來 '123' 都變成 紅色字體.
3. 把所有 class='address' 的 block 裡出來 '123' 都變成 紅色字體.