html-serializer.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /*
  2. * Copyright 2018 Gildas Lormeau
  3. * contact : gildas.lormeau <at> gmail.com
  4. *
  5. * This file is part of SingleFile.
  6. *
  7. * SingleFile is free software: you can redistribute it and/or modify
  8. * it under the terms of the GNU Lesser General Public License as published by
  9. * the Free Software Foundation, either version 3 of the License, or
  10. * (at your option) any later version.
  11. *
  12. * SingleFile is distributed in the hope that it will be useful,
  13. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  15. * GNU Lesser General Public License for more details.
  16. *
  17. * You should have received a copy of the GNU Lesser General Public License
  18. * along with SingleFile. If not, see <http://www.gnu.org/licenses/>.
  19. */
  20. /* global Node */
  21. this.serializer = this.serializer || (() => {
  22. const SELF_CLOSED_TAG_NAMES = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
  23. // see https://www.w3.org/TR/html5/syntax.html#optional-tags
  24. const OMITTED_START_TAGS = [
  25. { tagName: "head", accept: element => !element.childNodes.length || element.childNodes[0].nodeType == Node.ELEMENT_NODE },
  26. { tagName: "body", accept: element => !element.childNodes.length }
  27. ];
  28. const OMITTED_END_TAGS = [
  29. { tagName: "html", accept: next => !next || next.nodeType != Node.COMMENT_NODE },
  30. { tagName: "head", accept: next => !next || (next.nodeType != Node.COMMENT_NODE && (next.nodeType != Node.TEXT_NODE || !startsWithSpaceChar(next.textContent))) },
  31. { tagName: "body", accept: next => !next || next.nodeType != Node.COMMENT_NODE },
  32. { tagName: "li", accept: next => !next || ["LI"].includes(next.tagName) },
  33. { tagName: "dt", accept: next => !next || ["DT", "DD"].includes(next.tagName) },
  34. { tagName: "p", accept: next => next && ["ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "DETAILS", "DIV", "DL", "FIELDSET", "FIGCAPTION", "FIGURE", "FOOTER", "FORM", "H1", "H2", "H3", "H4", "H5", "H6", "HEADER", "HR", "MAIN", "NAV", "OL", "P", "PRE", "SECTION", "TABLE", "UL"].includes(next.tagName) },
  35. { tagName: "dd", accept: next => !next || ["DT", "DD"].includes(next.tagName) },
  36. { tagName: "rt", accept: next => !next || ["RT", "RP"].includes(next.tagName) },
  37. { tagName: "rp", accept: next => !next || ["RT", "RP"].includes(next.tagName) },
  38. { tagName: "optgroup", accept: next => !next || ["OPTGROUP"].includes(next.tagName) },
  39. { tagName: "option", accept: next => !next || ["OPTION", "OPTGROUP"].includes(next.tagName) },
  40. { tagName: "colgroup", accept: next => !next || (next.nodeType != Node.COMMENT_NODE && (next.nodeType != Node.TEXT_NODE || !startsWithSpaceChar(next.textContent))) },
  41. { tagName: "caption", accept: next => !next || (next.nodeType != Node.COMMENT_NODE && (next.nodeType != Node.TEXT_NODE || !startsWithSpaceChar(next.textContent))) },
  42. { tagName: "thead", accept: next => !next || ["TBODY", "TFOOT"].includes(next.tagName) },
  43. { tagName: "tbody", accept: next => !next || ["TBODY", "TFOOT"].includes(next.tagName) },
  44. { tagName: "tfoot", accept: next => !next },
  45. { tagName: "tr", accept: next => !next || ["TR"].includes(next.tagName) },
  46. { tagName: "td", accept: next => !next || ["TD", "TH"].includes(next.tagName) },
  47. { tagName: "th", accept: next => !next || ["TD", "TH"].includes(next.tagName) }
  48. ];
  49. const TEXT_NODE_TAGS = ["style", "script", "xmp", "iframe", "noembed", "noframes", "plaintext", "noscript"];
  50. return {
  51. process(doc, compressHTML) {
  52. if (compressHTML) {
  53. return "<!DOCTYPE html> " + serialize(doc.documentElement);
  54. } else {
  55. const docType = doc.doctype;
  56. let docTypeString = "";
  57. if (docType) {
  58. docTypeString = "<!DOCTYPE " + docType.nodeName;
  59. if (docType.publicId) {
  60. docTypeString += " PUBLIC \"" + docType.publicId + "\"";
  61. if (docType.systemId)
  62. docTypeString += " \"" + docType.systemId + "\"";
  63. } else if (docType.systemId)
  64. docTypeString += " SYSTEM \"" + docType.systemId + "\"";
  65. if (docType.internalSubset)
  66. docTypeString += " [" + docType.internalSubset + "]";
  67. docTypeString += "> ";
  68. }
  69. return docTypeString + doc.documentElement.outerHTML;
  70. }
  71. }
  72. };
  73. function serialize(node) {
  74. if (node.nodeType == Node.TEXT_NODE) {
  75. return serializeTextNode(node);
  76. } else if (node.nodeType == Node.COMMENT_NODE) {
  77. return serializeCommentNode(node);
  78. } else if (node.nodeType == Node.ELEMENT_NODE) {
  79. return serializeElement(node);
  80. }
  81. }
  82. function serializeTextNode(textNode) {
  83. const parentNode = textNode.parentNode;
  84. let parentTagName;
  85. if (parentNode && parentNode.nodeType == Node.ELEMENT_NODE) {
  86. parentTagName = parentNode.tagName.toLowerCase();
  87. }
  88. if (!parentTagName || TEXT_NODE_TAGS.includes(parentTagName)) {
  89. return textNode.textContent;
  90. } else {
  91. return textNode.textContent.replace(/&/g, "&amp;").replace(/\u00a0/g, "&nbsp;").replace(/</g, "&lt;").replace(/</g, "&gt;");
  92. }
  93. }
  94. function serializeCommentNode(commentNode) {
  95. return "<!--" + commentNode.textContent + "-->";
  96. }
  97. function serializeElement(element) {
  98. const tagName = element.tagName.toLowerCase();
  99. const omittedStartTag = OMITTED_START_TAGS.find(omittedStartTag => tagName == omittedStartTag.tagName && omittedStartTag.accept(element));
  100. let content = "";
  101. if (!omittedStartTag || element.attributes.length) {
  102. content = "<" + tagName;
  103. Array.from(element.attributes).forEach(attribute => content += serializeAttribute(attribute, element));
  104. content += ">";
  105. }
  106. Array.from(element.childNodes).forEach(childNode => content += serialize(childNode));
  107. const omittedEndTag = OMITTED_END_TAGS.find(omittedEndTag => tagName == omittedEndTag.tagName && omittedEndTag.accept(element.nextSibling));
  108. if (!omittedEndTag && !SELF_CLOSED_TAG_NAMES.includes(tagName)) {
  109. content += "</" + tagName + ">";
  110. }
  111. return content;
  112. }
  113. function serializeAttribute(attribute, element) {
  114. const name = attribute.name;
  115. let content = "";
  116. if (!name.match(/["'>/=]/)) {
  117. let value = attribute.value;
  118. if (name == "class") {
  119. value = Array.from(element.classList).map(className => className.trim()).join(" ");
  120. }
  121. let simpleQuotesValue;
  122. value = value.replace(/&/g, "&amp;").replace(/\u00a0/g, "&nbsp;");
  123. if (value.includes("\"")) {
  124. if (value.includes("'")) {
  125. value = value.replace(/"/g, "&quot;");
  126. } else {
  127. simpleQuotesValue = true;
  128. }
  129. }
  130. const invalidUnquotedValue = !value.match(/^[^ \t\n\f\r'"`=<>]+$/);
  131. content += " ";
  132. if (!attribute.namespace) {
  133. content += name;
  134. } else if (attribute.namespaceURI == "http://www.w3.org/XML/1998/namespace") {
  135. content += "xml:" + name;
  136. } else if (attribute.namespaceURI == "http://www.w3.org/2000/xmlns/") {
  137. if (name !== "xmlns") {
  138. content += "xmlns:";
  139. }
  140. content += name;
  141. } else if (attribute.namespaceURI == "http://www.w3.org/1999/xlink") {
  142. content += "xlink:" + name;
  143. } else {
  144. content += name;
  145. }
  146. if (value != "") {
  147. content += "=";
  148. if (invalidUnquotedValue) {
  149. content += simpleQuotesValue ? "'" : "\"";
  150. }
  151. content += value;
  152. if (invalidUnquotedValue) {
  153. content += simpleQuotesValue ? "'" : "\"";
  154. }
  155. }
  156. }
  157. return content;
  158. }
  159. function startsWithSpaceChar(textContent) {
  160. return Boolean(textContent.match(/^[ \t\n\f\r]/));
  161. }
  162. })();