Pure JavaScript Search and Text Highlighting

Post Date: Dec 23 2009
Total Visit: 7593

You can see the Google search results and many other sites that have good search functionality. When you perform a search, your words or phrases are highlighted in the search results making it easy to find out the most relevant content.

From this page today I'm going to show you a simple way to searching and replacing on. Here some text are already highlighted because I called the highlight search function from "onload" even in the <body> tag. You can also highlight your own search text by clicking the buttons below. If you want to use  this code on your search area, just copy the JavaScript functions from the source of this page.


Here the highlight search text function has an optional parameter which is determine whether the individual words in a search term should be highlighted separately, or if they should be treated as a phrase. By default, texts will be split and highlighted individually.

One possible use of this code is to write a JavaScript function to check the document referrer, and if someone has reached this page from a search engine, then the search texts that brought the visitor here could automatically be highlighted when the page loads by calling the function in the "onload" event of the <body> tag.

Some time you guys want to search and replace only that block which you would like, not overall  content of the page. Here many text blocks that are  formatted with <DIV> and this block also formatted with DIV but ID is "test". Now if you search text by clicking the buttons below then it will search and highlight under this block only not overall page.


Some notes about using these functions:

 

  • you can  call onload event of the body tag functions  from a button or link or something that's triggered after the page is loaded.
  • The performance may slow if large number of matches on a big web page.
  • If there are HTML tags between letters of a word or between words in a phrase, then the word/phrase will not be highlighted as a match. For example, a search for "plant" will not match the word Sujit, because the HTML representation of the word is "s<u>uji</u>t", and the HTML tags will throw the search off. Likewise, if you highlight part of a word using a search, and then try to highlight the word itself, the word will not be matched for the same reason (if you search for and highlight "it" and then try to search for and highlight "sujit", you won't get any matches for "sujit" because the HTML for the word will have been changed to "su<highlightStartTag>jit<highlightEndTag>").
  • I tested this code with IE6, IE7, IE8, mozilla Firefox, Google chrome, safari and it worked. Now I suppose the code is cross-browser compatible.

 

Tags: javascript, search, text, highlighting Bookmark and Share

To do articles more effectively, we need your comments or suggestions on how to improve the articles and make it more useful, or what other articles you would like in the future. Please CLICK HERE and leave your feedback. Thanks!!!