jQuery highlightMe Plugin
HTML
<div id="headline">
<h1>Finally, the Web at Hand</h1>
</div>
<div id="1" class="doHighlight">
<p>NEXT week, the first issue of a glossy magazine from the editors of Style.com, with the puzzling name of Style.com/Print, will hit newsstands. The cover shows a close-up of Lindsey Wixson, the model from Kansas with the strawberry-shaped smoocher, framed by a thick lipstick-red border. There are no teasers about what’s inside, just a quote from Ms. Wixson that suggests she will never be known as the Joan Didion of her trade.</p>
</div>
<div id="2" class="noHighlight">
<p>Ever since it was announced this spring that Style.com, the fashion news site started by Condé Nast in 2000, was developing a print version, people have wondered, what exactly is this thing? Can’t I just read it on Twitter? Well, aside from the novelty factor of its origins, it is a surprisingly effective product, one that reads with a swiftness that is not unlike the experience of clicking through multiple screens at a time. The first 100 pages can be read in five minutes.</p>
</div>
<div id="3" class="doHighlight">
<p>“We wanted to give the reader a sense of what it is like to go through the journey of the shows, from New York to London to Milan to Paris,” said Dirk Standen, the editor of Style.com. The idea was basically to create a collectible distillation of what happened during the spring 2012 runway season, which ended only three weeks ago. It will cost $14.99 on newsstands, or $4.99 plus shipping if ordered online before Monday.</p>
</div>
CSS
div{
padding:3px; margin:5px;
}
h1{font-weight:bold;font-size:1.5em;}
.highlight{
background-color:#ff0000;
color:#fff;
}
.myHighlight{
font-weight:bold;
text-decoration:underline;
}
JavaScript
(function($){
$.fn.highlightMe = function () {
//define vars here to prevent unwanted hoisting
var re, hClass, reStr,
argType = $.type(arguments[0]),
defaultTagName = $.fn.highlightMe.defaultTagName;
//handle argument 1
if ( argType === "regexp" ) {
//regular expression
re = arguments[0];
alert('regex: '+re);
}
else if ( argType === "array" ) {
//join array elements | separator
reStr = arguments[0].join("|");
alert('prepped array: '+reStr);
}
else if ( argType === "string" ) {
// string with | separator
reStr = arguments[0];
alert('string with separator:'+reStr);
}
// just return since we need argument[0]
// to do our magic.
else {
alert('oh, hey..sorry-');
return;
}
//Handle argument 2
argType = $.type(arguments[1]);
//user defined a css class for highlighting
if ( argType === "string" ) {
hClass = arguments[1];
}
//STILL TESTING THIS
else if ( argType === "boolean" ) {
hClass = "highlight";
if ( reStr ) {
reStr = "\\b" + reStr + "\\b";
}
}
else {
hClass = "highlight";
}
//Handle argument 3, get full word only
if ( arguments[2] && reStr ) {
reStr = reStr = "\\b" + reStr + "\\b";
}
// if re not defined create regex so we can find
// strings to highlight
if (!re) {
re = new RegExp( "(" + reStr + ")", "ig" );
}
// iterate through all matched elements
return this.each( function() {
// get contents
$( this ).find( "*" ).andSelf().contents()
// filter to text nodes not already...