title: JQuery Highlight plugin, argument somehow undefined
body: <p>I'm modifying the <a href="http://bartaz.github.io/sandbox.js/jquery.highlight.html" rel="nofollow">jQuery highlight plugin</a>. I want to provide a <code>title</code> argument in addition to <code>element: 'abbr'</code>.</p>
  
  <p>Here's a snippet with the plugin:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery.extend({
    highlight: function (node, re, nodeName, className, titleVal) {
      if (node.nodeType === 3) {
        var match = node.data.match(re);
        if (match) {
          console.log('Title after: ' + titleVal);
          var highlight = document.createElement(nodeName || 'span');
          highlight.className = className || 'highlight';
          highlight.setAttribute('title', titleVal);
          var wordNode = node.splitText(match.index);
          wordNode.splitText(match[0].length);
          var wordClone = wordNode.cloneNode(true);
          highlight.appendChild(wordClone);
          wordNode.parentNode.replaceChild(highlight, wordNode);
          return 1; //skip added node in parent
        }
      } else if ((node.nodeType === 1 &amp;&amp; node.childNodes) &amp;&amp; // only element nodes that have children
          !/(script|style)/i.test(node.tagName) &amp;&amp; // ignore script and style nodes
          !(node.tagName === nodeName.toUpperCase() &amp;&amp; node.className === className)) { // skip if already highlighted
        for (var i = 0; i &lt; node.childNodes.length; i++) {
          i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
        }
      }
      return 0;
    }
  });
  
  jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);
  
    return this.find(settings.element + "." + settings.className).each(function () {
      var parent = this.parentNode;
      parent.replaceChild(this.firstChild, this);
      parent.normalize();
    }).end();
  };
  
  jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', titleVal: 'Default', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);
    console.log('Title passed:' + settings.titleVal);
    if (words.constructor === String) {
      words = [words];
    }
    words = jQuery.grep(words, function(word, i){
      return word != '';
    });
    words = jQuery.map(words, function(word, i) {
      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&amp;");
    });
    if (words.length == 0) { return this; };
  
    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
      pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);
    
    return this.each(function () {
      console.log('Title before: ' + settings.titleVal);
      jQuery.highlight(this, re, settings.element, settings.className, settings.titleVal);
    });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>abbr { text-decoration: underline; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;These are a collection of words for an example. Kthx.&lt;/p&gt;
  &lt;button onclick="$('p').highlight('collection', {element: 'abbr', titleVal: 'A group of things or people'})"&gt;What's "collection"?&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Look at the console. Notice that the title is successfully passed, is defined right before calling the plugin function, then is undefined inside it. I'm pretty sure it's something simple, but I'm not seeing it.</p>