ไฮไลท์ข้อความด้วย Javascript
ตัวอย่างการใช้งานก็การค้นหารายชื่อเว็บไซต์บนเว็บไดเร็คทอรี่ครับ
<style type="text/css">
.search {
background-color:yellow;
color:green;
}
</style>
<script type="text/javascript">
//ตัวอย่างการใช้งาน ค้นหาข้อความทั้งหน้า page
var body = document.getElementsByTagName( 'body' )[0]
doHighlight(body.innerHTML, 'ค้นหา')
function doHighlight ( bodyText , searchTerm )
{
//tag highlight
highlightStartTag = "<font class=\"search\">";
highlightEndTag = "</font>";
var newText = "";
var i = -1;
//แปลงคำค้นหา เป็นตัวพิมพ์เล็กทั้งหมด
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();
while ( bodyText.length > 0 )
{
i = lcBodyText.indexOf( lcSearchTerm , i + 1 );
if ( i < 0 )
{
newText += bodyText;
bodyText = "";
}
else
{
//ข้าม HTML tag
if (bodyText.lastIndexOf( ">", i ) >= bodyText.lastIndexOf( "<" , i ) )
{
//ข้าม Javascript
if ( lcBodyText.lastIndexOf( "/script>" , i ) >= lcBodyText.lastIndexOf( "<script" , i ) )
{
//highlight ข้อความ
newText += bodyText.substring( 0 , i ) + highlightStartTag + bodyText.substr( i , searchTerm.length ) + highlightEndTag;
//ข้อความถัดไป สำหรับการค้นหา
bodyText = bodyText.substr( i + searchTerm.length );
lcBodyText = bodyText.toLowerCase();
i = -1;
};
};
};
};
return newText;
};
</script>