ฟังก์ชั่น highlight ข้อความค้นหาด้วย Javascript
โค้ด Javascript สำหรับทำ highlight ข้อความค้นหา ด้วย Javascript (highlight search) ให้ผลลัพท์เหมือนกับที่ผมใช้บนเว็บนี้ สามารถทำ highlight ข้อความด้วยสีต่างๆกันถึง 5 สี (5 ข้อความค้นหา) และที่สำคัญ โค้ดนี้สามารถข้ามข้อความภายใน tag,javascript และ CSS ได้ด้วย ป้องกันการแสดงผลผิดเพี้ยน
สำหรับโค้ดนี้ มีการใช้ CSS เพื่อจัดรูปแบบการแสดงผลให้แตกต่างกัน 5 รูปแบบ(5 ข้อความ Highlight)ครับ (สามารถเพิ่มได้แต่ต้องแก้ไขเล็กน้อย ดูที่เลข 5 แหละครับ)
การใช้งาน และ ตัวอย่าง
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');
}