resources/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 && node.childNodes && !/(script|style)/i.test( node.tagName )
  51                                         && !( node.tagName.toLowerCase() === 'span' && node.className.match( /\bhighlight/ ) ) ) {
  52                                 for ( i = 0; i < node.childNodes.length; ++i ) {
  53                                         // call the highlight function for each child node
  54                                         $.highlightText.innerHighlight( node.childNodes[i], pat );
  55                                 }
  56                         }
  57                 }
  58         };
  59
  60         $.fn.highlightText = function ( matchString ) {
  61                 return this.each( function () {
  62                         var $el = $( this );
  63                         $el.data( 'highlightText', { originalText: $el.text() } );
  64                         $.highlightText.splitAndHighlight( this, matchString );
  65                 } );
  66         };
  67
  68 }( jQuery ) );
  69