Fix HTML to DOM client parser

remarkablemark · remarkablemark · commit 80ca2e255f2c · 2016-08-24T18:22:02.000-04:00
`DOMParser` was nesting certain elements (e.g., div) in `&lt;html&gt;`
and `body` so formatting the child nodes of document gave incorrect
results.

Update logic so that the correct nodes are parsed and formatted.
diff --git a/lib/html-to-dom-client.js b/lib/html-to-dom-client.js
@@ -102,22 +102,45 @@ function formatDOM(nodes, parentNode) {
  * @return {Object}      - The DOM nodes.
  */
 function htmlToDOMClient(html) {
-    var root;
+    var match = typeof html === 'string' ? html.match(/<(.+?)>/) : null;
+    var tagName;
+    var parentNode;
+    var nodes;
+
+    if (match && typeof match[1] === 'string') {
+        tagName = match[1].toLowerCase();
+    }
 
     // `DOMParser` can parse full HTML
     // https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
-    if (window.DOMParser) {
+    if (tagName && window.DOMParser) {
         var parser = new window.DOMParser();
-        root = parser.parseFromString(html, 'text/html');
+        var doc = parser.parseFromString(html, 'text/html');
+
+        // <head> and <body> are siblings
+        if (tagName === 'head' || tagName === 'body') {
+            nodes = doc.getElementsByTagName(tagName);
+
+        // document's child nodes
+        } else if (tagName === 'html') {
+            nodes = doc.childNodes;
+
+        // get the element's parent's child nodes
+        // do this in case of adjacent elements
+        } else {
+            parentNode = doc.getElementsByTagName(tagName)[0].parentNode;
+            nodes = parentNode.childNodes;
+        }
 
     // otherwise, use `innerHTML`
     // but this will strip out tags like <html> and <body>
     } else {
-        root = document.createElement('div');
-        root.innerHTML = html;
+        parentNode = document.createElement('div');
+        parentNode.innerHTML = html;
+        nodes = parentNode.childNodes;
     }
 
-    return formatDOM(root.childNodes);
+    return formatDOM(nodes);
 }
 
 /**
