[Summary view] [Print] [Text view]

   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 ) );