项目地址

在线体验

介绍

首先 这里的HTMLParser不是 很完备，做了基本处理。

此项目主要是做HTML2AST & AST2HTML即HTMLparser和AST还原到HTML。

代码

html2ast.ts HTML2AST

  1. function lexer(item: any, index: any, file: any) {
  3.     function isEnd(index: number) {
  4.         return file.length <= index
  5.     }
  7.     function isCommentEnd(hanlder: any, index: number) {
  8.         let count = index;
  9.         let target = "-->"
  10.         let sour = ""
  11.         while (count < index + 3) {
  12.             sour += hanlder.charAt(count)
  13.             count++
  14.         }
  15.         return target === sour
  16.     }
  18.     if (item === "<") { // <
  19.         index++
  20.         if (file.charAt(index) === "/") { // </
  21.             index++
  22.             let tag = ""
  23.             let cur = file.charAt(index)
  24.             while (cur !== ">" && !isEnd(index)) { // </xx>
  25.                 tag += cur
  26.                 index++
  27.                 cur = file.charAt(index)
  28.             }
  30.             // if (isEnd(index)) {
  31.             //     return {
  32.             //         type: "EOF",
  33.             //         index
  34.             //     }
  35.             // }
  37.             return {
  38.                 type: "node",
  39.                 tag,
  40.                 index,
  41.                 closeTag: true
  42.             }
  43.         } else if (file.charAt(index) === "!") {
  44.             index++
  45.             let cur = file.charAt(index)
  46.             let count = 2;
  47.             while (count) { // <!--
  48.                 if (cur !== "-") {
  49.                     console.assert("fail")
  50.                 }
  51.                 index++
  52.                 cur = file.charAt(index)
  53.                 count--
  54.             }
  55.             // -->结束
  56.             let content = ""
  57.             cur = file.charAt(index)
  58.             let isCEnd = false
  60.             while (!isEnd(index)) {
  61.                 isCEnd = isCommentEnd(file, index)
  62.                 if (isCEnd) {
  63.                     break
  64.                 }
  65.                 content += cur
  66.                 index++
  67.                 cur = file.charAt(index)
  68.             }
  69.             if (isCEnd) { // -->
  70.                 index += 3
  71.             }
  73.             if (isEnd(index) && content === '') {
  74.                 return {
  75.                     type: "EOF",
  76.                     index
  77.                 }
  78.             }
  79.             return {
  80.                 type: "comment",
  81.                 content,
  82.                 index
  83.             }
  85.         } else { // <
  86.             let tag = ""
  87.             let cur = file.charAt(index)
  88.             while (cur !== " " && cur !== ">" && !isEnd(index)) {
  89.                 tag += cur
  90.                 index++
  91.                 cur = file.charAt(index)
  92.             }
  93.             let attrs = []
  94.             if (cur === " ") {
  95.                 while (file.charAt(index) === " ") {
  96.                     index++
  97.                 }
  98.                 let key = ""
  99.                 let value = ""
  100.                 cur = file.charAt(index)
  101.                 while (cur !== ">" && !isEnd(index)) {
  102.                     if (cur === " " && cur !== ">") {
  103.                         while (file.charAt(index) === " ") {
  104.                             index++
  105.                             cur = file.charAt(index)
  106.                         }
  107.                     }
  108.                     if (cur !== "=" && cur !== ">") {
  109.                         key += cur
  110.                     } else if (cur === "=" && cur !== ">") {
  111.                         index++
  112.                         cur = file.charAt(index)
  113.                         while (cur !== " " && !isEnd(index) && cur !== ">") {
  114.                             if (cur === '"') {
  115.                                 index++
  116.                                 cur = file.charAt(index)
  117.                             } else {
  118.                                 value += cur
  119.                                 index++
  120.                                 cur = file.charAt(index)
  121.                             }
  122.                         }
  123.                         attrs.push({
  124.                             [key]: value
  125.                         })
  126.                         key = ""
  127.                         value = ""
  128.                         index--
  129.                     } else if (cur === ">") {
  130.                         break
  131.                     }
  132.                     index++
  133.                     cur = file.charAt(index)
  134.                 }
  135.             }
  136.             cur = file.charAt(index)
  137.             while (cur !== ">" && !isEnd(index)) {
  138.                 index++
  139.                 cur = file.charAt(index)
  140.             }
  141.             if (file.charAt(index + 1) === "<") { // <xx></xx>
  142.                 index++
  143.             }
  144.             // if (isEnd(index)) {
  145.             //     return {
  146.             //         type: "EOF",
  147.             //         index
  148.             //     }
  149.             // }
  150.             return {
  151.                 type: "node",
  152.                 tag,
  153.                 index,
  154.                 children: [],
  155.                 attrs
  156.             }
  157.         }
  158.     } else if (item === ">") { // >
  159.         index++
  160.         let content = ""
  161.         let cur = file.charAt(index)
  162.         while (cur !== "<" && !isEnd(index)) {
  163.             content += cur
  164.             index++
  165.             cur = file.charAt(index)
  166.         }
  167.         if (isEnd(index) && content === '') {
  168.             return {
  169.                 type: "EOF",
  170.                 index
  171.             }
  172.         }
  173.         return {
  174.             type: "text",
  175.             content,
  176.             index
  177.         }
  178.     } else {
  179.         let content = ""
  180.         let cur = file.charAt(index)
  181.         while (cur !== "<" && !isEnd(index)) {
  182.             content += cur
  183.             index++
  184.             cur = file.charAt(index)
  185.         }
  186.         if (isEnd(index) && content === '') {
  187.             return {
  188.                 type: "EOF",
  189.                 index
  190.             }
  191.         }
  192.         return {
  193.             type: "text",
  194.             content,
  195.             index
  196.         }
  197.     }
  198. }
  200. export function parser(file: any) {
  201.     let index = 0
  202.     let root = {
  203.         type: "root",
  204.         children: []
  205.     }
  206.     let stack: any = [root]
  208.     while (index < file.length) {
  209.         let item = file.charAt(index)
  210.         let token = lexer(item, index, file)
  211.         index = token.index
  212.         delete token.index
  213.         if (token.type === "EOF") {
  214.             return stack[0]
  215.         }
  216.         if (!token.closeTag) { // 非闭合标签
  217.             stack[stack.length - 1].children.push(token) // 放入栈顶children处
  218.             if (token.type === "node") { // 如果是标签节点，则放入栈中
  219.                 stack.push(token)
  220.             }
  221.         } else { // 闭合标签，栈顶标签出栈
  222.             stack.pop()
  223.         }
  224.     }
  225.     console.log(stack)
  226.     return stack[0]
  227. }

ast2html.ts AST2HTML

  2. export function generate(ast: any) {
  4.     let stack = []
  6.     // 深度遍历
  7.     function getAll(ast: any) {
  8.         if (ast.children) {
  9.             for (let item of ast.children) {
  10.                 // stack.push(item)
  11.                 getAll(item)
  12.                 stack.push(item)
  13.             }
  14.         }
  15.     }
  16.     getAll(ast)
  17.     stack.push(ast)
  19.     for (let index = 0; index < stack.length;) {
  20.         if (stack[index].children) {
  21.             if (stack[index].type === "node") {
  22.                 let aa = ""
  23.                 // let finds = []
  24.                 /*
  25.                             for (let i of stack[index].children) {
  26.                                 finds.push(stack.indexOf(i))
  27.                             }
  29.                             for (let q of finds) {
  30.                                 aa = `${aa}${stack[q].output}`
  31.                             }
  32.                 */
  33.                 for (let q of stack[index].children) {
  34.                     aa = `${aa}${q.output}`
  35.                 }
  36.                 let attrs = []
  37.                 if (stack[index].attrs) {
  38.                     for (let ll of stack[index].attrs) {
  39.                         for (let bb of Object.keys(ll)) {
  40.                             attrs.push(`${bb}="${ll[bb]}"`)
  41.                         }
  42.                     }
  43.                 }
  44.                 stack[index].output = `<${stack[index].tag}${attrs.length > 0 ? " " : ''}${attrs.join(" ")}>${aa}</${stack[index].tag}>`
  45.             } else if (stack[index].type === "root") {
  46.                 let aa = ""
  47.                 for (let q of stack[index].children) {
  48.                     aa = `${aa}${q.output}`
  49.                 }
  50.                 stack[index].output = aa
  51.             }
  52.         } else {
  53.             if (stack[index].type === "node") {
  54.                 let attrs = []
  55.                 if (stack[index].attrs) {
  56.                     for (let ll of stack[index].attrs) {
  57.                         for (let bb of Object.keys(ll)) {
  58.                             attrs.push(`${bb}="${ll[bb]}"`)
  59.                         }
  60.                     }
  61.                 }
  62.                 stack[index].output = `<${stack[index].tag}${attrs.length > 0 ? " " : ''}${attrs.join(" ")}></${stack[index].tag}>`
  63.             } else if (stack[index].type === "text") {
  64.                 stack[index].output = stack[index].content
  65.             } else if (stack[index].type === "comment") {
  66.                 stack[index].output = `<!--${stack[index].content}-->`
  67.             }
  68.         }
  69.         index++
  70.     }
  71.     // return stack
  72. }
  75. // let stack = []
  77. // // 广度遍历
  78. // function levelOrder(ast) {
  79. //     let queue = [];
  80. //     queue.push(ast);
  82. //     while (queue.length) {
  83. //         let cur = queue.shift();
  84. //         stack.push(cur)
  85. //         if (cur.children)
  86. //             queue.push(...cur.children)
  87. //     }
  88. // }
  90. // levelOrder(ast)

最后

有时间我再加注释吧。