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

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.

Nguồn: thietkewebsmart.com