/*
highlight v3 - Modified by Marshal (beatgates@gmail.com) to add regexp highlight, 2011-6-24
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(pattern) {
var regex = typeof(pattern) === "string" ? new RegExp(pattern, "i") : pattern; // assume very LOOSELY pattern is regexp if not string
function innerHighlight(node, pattern) {
var skip = 0;
if (node.nodeType === 3) { // 3 - Text node
var pos = node.data.search(regex);
if (pos >= 0 && node.data.length > 0) { // .* matching "" causes infinite loop
var match = node.data.match(regex); // get the match(es), but we would only handle the 1st one, hence /g is not recommended
var spanNode = document.createElement('span');
spanNode.className = 'highlight'; // set css
var middleBit = node.splitText(pos); // split to 2 nodes, node contains the pre-pos text, middleBit has the post-pos
var endBit = middleBit.splitText(match[0].length); // similarly split middleBit to 2 nodes
var middleClone = middleBit.cloneNode(true);
spanNode.appendChild(middleClone);
// parentNode ie. node, now has 3 nodes by 2 splitText()s, replace the middle with the highlighted spanNode:
middleBit.parentNode.replaceChild(spanNode, middleBit);
skip = 1; // skip this middleBit, but still need to check endBit
}
} else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { // 1 - Element node
for (var i = 0; i < node.childNodes.length; i++) { // highlight all children
i += innerHighlight(node.childNodes[i], pattern); // skip highlighted ones
}
}
return skip;
}
return this.each(function() {
innerHighlight(this, pattern);
});
};
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
this.parentNode.firstChild.nodeName;
with (this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
Here is a test file:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="lib/jquery-1.6.js"></script>
<script type="text/javascript" src="lib/jquery.myhighlight-3.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="row">
<div>
<a class="fullname" href="#"><span class="lastname">Goog</span>, <span class="firstname">Billy</span></a>
<div id="remove">ServIcE: (click me to remove all highlight)</div>
<div><span class="section">Pig & Sheep Serv</span>, <span class="department">Cow Administration & Management</span></div>
<div class="org">Trade Administration, Administration Services</div>
<div id="email">
<a class="email" href="mailto:a@abc.com">a@abc.com</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#row").highlight("service");
$(".lastname").highlight("o");
$(".section").highlight(/g.*ep/i);
$(".department").highlight(/.*/i);
$(".org").highlight(/adm.*(?=, )/i);
$("#email").highlight(/a.c\./);
$("#remove").click(function() {$("#row").removeHighlight();});
});
</script>
</body>
</html>And the result:
Here are the links for the source code:
