html-parser.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. import util from './util.js'
  2. /*
  3. * HTML5 Parser By Sam Blowes
  4. *
  5. * Designed for HTML5 documents
  6. *
  7. * Original code by John Resig (ejohn.org)
  8. * http://ejohn.org/blog/pure-javascript-html-parser/
  9. * Original code by Erik Arvidsson, Mozilla Public License
  10. * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
  11. *
  12. * ----------------------------------------------------------------------------
  13. * License
  14. * ----------------------------------------------------------------------------
  15. *
  16. * This code is triple licensed using Apache Software License 2.0,
  17. * Mozilla Public License or GNU Public License
  18. *
  19. * ////////////////////////////////////////////////////////////////////////////
  20. *
  21. * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  22. * use this file except in compliance with the License. You may obtain a copy
  23. * of the License at http://www.apache.org/licenses/LICENSE-2.0
  24. *
  25. * ////////////////////////////////////////////////////////////////////////////
  26. *
  27. * The contents of this file are subject to the Mozilla Public License
  28. * Version 1.1 (the "License"); you may not use this file except in
  29. * compliance with the License. You may obtain a copy of the License at
  30. * http://www.mozilla.org/MPL/
  31. *
  32. * Software distributed under the License is distributed on an "AS IS"
  33. * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
  34. * License for the specific language governing rights and limitations
  35. * under the License.
  36. *
  37. * The Original Code is Simple HTML Parser.
  38. *
  39. * The Initial Developer of the Original Code is Erik Arvidsson.
  40. * Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
  41. * Reserved.
  42. *
  43. * ////////////////////////////////////////////////////////////////////////////
  44. *
  45. * This program is free software; you can redistribute it and/or
  46. * modify it under the terms of the GNU General Public License
  47. * as published by the Free Software Foundation; either version 2
  48. * of the License, or (at your option) any later version.
  49. *
  50. * This program is distributed in the hope that it will be useful,
  51. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  52. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  53. * GNU General Public License for more details.
  54. *
  55. * You should have received a copy of the GNU General Public License
  56. * along with this program; if not, write to the Free Software
  57. * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  58. *
  59. * ----------------------------------------------------------------------------
  60. * Usage
  61. * ----------------------------------------------------------------------------
  62. *
  63. * // Use like so:
  64. * HTMLParser(htmlString, {
  65. * start: function(tag, attrs, unary) {},
  66. * end: function(tag) {},
  67. * chars: function(text) {},
  68. * comment: function(text) {}
  69. * });
  70. *
  71. * // or to get an XML string:
  72. * HTMLtoXML(htmlString);
  73. *
  74. * // or to get an XML DOM Document
  75. * HTMLtoDOM(htmlString);
  76. *
  77. * // or to inject into an existing document/DOM node
  78. * HTMLtoDOM(htmlString, document);
  79. * HTMLtoDOM(htmlString, document.body);
  80. *
  81. */
  82. // Regular Expressions for parsing tags and attributes
  83. var startTag =
  84. /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
  85. var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
  86. var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
  87. var empty = makeMap(
  88. 'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
  89. // fixed by xxx 将 ins 标签从块级名单中移除
  90. var block = makeMap(
  91. 'a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
  92. ); // Inline Elements - HTML 5
  93. var inline = makeMap(
  94. 'abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
  95. ); // Elements that you can, intentionally, leave open
  96. // (and which close themselves)
  97. var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
  98. var fillAttrs = makeMap(
  99. 'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
  100. var special = makeMap('script,style');
  101. function HTMLParser(html, handler) {
  102. var index;
  103. var chars;
  104. var match;
  105. var stack = [];
  106. var last = html;
  107. stack.last = function() {
  108. return this[this.length - 1];
  109. };
  110. while (html) {
  111. chars = true; // Make sure we're not in a script or style element
  112. if (!stack.last() || !special[stack.last()]) {
  113. // Comment
  114. if (html.indexOf('<!--') == 0) {
  115. index = html.indexOf('-->');
  116. if (index >= 0) {
  117. if (handler.comment) {
  118. handler.comment(html.substring(4, index));
  119. }
  120. html = html.substring(index + 3);
  121. chars = false;
  122. } // end tag
  123. } else if (html.indexOf('</') == 0) {
  124. match = html.match(endTag);
  125. if (match) {
  126. html = html.substring(match[0].length);
  127. match[0].replace(endTag, parseEndTag);
  128. chars = false;
  129. } // start tag
  130. } else if (html.indexOf('<') == 0) {
  131. match = html.match(startTag);
  132. if (match) {
  133. html = html.substring(match[0].length);
  134. match[0].replace(startTag, parseStartTag);
  135. chars = false;
  136. }
  137. }
  138. if (chars) {
  139. index = html.indexOf('<');
  140. var text = index < 0 ? html : html.substring(0, index);
  141. html = index < 0 ? '' : html.substring(index);
  142. if (handler.chars) {
  143. handler.chars(text);
  144. }
  145. }
  146. } else {
  147. html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function(all, text) {
  148. text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
  149. if (handler.chars) {
  150. handler.chars(text);
  151. }
  152. return '';
  153. });
  154. parseEndTag('', stack.last());
  155. }
  156. if (html == last) {
  157. throw 'Parse Error: ' + html;
  158. }
  159. last = html;
  160. } // Clean up any remaining tags
  161. parseEndTag();
  162. function parseStartTag(tag, tagName, rest, unary) {
  163. tagName = tagName.toLowerCase();
  164. if (block[tagName]) {
  165. while (stack.last() && inline[stack.last()]) {
  166. parseEndTag('', stack.last());
  167. }
  168. }
  169. if (closeSelf[tagName] && stack.last() == tagName) {
  170. parseEndTag('', tagName);
  171. }
  172. unary = empty[tagName] || !!unary;
  173. if (!unary) {
  174. stack.push(tagName);
  175. }
  176. if (handler.start) {
  177. var attrs = [];
  178. rest.replace(attr, function(match, name) {
  179. var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[
  180. name] ? name : '';
  181. attrs.push({
  182. name: name,
  183. value: value,
  184. escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
  185. });
  186. });
  187. if (handler.start) {
  188. handler.start(tagName, attrs, unary);
  189. }
  190. }
  191. }
  192. function parseEndTag(tag, tagName) {
  193. // If no tag name is provided, clean shop
  194. if (!tagName) {
  195. var pos = 0;
  196. } // Find the closest opened tag of the same type
  197. else {
  198. for (var pos = stack.length - 1; pos >= 0; pos--) {
  199. if (stack[pos] == tagName) {
  200. break;
  201. }
  202. }
  203. }
  204. if (pos >= 0) {
  205. // Close all the open elements, up the stack
  206. for (var i = stack.length - 1; i >= pos; i--) {
  207. if (handler.end) {
  208. handler.end(stack[i]);
  209. }
  210. } // Remove the open elements from the stack
  211. stack.length = pos;
  212. }
  213. }
  214. }
  215. function makeMap(str) {
  216. var obj = {};
  217. var items = str.split(',');
  218. for (var i = 0; i < items.length; i++) {
  219. obj[items[i]] = true;
  220. }
  221. return obj;
  222. }
  223. function removeDOCTYPE(html) {
  224. return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
  225. }
  226. /**
  227. * 忽略注释
  228. * @param {Object} html
  229. */
  230. function replaceAnnotation(html) {
  231. var html = html.replace(/<!--[\s\S]*-->/gi, '');
  232. return html;
  233. }
  234. /**
  235. * 替换图片
  236. * @param {Object} html
  237. */
  238. function replaceImage(html) {
  239. var html = html.replace(/\\/g, '').replace(/<img/g, '<img style="width:100% !important;display:block;"');
  240. html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
  241. return '<img style="width:100% !important;display:block;" src="' + util.img(capture) + '"/>';
  242. });
  243. return html;
  244. }
  245. /**
  246. * 将style属性中的双引号改为单引号
  247. * @param {Object} html
  248. */
  249. function replaceStyleQuotes(html) {
  250. var html = html.replace(/style\s*=\s*["][^>]*;[^"]?/gi, (match, capture) => {
  251. match = match.replace(/[:](\s?)[\s\S]*/gi, (a, b) => {
  252. return a.replace(/"/g, "'");
  253. });
  254. return match;
  255. });
  256. return html;
  257. }
  258. function parseAttrs(attrs) {
  259. return attrs.reduce(function(pre, attr) {
  260. var value = attr.value;
  261. var name = attr.name;
  262. if (pre[name]) {
  263. pre[name] = pre[name] + " " + value;
  264. } else {
  265. pre[name] = value;
  266. }
  267. return pre;
  268. }, {});
  269. }
  270. function parseHtml(html) {
  271. html = removeDOCTYPE(html);
  272. html = replaceAnnotation(html); //忽略注释
  273. html = replaceImage(html); //替换图片
  274. html = replaceStyleQuotes(html); //将style属性中的双引号改为单引号
  275. var stacks = [];
  276. var results = {
  277. node: 'root',
  278. children: []
  279. };
  280. HTMLParser(html, {
  281. start: function start(tag, attrs, unary) {
  282. var node = {
  283. name: tag
  284. };
  285. if (attrs.length !== 0) {
  286. node.attrs = parseAttrs(attrs);
  287. }
  288. if (unary) {
  289. var parent = stacks[0] || results;
  290. if (!parent.children) {
  291. parent.children = [];
  292. }
  293. parent.children.push(node);
  294. } else {
  295. stacks.unshift(node);
  296. }
  297. },
  298. end: function end(tag) {
  299. var node = stacks.shift();
  300. if (node.name !== tag) console.error('invalid state: mismatch end tag');
  301. if (stacks.length === 0) {
  302. results.children.push(node);
  303. } else {
  304. var parent = stacks[0];
  305. if (!parent.children) {
  306. parent.children = [];
  307. }
  308. parent.children.push(node);
  309. }
  310. },
  311. chars: function chars(text) {
  312. var node = {
  313. type: 'text',
  314. text: text
  315. };
  316. if (stacks.length === 0) {
  317. results.children.push(node);
  318. } else {
  319. var parent = stacks[0];
  320. if (!parent.children) {
  321. parent.children = [];
  322. }
  323. parent.children.push(node);
  324. }
  325. },
  326. comment: function comment(text) {
  327. var node = {
  328. node: 'comment',
  329. text: text
  330. };
  331. var parent = stacks[0];
  332. if (!parent.children) {
  333. parent.children = [];
  334. }
  335. parent.children.push(node);
  336. }
  337. });
  338. return results.children;
  339. }
  340. export default parseHtml;