HTML Text Highlighter

This script highlight keywords in HTML web applications or sites. It was developed for and is best used with small to medium size length of HTML text content. The highlighted items can then be tabbed through.

This piece of code was initially created in an another project to highlight keywords in AJAX search results. This script does not pretend to be perfect, please contribute if you feel something is wrong.

• HTML Text Highlighter Demo

Quick start

1. Add the txtHighlighter.js script in the footer section of your HTML document. (It needs to run after the DOM is loaded)

   <!-- HTML -->
   
   <script src="path_to_your_file/txtHighlither.js"></script>
   

2. In the header section of txtHighlighter.js file, identify the ID selector corresponding to the text content you want to highlight.

   // JS
   
   var targetID = "target";
   

3. Optionally, you can also add in your markup and identify a custom search field. Identify its ID selector in the header section of txtHighlighter.js. If not, a default search field will appear on top of the page.

   <!-- HTML -->
   
   <input id="custom-search-field" class="custom-search-field" type="text" name="search" placeholder="Custom Search Field" tabindex="1"/>
   

   // JS
   
   var inputID = "custom-search-field";
   

Features

• Small to Medium size HTML content text highlighting.
• Instant text highlighting onkeyup.
• Tab through the highlighted items.
• No JS libraries dependencies.
• Default search field functionality.

Contributing

Anyone and everyone is welcome to contribute.

Note: I know very little about Javascript. I just started to learn it couple weeks ago. I am always looking for constructive feedback, learning buddies and/or opportunities! Learning material: Thanks to Eloquent JavaScript and the MDN - Mozilla Developer Network