Finish highlight-text functionality

Author: peyerluk

spec/highlight-text.spec.js

@@ -71,14 +71,14 @@ describe('highlightText', function() {
   describe('iterator', function() {
 
     beforeEach(function() {
-      this.wrapWord = sinon.stub(highlightText, 'wrapWord');
+      this.wrapWord = sinon.spy(highlightText, 'wrapWord');
     });
 
     afterEach(function() {
       this.wrapWord.restore();
     });
 
-    it('finds a letter that it is own text node', function() {
+    it('finds a letter that is its own text node', function() {
       var elem = createParagraphWithTextNodes('a', 'b', 'c');
       iterateOverElement(elem, /b/g);
       var portions = this.wrapWord.firstCall.args[0];
@@ -176,6 +176,33 @@ describe('highlightText', function() {
       expect(range.commonAncestorContainer.outerHTML)
         .toEqual('<div>Some <span data-awesome="crazy">jui</span><em><span data-awesome="crazy">ce</span>.</em></div>')
     });
+
+    it('wraps two words in the same text node', function() {
+      var elem = $('<div>a or b</div>')[0];
+      var range = highlightText.getRange(elem);
+      var matches = highlightText.find(range, /a|b/g);
+      highlightText.highlightMatches(range, matches);
+      expect(range.commonAncestorContainer.outerHTML)
+        .toEqual('<div><span data-awesome="crazy">a</span> or <span data-awesome="crazy">b</span></div>')
+    });
+
+    it('wraps a word in a <em> element', function() {
+      var elem = $('<div><em>word</em></div>')[0];
+      var range = highlightText.getRange(elem);
+      var matches = highlightText.find(range, /word/g);
+      highlightText.highlightMatches(range, matches);
+      expect(range.commonAncestorContainer.outerHTML)
+        .toEqual('<div><em><span data-awesome="crazy">word</span></em></div>')
+    });
+
+    it('can handle a non-match', function() {
+      var elem = $('<div><em>word</em></div>')[0];
+      var range = highlightText.getRange(elem);
+      var matches = highlightText.find(range, /xxx/g);
+      highlightText.highlightMatches(range, matches);
+      expect(range.commonAncestorContainer.outerHTML)
+        .toEqual('<div><em>word</em></div>')
+    });
   });
 
 });

spec/interator.spec.js

@@ -3,9 +3,6 @@ describe('Iterator', function() {
   // Helper methods
   // --------------
 
-  // todo: remove
-  rangy.init()
-
   var callnTimes = function(object, methodName, count) {
     var returnValue;
     while (count--) {

src/highlight-text.js

@@ -19,13 +19,18 @@ var highlightText = (function() {
     },
 
     highlightMatches: function(range, matches) {
+      if (!matches || matches.length == 0) {
+        return;
+      }
+
       var textNode, length, firstPortion, lastPortion;
       var currentMatchIndex = 0;
       var currentMatch = matches[currentMatchIndex];
       var totalOffset = 0;
       var iterator = this.getTextIterator(range);
       var portions = [];
-      while ( (textNode = iterator.next()) ) {
+      var portionsLength = 0;
+      while ( textNode = iterator.getNextTextNode() ) {
         var nodeText = textNode.data;
         var nodeEndOffset = totalOffset + nodeText.length;
         if (nodeEndOffset > currentMatch.startIndex && totalOffset < currentMatch.endIndex) {
@@ -63,11 +68,18 @@ var highlightText = (function() {
             lastPortion: lastPortion
           }
 
+          portionsLength += portion.length;
           portions.push(portion);
 
           if (lastPortion) {
-            this.wrapWord(portions);
+            var lastNode = this.wrapWord(portions);
+            iterator.replaceCurrent(lastNode);
+
+            // recalculate nodeEndOffset if we have to replace the current node.
+            nodeEndOffset = totalOffset + portionsLength;
+
             portions = [];
+            portionsLength = 0;
             currentMatchIndex += 1;
             if (currentMatchIndex < matches.length) {
               currentMatch = matches[currentMatchIndex];
@@ -87,12 +99,12 @@ var highlightText = (function() {
     },
 
     getTextIterator: function(range) {
-      return range.createNodeIterator([3], function(node) {
-        // no filter needed right now.
-        return true;
-      });
+      var root = range.commonAncestorContainer;
+      var iterator = new Iterator(root);
+      return iterator;
     },
 
+    // @return the last wrapped element
     wrapWord: function(portions) {
       var element;
       for (var i = 0; i < portions.length; i++) {
@@ -108,7 +120,17 @@ var highlightText = (function() {
       range.setStart(portion.element, portion.offset);
       range.setEnd(portion.element, portion.offset + portion.length);
       var node = $('<span data-awesome="crazy">')[0];
-      return range.surroundContents(node);
+      range.surroundContents(node);
+
+      // Fix a weird behaviour where an empty text node is inserted after the range
+      if (node.nextSibling) {
+        var next = node.nextSibling;
+        if (next.nodeType === 3 && next.data === '') {
+          next.parentNode.removeChild(next);
+        }
+      }
+
+      return node;
     },
 
     prepareMatch: function (match, matchIndex) {

src/iterator.js

@@ -5,6 +5,15 @@ var Iterator = (function() {
     this.current = this.next = this.root;
   };
 
+  Iterator.prototype.getNextTextNode = function() {
+    var next;
+    while (next = this.getNext()) {
+      if (next.nodeType === 3 && next.data !== '') {
+        return next;
+      }
+    }
+  },
+
   Iterator.prototype.getNext = function() {
     var child, n;
     n = this.current = this.next;