โค้ด Javascript สำหรับทำ highlight ข้อความค้นหา ด้วย Javascript (highlight search) ให้ผลลัพท์เหมือนกับที่ผมใช้บนเว็บนี้ สามารถทำ highlight ข้อความด้วยสีต่างๆกันถึง 5 สี (5 ข้อความค้นหา) และที่สำคัญ โค้ดนี้สามารถข้ามข้อความภายใน tag,javascript และ CSS ได้ด้วย ป้องกันการแสดงผลผิดเพี้ยน

function HighlightSearch(docId, search) {
   if(search != ''){
     var doc = $E(docId);
     if(doc){
       var c = doc.innerHTML;
       var d = search.split(' ');
       for (var i = 0; i < d.length; i++) {
         c = doHighlight(c, d[i], i);
       }
       doc.innerHTML = c;
    }
  }
}

function doHighlight(source, search, index) {
   var newtext = "";
   var i = -1;
   var lsearch = search.toLowerCase();
   var lsource = source.toLowerCase();
   while (source.length > 0) {
     i = lsource.indexOf(lsearch, i+1);
     if (i < 0) {
       newtext += source;
       source = "";
   } else {
       if (source.lastIndexOf(">", i) >= source.lastIndexOf("<", i)) {
         if (lsource.lastIndexOf("/script>", i) >= lsource.lastIndexOf("<script", i) && lsource.lastIndexOf("/style>", i) >= lsource.lastIndexOf("<style", i)) {
           newtext += source.substring(0, i) + '<span class="search term' + (index % 5) + '">' + source.substr(i, search.length) + '</span>';
           source = source.substr(i + search.length);
           lsource = source.toLowerCase();
           i = -1;
         }
       }
     }
   };
  return newtext;
}

สำหรับโค้ดนี้ มีการใช้ CSS เพื่อจัดรูปแบบการแสดงผลให้แตกต่างกัน 5 รูปแบบ(5 ข้อความ Highlight)ครับ (สามารถเพิ่มได้แต่ต้องแก้ไขเล็กน้อย ดูที่เลข 5 แหละครับ)

span.search {
  color: #66F;
}
span.term0 {
  background: #FDDFFF;
}
span.term2 {
background: #ECD5D5;
}
span.term1 {
background: #CDE9CD;
}
span.term3 {
    background: #DEEAFE;
}
span.term4 {
  background: #FDE1E7;
}

การใช้งาน และ ตัวอย่าง

window.onload = function(){
   HighlightSearch('content', 'HighlightSearch doHighlight');
}