Search HTML page content using Javascript

I was helping a friend on a forum recently, and found quite a nifty tool to help him have a huge downloadable page, and keep the search functionality, and it was by using Javascript to make a Search function loop through the HTML elements within the page and detect the search results and highlight them using CSS. Anyway enough blabber, here is the code:

The Javascript/HTML shows you what you need to put in place for the HTML form when posting (note this is NOT HTML strict valid - only Transitional).

HTML and Javascript search form
1
2
3
4
5
6
<form>
<input type="text" size="200" style="padding:2px;" id="text" />
<a href="#" onclick="javascript:void($('body').removeHighlight().
highlight(document.getElementById('text').value)); return false;">
Search</a>
</form>

Here is the CSS I used to highlight the text found by the Javascript Search functions.
1
2
3
<style type="text/css">
.highlight { background-color: yellow }
</style>

Also here are the links to the two Javascript files you will need for the above to work.

You will need jQuery, and a file using the jQuery library jquery.highlight.js
Javascript

Buy me a beer or a book?

amazon PayPal - The safer, easier way to donate online!

Free Downloads