Highlight Keywords Làm nổi bật từ khóa với javascript

Trong bài viết về Highlighting Keywords lần trước tôi có minh họa cách đánh dấu từ khóa tìm kiếm với asp.net C#. Nhưng đó là code C#- Xử lý phía Server. Trong bài viết này tôi sẽ tiếp tục chủ đề này với cải tiến hơn đó là thực hiện tại máy client - sử dụng javascript. DEMO

Thông thường khi bạn viết form tìm kiếm bạn đưa từ khóa tìm kiếm lên các parameter của url. Dựa vào đây ta sẽ đánh dấu từ khóa người dùng đang tìm kiếm.
Bước 1: Tạo Style sheet highlight:

<style type="text/css">
 .highlight{
  color:#f00;
  background-color:#ff0;
  font-weight:bold;
 }
 </style>

Bước 2: Viết code javascript phân tích và thêm style sheet cho từ khóa tìm kiếm: 

<script type="text/javascript">
var kw = [];
var qsParm = []; 
function qs() 
{
 var query = window.location.search.substring(1); 
 var parms = query.split('&'); 
 for (var i=0; i<parms.length; i++) 
 {
  var pos = parms[i].indexOf('='); 
  if (pos > 0) 
  {
   var key = parms[i].substring(0,pos); 
   var val = parms[i].substring(pos+1); 
   qsParm[key] = val;
  }
 }
} 
qsParm['keyword'] = null; qs();
if (qsParm['keyword'] != null) kw = qsParm['keyword'].split(',');

function start() 
{
 var bdy = document.getElementsByTagName('body')[0].innerHTML; 
 for (var i = kw.length - 1; i >= 0; i--) 
 {
  var re = new RegExp('(\\b'+kw[i]+'\\b)','ig'); 
  bdy = bdy.replace(re,'<span class="highlight ">$1<\/span>'); 
  var re1 = new RegExp('(<[^>]*?)<span class="highlight">('+kw[i]+')<\/span>(.*?>)','ig'); 
  bdy = bdy.replace(re1,'$1$2$3');
  var re2 = new RegExp('(<script.*?>)<span class="highlight">('+kw[i]+')<\/span>(<\/script>)','ig'); 
  bdy = bdy.replace(re2,'$1$2$3'); 
  var re3 = new RegExp('(<textarea.*?>)<span class="highlight">('+kw[i]+')<\/span>(<\/textarea>)','ig'); 
  bdy = bdy.replace(re3,'$1$2$3');
 } document.getElementsByTagName('body')[0].innerHTML = bdy;
}
window.onload = start;
</script>

Với code javascript trên sẽ tìm các từ khóa (Nếu nhiều từ khóa bạn để phân cách bẳng dấu , ). Và thay thế bằng các thẻ span có class là highlight với các từ khóa này bên trong thẻ Body của trang.

Anh Khoa

Posted in: JS