kizdolf/highlight.js

## highlight.js
/*

highlight v3  !! Modified by Jon Raasch (http://jonraasch.com) to fix IE6 bug !!

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>

*/

jQuery.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.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};

jQuery.fn.removeHighlight = function() {
 function newNormalize(node) {
    for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
        var child = children[i];
        if (child.nodeType == 1) {
            newNormalize(child);
            continue;
        }
        if (child.nodeType != 3) { continue; }
        var next = child.nextSibling;
        if (next == null || next.nodeType != 3) { continue; }
        var combined_text = child.nodeValue + next.nodeValue;
        new_node = node.ownerDocument.createTextNode(combined_text);
        node.insertBefore(new_node, child);
        node.removeChild(child);
        node.removeChild(next);
        i--;
        nodeCount--;
    }
 }

 return this.find("span.highlight").each(function() {
    var thisParent = this.parentNode;
    thisParent.replaceChild(this.firstChild, this);
    newNormalize(thisParent);
 }).end();
};

## live-text-search.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>On-Page Text Search</title>

<style type="text/css">
.highlight {
    background-color: #fff34d;
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4 */
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
    padding:1px 4px;
    margin:0 -4px;
}
</style>

</head>

<body>

Search: <input type="text" id="text-search" />

<p><b>Web development</b> is a broad term for the work involved in developing a <a href="/wiki/Web_site" title="Web site" class="mw-redirect">web site</a> for the Internet (<a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>) or an <a href="/wiki/Intranet" title="Intranet">intranet</a> (a private network). This can include <a href="/wiki/Web_design" title="Web design">web design</a>, <a href="/wiki/Web_content_development" title="Web content development" class="mw-redirect">web content development</a>, client liaison, <a href="/wiki/Client-side_scripting" title="Client-side scripting">client-side</a>/<a href="/wiki/Server-side_scripting" title="Server-side scripting">server-side</a> <a href="/wiki/Programming" title="Programming" class="mw-redirect">scripting</a>, <a href="/wiki/Web_server" title="Web server">web server</a> and <a href="/wiki/Network_security" title="Network security">network security</a> configuration, and <a href="/wiki/E-commerce" title="E-commerce" class="mw-redirect">e-commerce</a> development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing <a href="/wiki/Markup_language" title="Markup language">markup</a> and <a href="/wiki/Computer_programming" title="Computer programming">coding</a>. Web development can range from developing the simplest static single page of <a href="/wiki/Plain_text" title="Plain text">plain text</a> to the most complex web-based <a href="/wiki/Internet_application" title="Internet application" class="mw-redirect">internet applications</a>, <a href="/wiki/Electronic_business" title="Electronic business">electronic businesses</a>, or <a href="/wiki/Social_network_service" title="Social network service">social network services</a>.</p>
<p>For larger organizations and businesses, web development teams can consist of hundreds of people (<a href="/wiki/Web_developer" title="Web developer">web developers</a>). Smaller organizations may only require a single permanent or contracting <a href="/wiki/Webmaster" title="Webmaster">webmaster</a>, or secondary assignment to related job positions such as a <a href="/wiki/Graphic_designer" title="Graphic designer">graphic designer</a> and/or <a href="/wiki/Information_systems" title="Information systems" class="mw-redirect">information systems</a> technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.</p>

(Text from <a href="http://en.wikipedia.org/wiki/Web_development">Wikipedia</a>)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(function() {
    $('#text-search').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {
            // highlight the new term
            $('body').highlight( searchTerm );
        }
    });
});
</script>

</body>
</html>
	/*

	highlight v3 !! Modified by Jon Raasch (http://jonraasch.com) to fix IE6 bug !!

	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>

	*/

	jQuery.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.each(function() {
	innerHighlight(this, pat.toUpperCase());
	});
	};

	jQuery.fn.removeHighlight = function() {
	function newNormalize(node) {
	for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
	var child = children[i];
	if (child.nodeType == 1) {
	newNormalize(child);
	continue;
	}
	if (child.nodeType != 3) { continue; }
	var next = child.nextSibling;
	if (next == null \|\| next.nodeType != 3) { continue; }
	var combined_text = child.nodeValue + next.nodeValue;
	new_node = node.ownerDocument.createTextNode(combined_text);
	node.insertBefore(new_node, child);
	node.removeChild(child);
	node.removeChild(next);
	i--;
	nodeCount--;
	}
	}

	return this.find("span.highlight").each(function() {
	var thisParent = this.parentNode;
	thisParent.replaceChild(this.firstChild, this);
	newNormalize(thisParent);
	}).end();
	};
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>

	<title>On-Page Text Search</title>

	<style type="text/css">
	.highlight {
	background-color: #fff34d;
	-moz-border-radius: 5px; /* FF1+ */
	-webkit-border-radius: 5px; /* Saf3-4 */
	border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
	}

	.highlight {
	padding:1px 4px;
	margin:0 -4px;
	}
	</style>

	</head>

	<body>

	Search: <input type="text" id="text-search" />

	<p><b>Web development</b> is a broad term for the work involved in developing a <a href="/wiki/Web_site" title="Web site" class="mw-redirect">web site</a> for the Internet (<a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>) or an <a href="/wiki/Intranet" title="Intranet">intranet</a> (a private network). This can include <a href="/wiki/Web_design" title="Web design">web design</a>, <a href="/wiki/Web_content_development" title="Web content development" class="mw-redirect">web content development</a>, client liaison, <a href="/wiki/Client-side_scripting" title="Client-side scripting">client-side</a>/<a href="/wiki/Server-side_scripting" title="Server-side scripting">server-side</a> <a href="/wiki/Programming" title="Programming" class="mw-redirect">scripting</a>, <a href="/wiki/Web_server" title="Web server">web server</a> and <a href="/wiki/Network_security" title="Network security">network security</a> configuration, and <a href="/wiki/E-commerce" title="E-commerce" class="mw-redirect">e-commerce</a> development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing <a href="/wiki/Markup_language" title="Markup language">markup</a> and <a href="/wiki/Computer_programming" title="Computer programming">coding</a>. Web development can range from developing the simplest static single page of <a href="/wiki/Plain_text" title="Plain text">plain text</a> to the most complex web-based <a href="/wiki/Internet_application" title="Internet application" class="mw-redirect">internet applications</a>, <a href="/wiki/Electronic_business" title="Electronic business">electronic businesses</a>, or <a href="/wiki/Social_network_service" title="Social network service">social network services</a>.</p>
	<p>For larger organizations and businesses, web development teams can consist of hundreds of people (<a href="/wiki/Web_developer" title="Web developer">web developers</a>). Smaller organizations may only require a single permanent or contracting <a href="/wiki/Webmaster" title="Webmaster">webmaster</a>, or secondary assignment to related job positions such as a <a href="/wiki/Graphic_designer" title="Graphic designer">graphic designer</a> and/or <a href="/wiki/Information_systems" title="Information systems" class="mw-redirect">information systems</a> technician. Web development may be a collaborative effort between departments rather than the domain of a designated department.</p>

	(Text from <a href="http://en.wikipedia.org/wiki/Web_development">Wikipedia</a>)

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
	"></script>
	<script type="text/javascript" src="highlight.js"></script>
	<script type="text/javascript">
	$(function() {
	$('#text-search').bind('keyup change', function(ev) {
	// pull in the new value
	var searchTerm = $(this).val();

	// remove any old highlighted terms
	$('body').removeHighlight();

	// disable highlighting if empty
	if ( searchTerm ) {
	// highlight the new term
	$('body').highlight( searchTerm );
	}
	});
	});
	</script>

	</body>
	</html>