Allow custom replace functions to return DocumentFragment nodes

readme.md

@@ -119,7 +119,7 @@ A portion object has the following properties:
 
 #### The `replace` Function
 
-If you pass a function to the `replace` option your function will be called on every portion of every match and is expected to return a DOM Node (a Text or Element node). Your function will be passed both the portion and the encapsulating match of that portion.
+If you pass a function to the `replace` option your function will be called on every portion of every match and is expected to return a DOM Node (a Text, Element, or DocumentFragment node). Your function will be passed both the portion and the encapsulating match of that portion.
 
 E.g.
 

src/findAndReplaceDOMText.js

@@ -548,6 +548,7 @@
 					endPortion,
 					match
 				);
+				var newNodeLastChild = newNode.lastChild;
 
 				node.parentNode.insertBefore(newNode, node);
 
@@ -569,6 +570,9 @@
 					newNode.parentNode.replaceChild(node, newNode);
 				});
 
+				if (newNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+					return newNodeLastChild;
+				}
 				return newNode;
 
 			} else {
@@ -609,6 +613,7 @@
 					endPortion,
 					match
 				);
+				var lastNodeLastChild = lastNode.lastChild;
 
 				matchStartNode.parentNode.insertBefore(precedingTextNode, matchStartNode);
 				matchStartNode.parentNode.insertBefore(firstNode, matchStartNode);
@@ -625,6 +630,9 @@
 					lastNode.parentNode.replaceChild(matchEndNode, lastNode);
 				});
 
+				if (lastNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+					return lastNodeLastChild;
+				}
 				return lastNode;
 			}
 		}

test/test.js

@@ -532,3 +532,62 @@ test('>Two portions', function() {
 	});
 	htmlEqual(d.innerHTML, '___0<em>2</em>3<u>4</u>');
 });
+
+module('Document fragments');
+
+test('Custom replacement function returns Element', function() {
+	var d = document.createElement('div');
+	d.innerHTML = '11 22';
+	findAndReplaceDOMText(d, {
+		find: /\d+/g,
+		replace: function(portion) {
+			var fragment = document.createElement('fragment');
+			var m = document.createElement('m');
+
+			m.appendChild(document.createTextNode(portion.text))
+			fragment.appendChild(document.createTextNode('x'));
+			fragment.appendChild(m);
+			fragment.appendChild(document.createTextNode('y'));
+			return fragment;
+		}
+	});
+	htmlEqual(d.innerHTML, '<fragment>x<m>11</m>y</fragment> <fragment>x<m>22</m>y</fragment>');
+});
+
+test('Custom replacement function returns actual DocumentFragment', function() {
+	var d = document.createElement('div');
+	d.innerHTML = '11 22';
+	findAndReplaceDOMText(d, {
+		find: /\d+/g,
+		replace: function(portion) {
+			var fragment = document.createDocumentFragment();
+			var m = document.createElement('m');
+
+			m.appendChild(document.createTextNode(portion.text))
+			fragment.appendChild(document.createTextNode('x'));
+			fragment.appendChild(m);
+			fragment.appendChild(document.createTextNode('y'));
+			return fragment;
+		}
+	});
+	htmlEqual(d.innerHTML, 'x<m>11</m>y x<m>22</m>y');
+});
+
+test('Custom replacement function returns actual DocumentFragment - more complex', function() {
+	var d = document.createElement('div');
+	d.innerHTML = '<u>11 22</u> 3<u>3 44 5</u>5 6<u>6<u>6</u>6</u>6';
+	findAndReplaceDOMText(d, {
+		find: /\d+/g,
+		replace: function(portion) {
+			var fragment = document.createDocumentFragment();
+			var m = document.createElement('m');
+
+			m.appendChild(document.createTextNode(portion.text))
+			fragment.appendChild(document.createTextNode('x'));
+			fragment.appendChild(m);
+			fragment.appendChild(document.createTextNode('y'));
+			return fragment;
+		}
+	});
+	htmlEqual(d.innerHTML, '<u>x<m>11</m>y x<m>22</m>y</u> x<m>3</m>y<u>x<m>3</m>y x<m>44</m>y x<m>5</m>y</u>x<m>5</m>y x<m>6</m>y<u>x<m>6</m>y<u>x<m>6</m>y</u>x<m>6</m>y</u>x<m>6</m>y');
+});