Merge pull request #26 from mwiencek/serialization-fixes

Handle void elements, HTML escaping in serialization code
Raynos · Jun 17, 2015 · fc4f96d · fc4f96d
2 parents b085c99 + a216507
commit fc4f96d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/serialize.js b/serialize.js
@@ -1,7 +1,11 @@
 module.exports = serializeNode
 
+var voidElements = /area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr/i;
+
 function serializeNode(node) {
     switch (node.nodeType) {
+        case 3:
+            return escapeText(node.data)
         case 8:
             return "<!--" + node.data + "-->"
         default:
@@ -18,18 +22,21 @@ function serializeElement(elem) {
         tagname = tagname.toLowerCase()
     }
 
-    strings.push("<" + tagname +
-        properties(elem) + datasetify(elem) + ">")
+    strings.push("<" + tagname + properties(elem) + datasetify(elem))
 
-    if (elem.textContent || elem.innerText) {
-        strings.push(elem.textContent || elem.innerText)
-    }
+    if (voidElements.test(tagname)) {
+        strings.push(" />")
+    } else {
+        strings.push(">")
 
-    elem.childNodes.forEach(function (node) {
-        strings.push(serializeNode(node))
-    })
+        if (elem.childNodes.length) {
+            strings.push.apply(strings, elem.childNodes.map(serializeNode))
+        } else {
+            strings.push(escapeText(elem.textContent || elem.innerText || ""))
+        }
 
-    strings.push("</" + tagname + ">")
+        strings.push("</" + tagname + ">")
+    }
 
     return strings.join("")
 }
@@ -77,7 +84,7 @@ function stringify(list) {
             value = stylify(value)
         }
 
-        attributes.push(name + "=" + "\"" + value + "\"")
+        attributes.push(name + "=" + "\"" + escapeAttributeValue(value) + "\"")
     })
 
     return attributes.length ? " " + attributes.join(" ") : ""
@@ -104,3 +111,14 @@ function properties(elem) {
 
     return props.length ? stringify(props) : ""
 }
+
+function escapeText(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+}
+
+function escapeAttributeValue(str) {
+    return escapeText(str).replace(/"/g, "&quot;")
+}
diff --git a/test/test-document.js b/test/test-document.js
@@ -30,18 +30,17 @@ function testDocument(document) {
 
         var span = document.createElement("span")
         div.appendChild(span)
-        span.textContent = "Hello!"
+        span.textContent = "Hello! <&>"
 
         var html = String(div.outerHTML || div)
 
         assert.equal(html, "<div class=\"foo bar\">" +
-            "<span>Hello!</span></div>")
+            "<span>Hello! &lt;&amp;&gt;</span></div>")
 
         cleanup()
         assert.end()
     })
 
-
     test("can createDocumentFragment", function (assert) {
         var frag = document.createDocumentFragment()
 
@@ -328,7 +327,7 @@ function testDocument(document) {
     test("input has type=text by default", function (assert) {
         var elem = document.createElement("input")
         assert.equal(elem.type, "text");
-        assert.equal(elemString(elem), "<input type=\"text\"></input>")
+        assert.equal(elemString(elem), "<input type=\"text\" />")
         assert.end()
     })
 

diff --git a/test/test-dom-element.js b/test/test-dom-element.js
@@ -60,8 +60,8 @@ function testDomElement(document) {
 
     test("does not serialize innerText as an attribute", function(assert) {
       var div = document.createElement("div")
-      div.innerText = "Test"
-      assert.equal(div.toString(), "<div>Test</div>")
+      div.innerText = "Test <&>"
+      assert.equal(div.toString(), "<div>Test &lt;&amp;&gt;</div>")
       cleanup()
       assert.end()
     })
@@ -115,4 +115,20 @@ function testDomElement(document) {
         cleanup()
         assert.end()
     })
+
+    test("can serialize text nodes", function(assert) {
+        var div = document.createElement("div")
+        div.appendChild(document.createTextNode('<test> "&'))
+        assert.equal(div.toString(), '<div>&lt;test&gt; "&amp;</div>')
+        cleanup()
+        assert.end()
+    })
+
+    test("escapes serialized attribute values", function(assert) {
+        var div = document.createElement("div")
+        div.setAttribute("data-foo", '<p>"&')
+        assert.equal(div.toString(), '<div data-foo="&lt;p&gt;&quot;&amp;"></div>')
+        cleanup()
+        assert.end()
+    })
 }