Skip HTML comments when converting DOM nodes to React

remarkablemark · remarkablemark · commit 889623ed51d7 · 2016-08-19T19:33:22.000-04:00
- Update `domToReact` to skip if node is not "tag" or "text"
- This ensures that HTML comments are ignored
- Add tests to verify that HTML comments are ignored by the parser
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -48,6 +48,10 @@ function domToReact(nodes) {
                 // continue recursion of creating React elements
                 children = domToReact(node.children, options);
             }
+
+        // skip all other cases (e.g., comment)
+        } else {
+            continue;
         }
 
         // specify a `key` prop if returning an array
diff --git a/test/data.json b/test/data.json
@@ -4,6 +4,7 @@
     "multiple": "<p>foo</p><p>bar</p>",
     "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
     "textarea": "<textarea>foo</textarea>",
-    "script": "<script>alert(1 < 2);</script>"
+    "script": "<script>alert(1 < 2);</script>",
+    "comment": "<!-- comment -->"
   }
 }
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -67,4 +67,21 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    it('skips HTML comments', function() {
+        var html = [data.html.single, data.html.comment, data.html.single].join('');
+        var reactElements = domToReact(htmlToDOM(html));
+        reactElements.forEach(function(reactElement) {
+            assert(React.isValidElement(reactElement));
+            assert(reactElement.key);
+        });
+        assert.deepEqual(
+            reactElements,
+            [
+                React.createElement('p', { key: 0 }, 'foo'),
+                // comment is in the middle
+                React.createElement('p', { key: 2 }, 'foo')
+            ]
+        );
+    });
+
 });
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -30,6 +30,13 @@ describe('html-to-react parser', function() {
         assert.equal(render(reactElement), html);
     });
 
+    it('converts single HTML element and ignores comment', function() {
+        var html = data.html.single;
+        // comment should be ignored
+        var reactElement = Parser(html + data.html.comment);
+        assert.equal(render(reactElement), html);
+    });
+
     it('converts multiple HTML elements to React', function() {
         var html = data.html.multiple;
         var reactElements = Parser(html);

Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,10 @@ function domToReact(nodes) {`
`48`	`48`	`// continue recursion of creating React elements`
`49`	`49`	`children = domToReact(node.children, options);`
`50`	`50`	`}`
	`51`	`+`
	`52`	`+ // skip all other cases (e.g., comment)`
	`53`	`+ } else {`
	`54`	`+ continue;`
`51`	`55`	`}`
`52`	`56`
`53`	`57`	// specify a `key` prop if returning an array
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`"multiple": "<p>foo</p><p>bar</p>",`
`5`	`5`	`"complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",`
`6`	`6`	`"textarea": "<textarea>foo</textarea>",`
`7`		`- "script": "<script>alert(1 < 2);</script>"`
	`7`	`+ "script": "<script>alert(1 < 2);</script>",`
	`8`	`+ "comment": "<!-- comment -->"`
`8`	`9`	`}`
`9`	`10`	`}`