Make sure replacementNode function is called in right order (related to

#4)
padolsey · Oct 14, 2012 · 67a2ee7 · 67a2ee7
1 parent 8760c5f
commit 67a2ee7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/readme.md b/readme.md
@@ -62,4 +62,5 @@ findAndReplaceDOMText(/foo/g, myElement, span);
 
 ### Changelog
 
-0.1: Initial commit + Fix for IE's broken HTML5 cloneNode ([pull request](https://github.com/padolsey/findAndReplaceDOMText/pull/3))
+0.1: Initial commit + Fix for IE's broken HTML5 cloneNode ([pull request](https://github.com/padolsey/findAndReplaceDOMText/pull/3))
+0.11: Minor fix: Make sure replacement node function is called in order of matches (see [issue #4](https://github.com/padolsey/findAndReplaceDOMText/issues/4))
diff --git a/src/findAndReplaceDOMText.js b/src/findAndReplaceDOMText.js
@@ -1,5 +1,5 @@
 /**
- * findAndReplaceDOMText v 0.1
+ * findAndReplaceDOMText v 0.11
  * @author James Padolsey http://james.padolsey.com
  * @license http://unlicense.org/UNLICENSE
  *
@@ -205,9 +205,8 @@ window.findAndReplaceDOMText = (function() {
           var before = document.createTextNode(node.data.substring(0, range.startNodeIndex));
           node.parentNode.insertBefore(before, node);
         }
+
         // Create the replacement node:
-       // var el = stencilNode.cloneNode(false);
-        //el.appendChild(document.createTextNode(range.match[0]));
         var el = makeReplacementNode(range.match[0], matchIndex);
         node.parentNode.insertBefore(el, node);
         if (range.endNodeIndex < node.length) {
@@ -224,25 +223,24 @@ window.findAndReplaceDOMText = (function() {
         });
         return el;
       } else {
-        // B4 - innerNodes - After
+        // Replace startNode -> [innerNodes...] -> endNode (in that order)
         var before = document.createTextNode(startNode.data.substring(0, range.startNodeIndex));
         var after = document.createTextNode(endNode.data.substring(range.endNodeIndex));
         var elA = makeReplacementNode(startNode.data.substring(range.startNodeIndex), matchIndex);
-        var elB = makeReplacementNode(endNode.data.substring(0, range.endNodeIndex), matchIndex);
         var innerEls = [];
-        //elA.appendChild(document.createTextNode());
-        startNode.parentNode.insertBefore(before, startNode);
-        startNode.parentNode.insertBefore(elA, startNode);
-        startNode.parentNode.removeChild(startNode);
-        endNode.parentNode.insertBefore(elB, endNode);
-        endNode.parentNode.insertBefore(after, endNode);
-        endNode.parentNode.removeChild(endNode);
         for (var i = 0, l = range.innerNodes.length; i < l; ++i) {
           var innerNode = range.innerNodes[i];
           var innerEl = makeReplacementNode(innerNode.data, matchIndex);
           innerNode.parentNode.replaceChild(innerEl, innerNode);
           innerEls.push(innerEl);
         }
+        var elB = makeReplacementNode(endNode.data.substring(0, range.endNodeIndex), matchIndex);
+        startNode.parentNode.insertBefore(before, startNode);
+        startNode.parentNode.insertBefore(elA, startNode);
+        startNode.parentNode.removeChild(startNode);
+        endNode.parentNode.insertBefore(elB, endNode);
+        endNode.parentNode.insertBefore(after, endNode);
+        endNode.parentNode.removeChild(endNode);
         reverts.push(function() {
           innerEls.unshift(elA);
           innerEls.push(elB);

diff --git a/test/test.js b/test/test.js
@@ -90,4 +90,20 @@ test('Custom replacement function', function() {
 		return e;
 	});
 	htmlEqual(d.innerHTML, '<u>1_</u><u>2_</u><u>3_</u><u>4_</u>');
+});
+
+test('Custom replacement function - correct ordering', function() {
+	var d = document.createElement('div');
+	var nCalled = 0;
+	d.innerHTML = 'test<b>ing</b>123';
+	findAndReplaceDOMText(/testing[0-9]+/g, d, function(fill) {
+		switch (nCalled++) {
+			case 0: equal(fill, 'test'); break;
+			case 1: equal(fill, 'ing'); break;
+			case 2: equal(fill, '123'); break;
+			default: ok(false, 'Not expecting further matches');
+		}
+		return document.createTextNode(fill);
+	});
+	equal(nCalled, 3);
 });