HTML, CSS & jQuery
<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>jQuery Find and Highlight Text</title> <style> body { background-color:white; padding:40px 10px 10px; font:normal normal 13px/1.4 Arial,Sans-Serif; color:black; } .text-finder { position:fixed; top:0; right:0; left:0; z-index:999; background-color:white; border-bottom:1px solid gray; padding:5px 6px; box-shadow:0 1px 2px rgba(0,0,0,.4); } .highlight { background-color:yellow; /* highlight color */ font-weight:bold; } </style> <script src="//code.jquery.com/jquery-2.0.2.js"></script> <script> /*! highlight v4 Highlights arbitrary terms. <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html> MIT license. Johann Burkard <http://johannburkard.de> <mailto:jb@eaio.com> */ (function($) { $.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().indexOf(pat); if (pos >= 0) { var spannode = document.createElement('span'); spannode.className = 'highlight'; var middlebit = node.splitText(pos); var endbit = middlebit.splitText(pat.length); var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); skip = 1; } } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); } } return skip; } return this.length && pat && pat.length ? this.each(function() { innerHighlight(this, pat.toUpperCase()); }) : this; }; $.fn.removeHighlight = function() { return this.find("span.highlight").each(function() { this.parentNode.firstChild.nodeName; with (this.parentNode) { replaceChild(this.firstChild, this); normalize(); } }).end(); }; })(jQuery); // Text finder form function (function($) { $(document).ready(function() { var $finder = $('#text-finder'), $field = $finder.children().first(), $clear = $field.next(), $area = $(document.body), $viewport = $('html, body'); $field.on("keyup", function() { $area.removeHighlight().highlight(this.value); // Highlight text inside `$area` on keyup $viewport.scrollTop($area.find('span.highlight').first().offset().top - 50); // Jump the viewport to the first highlighted term }); $clear.on("click", function() { $area.removeHighlight(); // Remove all highlight inside `$area` $field.val('').trigger("focus"); // Clear the search field $viewport.scrollTop(0); // Jump the viewport to the top return false; }); }); })(jQuery); </script> </head> <body> <form id="text-finder" class="text-finder" action="javascript:;"> <input type="text" placeholder="Find..."> <input type="reset" value="×"> </form> Content goes here... </body> </html>