javascript - JQuery Highlight plugin, argument somehow undefined -

i'm modifying jquery highlight plugin. want provide title argument in addition element: 'abbr'.

here's snippet plugin:

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 && node.childnodes) && // element nodes have children          !/(script|style)/i.test(node.tagname) && // ignore script , style nodes          !(node.tagname === nodename.touppercase() && node.classname === classname)) { // skip if highlighted        (var = 0; < node.childnodes.length; 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, "\\$&");    });    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);    });  };

abbr { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p>these collection of words example. kthx.</p>  <button onclick="$('p').highlight('collection', {element: 'abbr', titleval: 'a group of things or people'})">what's "collection"?</button>

look @ console. notice title passed, defined right before calling plugin function, undefined inside it. i'm pretty sure it's simple, i'm not seeing it.

changing line in for loop

i += jquery.highlight(node.childnodes[i], re, nodename, classname); 

to

i += jquery.highlight(node.childnodes[i], re, nodename, classname, titleval); 

fixes it.