Pure JavaScript Search and Text Highlighting

December 23, 2009


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.

 

Post a Comment

Your email address will not be published. Required fields are marked *

*


  • Recent Posts

    • Secure Your CodeIgniter Application using CSRF Token

      27.10.2014
      by admin
      In this tutorial, we will learn how to make our website more secure & protect from CSRF when we are using CodeIgniter web application framework. We thanks CodeIgniter team who giving in built support Cross Site Rquest Forgery (CSRF or XSRF). To enable CSRF protection CodeIgniter Framework will automatically protect forms or AJAX calls from CSRF when […]
    • Multiple Themes in CodeIgniter like WordPress

      07.08.2014
      by admin
      Create multiple themes and select one of them from backend like wordpress is drawbacks of a framework. Similar CodeIgniter have not an option to select one theme from multiple theme concept but we can re arrange using CodeIgniter template concept. We are going to handle multiple themes in a very simple way, in this example […]
    • How to create REST API in PHP?

      13.07.2014
      by admin
      REST (Representational State Transfer) is the standard design architecture for developing web services API. It is simple easy to understand and developing client-server relationship API. REST takes advantage of the HTTP request methods to layer itself into the existing HTTP architecture. We can handle GET, PUT, POST, DELETE operations through it. A REST API allows […]
    • Basic security vulnerabilities in php code

      16.10.2013
      by admin
      Today I have informed PHP programmers of common security mistakes that can be overlooked in PHP scripts. In the beginning programmers fail to understand about the PHP security issues or how to make secure script. The wise programmer knows that the real question is how secure a site is. Here I have focus how to […]
    • Generating CAPTCHA Image Using PHP

      29.12.2009
      by admin
      The CAPTCHA is a very very useful test to prevent abuse on the websites. When you create a web form like registration, login, contact us, blog comment etc…, We are suffering day by day with unwanted email or web spam abuse. So if you use CAPTCHA on your website forms, this can help in stopping […]
Copyright © 2012-2013 Sujit Shah. .
Tags: PHP Programmer Nepal, Web Developer Nepal, Website Designer, CodeIgniter Developer, Yii Framework, Wordpres, OpenCart, Drupal, Front End Developer, Responsive Developer, Bootstrap, Foundation, Freelance PHP MySql Programmer Nepal, Expert Programmer Nepal, PHP, MySql, LAMP, Linux, Apache, SVN, JavaScript, Ajax, jQuery, HTML, HTML5, CSS, CSS3, XML, SOAP, PSD to XHTML, Responsive Web Design, Web Development, CMS, E-commerce, Classified, Job portal, Travel & tours, Penny Auction, Lowest Unique Bid Auction, Reverse Auction, Price Reveal Auction, Payment Gateway Integration, Nepal, India, Hong Kong, Australia, UK, USA, Singapore, Germany, Canada, Netherlands, New Zealand, Norway, Italy