2 * Plugin that highlights matched word partials in a given element
3 * TODO: add a function for restoring the previous text
4 * TODO: accept mappings for converting shortcuts like WP: to Wikipedia:
10 // Split our pattern string at spaces and run our highlight function on the results
11 splitAndHighlight: function( node
, pat
) {
12 var patArray
= pat
.split(" ");
13 for ( var i
= 0; i
< patArray
.length
; i
++ ) {
14 if ( patArray
[i
].length
== 0 ) continue;
15 $.highlightText
.innerHighlight( node
, patArray
[i
] );
19 // scans a node looking for the pattern and wraps a span around each match
20 innerHighlight: function( node
, pat
) {
21 // if this is a text node
22 if ( node
.nodeType
== 3 ) {
23 // TODO - need to be smarter about the character matching here.
24 // non latin characters can make regex think a new word has begun: do not use \b
25 // http://stackoverflow.com/questions/3787072/regex-wordwrap-with-utf8-characters-in-js
26 // look for an occurrence of our pattern and store the starting position
27 var match
= node
.data
.match( new RegExp( "(^|\\s)" + $.escapeRE( pat
), "i" ) );
29 var pos
= match
.index
+ match
[1].length
; // include length of any matched spaces
30 // create the span wrapper for the matched text
31 var spannode
= document
.createElement( 'span' );
32 spannode
.className
= 'highlight';
33 // shave off the characters preceding the matched text
34 var middlebit
= node
.splitText( pos
);
35 // shave off any unmatched text off the end
36 middlebit
.splitText( pat
.length
);
37 // clone for appending to our span
38 var middleclone
= middlebit
.cloneNode( true );
39 // append the matched text node to the span
40 spannode
.appendChild( middleclone
);
41 // replace the matched node, with our span-wrapped clone of the matched node
42 middlebit
.parentNode
.replaceChild( spannode
, middlebit
);
44 // if this is an element with childnodes, and not a script, style or an element we created
45 } else if ( node
.nodeType
== 1 && node
.childNodes
&& !/(script|style)/i.test( node
.tagName
)
46 && !( node
.tagName
.toLowerCase() == 'span' && node
.className
.match( /\bhighlight/ ) ) ) {
47 for ( var i
= 0; i
< node
.childNodes
.length
; ++i
) {
48 // call the highlight function for each child node
49 $.highlightText
.innerHighlight( node
.childNodes
[i
], pat
);
55 $.fn
.highlightText = function( matchString
) {
56 return $( this ).each( function() {
57 var $this = $( this );
58 $this.data( 'highlightText', { originalText
: $this.text() } );
59 $.highlightText
.splitAndHighlight( this, matchString
);