resources/src/jquery/jquery.highlightText.js

   1 /**
   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:.
   5  */
   6 ( function ( $ ) {
   7
   8         $.highlightText = {
   9
  10                 // Split our pattern string at spaces and run our highlight function on the results
  11                 splitAndHighlight: function ( node, pat ) {
  12                         var i,
  13                                 patArray = pat.split( ' ' );
  14                         for ( i = 0; i < patArray.length; i++ ) {
  15                                 if ( patArray[i].length === 0 ) {
  16                                         continue;
  17                                 }
  18                                 $.highlightText.innerHighlight( node, patArray[i] );
  19                         }
  20                         return node;
  21                 },
  22
  23                 // scans a node looking for the pattern and wraps a span around each match
  24                 innerHighlight: function ( node, pat ) {
  25                         var i, match, pos, spannode, middlebit, middleclone;
  26                         // if this is a text node
  27                         if ( node.nodeType === 3 ) {
  28                                 // TODO - need to be smarter about the character matching here.
  29                                 // non latin characters can make regex think a new word has begun: do not use \b
  30                                 // http://stackoverflow.com/questions/3787072/regex-wordwrap-with-utf8-characters-in-js
  31                                 // look for an occurrence of our pattern and store the starting position
  32                                 match = node.data.match( new RegExp( '(^|\\s)' + $.escapeRE( pat ), 'i' ) );
  33                                 if ( match ) {
  34                                         pos = match.index + match[1].length; // include length of any matched spaces
  35                                         // create the span wrapper for the matched text
  36                                         spannode = document.createElement( 'span' );
  37                                         spannode.className = 'highlight';
  38                                         // shave off the characters preceding the matched text
  39                                         middlebit = node.splitText( pos );
  40                                         // shave off any unmatched text off the end
  41                                         middlebit.splitText( pat.length );
  42                                         // clone for appending to our span
  43                                         middleclone = middlebit.cloneNode( true );
  44                                         // append the matched text node to the span
  45                                         spannode.appendChild( middleclone );
  46                                         // replace the matched node, with our span-wrapped clone of the matched node
  47                                         middlebit.parentNode.replaceChild( spannode, middlebit );
  48                                 }
  49                         // if this is an element with childnodes, and not a script, style or an element we created
  50                         } else if ( node.nodeType === 1
  51                                 && node.childNodes
  52                                 && !/(script|style)/i.test( node.tagName )
  53                                 && !( node.tagName.toLowerCase() === 'span'
  54                                         && node.className.match( /\bhighlight/ )
  55                                 )
  56                         ) {
  57                                 for ( i = 0; i < node.childNodes.length; ++i ) {
  58                                         // call the highlight function for each child node
  59                                         $.highlightText.innerHighlight( node.childNodes[i], pat );
  60                                 }
  61                         }
  62                 }
  63         };
  64
  65         $.fn.highlightText = function ( matchString ) {
  66                 return this.each( function () {
  67                         var $el = $( this );
  68                         $el.data( 'highlightText', { originalText: $el.text() } );
  69                         $.highlightText.splitAndHighlight( this, matchString );
  70                 } );
  71         };
  72
  73 }( jQuery ) );