การค้นหาข้อความบนเพจด้วย Javascript และทำ highlight ข้อความที่พบ ด้วย tag ที่กำหนดโดย highlightStartTag จนถึง highlightEndTag และสามารถกำหนดรูปแบบการทำ highlight ได้ด้วย CSS

ตัวอย่างการใช้งานก็การค้นหารายชื่อเว็บไซต์บนเว็บไดเร็คทอรี่ครับ

<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>