HTML 解析

HTML 是构建网页结构的基础，而“解析 HTML”是前端开发、爬虫编程、浏览器内核等领域的核心技术之一。本文将带你从手动构建状态机开始，理解 HTML 是如何被逐字符拆解、识别和组织成 DOM 树的。

HTML 解析过程

标签和内容

首先，我们来一段最简单的 html 字符串

const htmlString = `<div>hello world</div>`;

接下来拆分解析过程，将上述 html 粗略拆分得到以下结果

<
div
>
hello world
<
/
div
>

然后我们根据每一步来定义一下状态

<               TAG_OPEN
div             TAG_NAME
>               TAG_CLOSE
hello world     DATA
<               TAG_OPEN
/               END_TAG_OPEN
div             END_TAG_NAME
>               END_TAG_CLOSE

最后来编写我们的解析函数

const TokenType = {
  TAG_OPEN: "TAG_OPEN",
  TAG_NAME: "TAG_NAME",
  TAG_CLOSE: "TAG_CLOSE",
  DATA: "DATA",
  END_TAG_OPEN: "END_TAG_OPEN",
  END_TAG_NAME: "END_TAG_NAME",
  END_TAG_CLOSE: "END_TAG_CLOSE",
};

class NodeTree {
  nodeName = "";
  content = "";
  endNodeName = "";
  constructor(nodeName) {
    this.nodeName = nodeName;
  }
}

function parseHtml(htmlString) {
  /** @type {NodeTree} */
  let currentNode = null;
  let state = TokenType.DATA;
  for (let k of htmlString) {
    if (state === TokenType.DATA) {
      if (k === "<") {
        state = TokenType.TAG_OPEN;
      } else {
        currentNode.content += k;
      }
    } else if (state === TokenType.TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.TAG_NAME;
        currentNode = new NodeTree("");
        currentNode.nodeName += k;
      } else if (k === "/") {
        state = TokenType.END_TAG_OPEN;
      }
    } else if (state === TokenType.TAG_NAME) {
      if (isAlphaNumeric(k)) {
        currentNode.nodeName += k;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.END_TAG_NAME;
        currentNode.endNodeName += k;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_NAME) {
      if (isAlphaNumeric(k)) {
        currentNode.endNodeName += k;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    }
  }
  return currentNode;
}

function isAlphaNumeric(s) {
  return /[A-Za-z0-9]/.test(s);
}

const htmlString = `<div>hello world</div>`;
console.log(parseHtml(htmlString));

输出结果为

{
  "nodeName": "div",
  "content": "hello world",
  "endNodeName": "div"
}

属性

接下来我们加入属性解析的内容

const htmlString = `<div attr="attrValue">hello world</div>`;

首先还是和上面一样，我们来简单分析一下属性的状态

attr         ATTRIBUTE_NAME
=            ATTRIBUTE_NAME_EQUAL
"            ATTRIBUTE_VALUE_START
attrValue    ATTRIBUTE_VALUE
"            ATTRIBUTE_VALUE_END

然后根据上面的函数 ATTRIBUTE_NAME 是在 TAG_NAME 状态时可以被第一次探测到
所以我们在 TAG_NAME 里面加一个 if 分支去处理标签

  const TokenType = {
    ...
    BEFORE_ATTRIBUTE_NAME: BEFORE_ATTRIBUTE_NAME,
    ATTRIBUTE_NAME: 'ATTRIBUTE_NAME',
    ATTRIBUTE_NAME_EQUAL: 'ATTRIBUTE_NAME_EQUAL',
    ATTRIBUTE_VALUE_START: 'ATTRIBUTE_VALUE_START',
    ATTRIBUTE_VALUE: 'ATTRIBUTE_VALUE',
    ATTRIBUTE_VALUE_END: 'ATTRIBUTE_VALUE_END',
    ...
  }

  class NodeTree {
    ...
    attributes = []
    ...
  }

  function parseHtml(htmlString) {
    let currentAttribute = null
    ...
    for(let k of htmlString) {
      ...
      else if(state === TokenType.TAG_NAME) {
        if(isAlphaNumeric(k)) {
          currentNode.nodeName += k
        } else if(isEmptyContent(k)) {
          state = TokenType.BEFORE_ATTRIBUTE_NAME
        }if(k === '>') {
          state = TokenType.DATA
        }
      }
      ...

      else if(state === TokenType.BEFORE_ATTRIBUTE_NAME) {
        if(isAlphaNumeric(k)) {
          currentAttribute = {name: k, value: ''}

          state = TokenType.ATTRIBUTE_NAME
        }
      } else if(state === TokenType.ATTRIBUTE_NAME) {
        if(isAlphaNumeric(k)) {
          state = TokenType.ATTRIBUTE_NAME
          currentAttribute.name += k
        } else if(k === '=') {
          state = TokenType.ATTRIBUTE_VALUE_START
        }
      } else if(state === TokenType.ATTRIBUTE_VALUE_START) {
        if(k === '"' || k === "'") {
          state = TokenType.ATTRIBUTE_VALUE
        }
      } else if(state === TokenType.ATTRIBUTE_VALUE) {
        if(k === '"' || k === "'") {
          state = TokenType.ATTRIBUTE_VALUE_END
          currentNode.attributes.push(currentAttribute)
          currentAttribute = null
        } else {
          currentAttribute.value += k
        }
      } else if(state === TokenType.ATTRIBUTE_VALUE_END) {
        if(isEmptyContent(k)) {
          state = TokenType.BEFORE_ATTRIBUTE_NAME
        } else if(k === '>') {
          state = TokenType.DATA
        }
      }
    }
  }


function isEmptyContent(s) {
  return /[\s\n\t\f]/.test(s);
}


const htmlString = `<div attr="attrValue">hello world</div>`
console.log(parseHtml(htmlString))

输出结果

{
  "nodeName": "div",
  "content": "hello world",
  "endNodeName": "div",
  "attributes": [
    {
      "name": "attr",
      "value": "attrValue"
    }
  ]
}

多个属性

parseHtml(`<div attr="attrValue" test="123">hello world</div>`);

输出

{
  "nodeName": "div",
  "content": "hello world",
  "endNodeName": "div",
  "attributes": [
    {
      "name": "attr",
      "value": "attrValue"
    },
    {
      "name": "test",
      "value": "123"
    }
  ]
}

子元素

接下来我们来处理嵌套内容

const htmlString = `<div attr="attrValue">
  <h3>标题</h3>
  <div>文本内容</div>
</div>`;

继续按照上面的分析对内容进行拆解

空白字符       DATA
<h3>          标签
文本内容       DATA
</h3>         标签
<div>         标签
文本内容       DATA
</div>        标签
空白字符       DATA

可以看出这里的属性之前都包含了，所以暂时我们不改变状态枚举

const TokenType = {
  DATA: "DATA",
  TAG_OPEN: "TAG_OPEN",
  TAG_NAME: "TAG_NAME",
  TAG_CLOSE: "TAG_CLOSE",

  END_TAG_OPEN: "END_TAG_OPEN",
  END_TAG_NAME: "END_TAG_NAME",
  END_TAG_CLOSE: "END_TAG_CLOSE",

  BEFORE_ATTRIBUTE_NAME: "BEFORE_ATTRIBUTE_NAME",
  ATTRIBUTE_NAME: "ATTRIBUTE_NAME",
  ATTRIBUTE_NAME_EQUAL: "ATTRIBUTE_NAME_EQUAL",
  ATTRIBUTE_VALUE_START: "ATTRIBUTE_VALUE_START",
  ATTRIBUTE_VALUE: "ATTRIBUTE_VALUE",
  ATTRIBUTE_VALUE_END: "ATTRIBUTE_VALUE_END",
};

同时我们发现最外层的 div 后面接的下一个 endTag 是 h3
所以我们引入 stack 来处理标签结束, 并增加根节点和 children 属性来处理嵌套
接下来是分析过程

首先我们来分析标签的创建和出入栈

第一个 div 开始标签创建标签 push 进 stack
第一个 h3 开始标签创建标签 push 进 stack
第一个 h3 结束标签取出 stack 的第一个标签
第二个 div 开始标签创建标签 push 进 stack
第二个 div 结束标签取出 stack 的第一个标签
第一个 div 结束标签取出 stack 的第一个标签

下面是解析函数

const TokenType = {
  TAG_OPEN: "TAG_OPEN",
  TAG_NAME: "TAG_NAME",
  TAG_CLOSE: "TAG_CLOSE",
  DATA: "DATA",
  END_TAG_OPEN: "END_TAG_OPEN",
  END_TAG_NAME: "END_TAG_NAME",
  END_TAG_CLOSE: "END_TAG_CLOSE",

  BEFORE_ATTRIBUTE_NAME: "BEFORE_ATTRIBUTE_NAME",
  ATTRIBUTE_NAME: "ATTRIBUTE_NAME",
  ATTRIBUTE_VALUE_START: "ATTRIBUTE_VALUE_START",
  ATTRIBUTE_VALUE: "ATTRIBUTE_VALUE",
  ATTRIBUTE_VALUE_END: "ATTRIBUTE_VALUE_END",
};

class NodeTree {
  nodeName = "";
  content = "";
  endNodeName = "";
  children = [];
  attributes = [];
  constructor(nodeName) {
    this.nodeName = nodeName;
  }
}

const stacks = [];

function parseHtml(htmlString) {
  /** @type {NodeTree} */
  let currentNode = null;
  let state = TokenType.DATA;
  let currentAttribute = null;
  const root = new NodeTree("#document");
  stacks.push(root);
  currentNode = root;
  for (let k of htmlString) {
    if (state === TokenType.DATA) {
      if (k === "<") {
        state = TokenType.TAG_OPEN;
      } else {
        currentNode.content += k;
      }
    } else if (state === TokenType.TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.TAG_NAME;

        currentNode = new NodeTree("");
        currentNode.nodeName += k;

        const parentNode = stacks[stacks.length - 1];
        if (parentNode) {
          parentNode.children.push(currentNode);
        }
        stacks.push(currentNode);
      } else if (k === "/") {
        state = TokenType.END_TAG_OPEN;
      }
    } else if (state === TokenType.TAG_NAME) {
      if (isAlphaNumeric(k)) {
        currentNode.nodeName += k;
      } else if (isEmptyContent(k)) {
        state = TokenType.BEFORE_ATTRIBUTE_NAME;
      }
      if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.END_TAG_NAME;
        currentNode.endNodeName += k;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_NAME) {
      if (isAlphaNumeric(k)) {
        currentNode.endNodeName += k;
      } else if (k === ">") {
        stacks.pop();
        state = TokenType.DATA;
      }
    } else if (state === TokenType.BEFORE_ATTRIBUTE_NAME) {
      if (isAlphaNumeric(k)) {
        currentAttribute = { name: k, value: "" };

        state = TokenType.ATTRIBUTE_NAME;
      }
    } else if (state === TokenType.ATTRIBUTE_NAME) {
      if (isAlphaNumeric(k)) {
        state = TokenType.ATTRIBUTE_NAME;
        currentAttribute.name += k;
      } else if (k === "=") {
        state = TokenType.ATTRIBUTE_VALUE_START;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE_START) {
      if (k === '"' || k === "'") {
        state = TokenType.ATTRIBUTE_VALUE;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE) {
      if (k === '"' || k === "'") {
        state = TokenType.ATTRIBUTE_VALUE_END;
        currentNode.attributes.push(currentAttribute);
        currentAttribute = null;
      } else {
        currentAttribute.value += k;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE_END) {
      if (isEmptyContent(k)) {
        state = TokenType.BEFORE_ATTRIBUTE_NAME;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    }
  }
  return root;
}

function isAlphaNumeric(s) {
  return /[A-Za-z0-9]/.test(s);
}

function isEmptyContent(s) {
  return /[\s\n\t\f]/.test(s);
}

const htmlString = `<div attr="attrValue">
  <h3>标题</h3>
  <div>文本内容</div>
</div>`;
console.log(parseHtml(htmlString));

输出结果

{
  "nodeName": "#document",
  "content": "",
  "endNodeName": "",
  "children": [
    {
      "nodeName": "div",
      "content": "\n  ",
      "endNodeName": "",
      "children": [
        {
          "nodeName": "h3",
          "content": "标题\n  ",
          "endNodeName": "h3",
          "children": [],
          "attributes": []
        },
        {
          "nodeName": "div",
          "content": "文本内容\n",
          "endNodeName": "divdiv",
          "children": [],
          "attributes": []
        }
      ],
      "attributes": [
        {
          "name": "attr",
          "value": "attrValue"
        }
      ]
    }
  ],
  "attributes": []
}

文本内容/自闭合标签

接下来我们来处理文本内容和自闭合标签
上面子元素的输出结果可以看出来，每一个子元素的内容都多了一个\n ,并且如果我们在元素之间加上文本内容可能会出现解析错误
比如

parseHtml(`<div attr="attrValue">
  <h3>标题</h3> 33333 <br />
  <div>文本内容</div>
</div>`);

后面的 33333 会被解析到 h3 里面去

按照惯例，我们继续来分析下状态

空白字符       DATA
<h3>          标签
文本内容       DATA
</h3>         标签
33333         DATA
<br />        标签
<div>         标签
文本内容       DATA
</div>        标签
空白字符       DATA

DATA 好像不够用怎么办？
接下来我们来引入 TEXT 节点来处理文本内容, 并增加对自闭合标签的支持

下面是代码

const TokenType = {
  TAG_OPEN: "TAG_OPEN",
  TAG_NAME: "TAG_NAME",
  TAG_CLOSE: "TAG_CLOSE",
  DATA: "DATA",
  END_TAG_OPEN: "END_TAG_OPEN",
  END_TAG_NAME: "END_TAG_NAME",
  END_TAG_CLOSE: "END_TAG_CLOSE",

  BEFORE_ATTRIBUTE_NAME: "BEFORE_ATTRIBUTE_NAME",
  ATTRIBUTE_NAME: "ATTRIBUTE_NAME",
  ATTRIBUTE_VALUE_START: "ATTRIBUTE_VALUE_START",
  ATTRIBUTE_VALUE: "ATTRIBUTE_VALUE",
  SELF_CLOSING_START_TAG: "SELF_CLOSING_START_TAG",
  ATTRIBUTE_VALUE_END: "ATTRIBUTE_VALUE_END",
};

class NodeTree {
  nodeName = "";
  endNodeName = "";
  children = [];
  content = "";
  attributes = [];
  constructor(nodeName) {
    this.nodeName = nodeName;
  }
}

const stacks = [];

let buffer = "";
function parseHtml(htmlString) {
  /** @type {NodeTree} */
  let currentNode = null;
  let state = TokenType.DATA;
  let currentAttribute = null;
  const root = new NodeTree("#document");
  stacks.push(root);
  currentNode = root;
  for (let k of htmlString) {
    if (state === TokenType.DATA) {
      if (k === "<") {
        state = TokenType.TAG_OPEN;

        if (buffer.trim()) {
          const textNode = new NodeTree("#text");
          textNode.content = buffer;
          const parentNode = stacks[stacks.length - 1];
          if (parentNode) {
            parentNode.children.push(textNode);
          }
        }
        buffer = "";
      } else {
        buffer += k;
      }
    } else if (state === TokenType.TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.TAG_NAME;
        currentNode = new NodeTree("");
        currentNode.nodeName += k;
        const parentNode = stacks[stacks.length - 1];
        if (parentNode) {
          parentNode.children.push(currentNode);
        }
        stacks.push(currentNode);
      } else if (k === "/") {
        state = TokenType.END_TAG_OPEN;
      }
    } else if (state === TokenType.TAG_NAME) {
      if (isAlphaNumeric(k)) {
        currentNode.nodeName += k;
      } else if (k === "/") {
        state = TokenType.SELF_CLOSING_START_TAG;
      } else if (isEmptyContent(k)) {
        state = TokenType.BEFORE_ATTRIBUTE_NAME;
      }
      if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_OPEN) {
      if (isAlphaNumeric(k)) {
        state = TokenType.END_TAG_NAME;
        const top = stacks[stacks.length - 1];
        if (top) {
          top.endNodeName += k;
        }
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.END_TAG_NAME) {
      if (isAlphaNumeric(k)) {
        const top = stacks[stacks.length - 1];
        if (top) {
          top.endNodeName += k;
        }
      } else if (k === ">") {
        stacks.pop();
        state = TokenType.DATA;
      }
    } else if (state === TokenType.BEFORE_ATTRIBUTE_NAME) {
      if (isAlphaNumeric(k)) {
        currentAttribute = { name: k, value: "" };
        state = TokenType.ATTRIBUTE_NAME;
      } else if (k === "/") {
        state = TokenType.SELF_CLOSING_START_TAG;
      }
    } else if (state === TokenType.ATTRIBUTE_NAME) {
      if (isAlphaNumeric(k)) {
        state = TokenType.ATTRIBUTE_NAME;
        currentAttribute.name += k;
      } else if (k === "=") {
        state = TokenType.ATTRIBUTE_VALUE_START;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE_START) {
      if (k === '"' || k === "'") {
        state = TokenType.ATTRIBUTE_VALUE;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE) {
      if (k === '"' || k === "'") {
        state = TokenType.ATTRIBUTE_VALUE_END;
        currentNode.attributes.push(currentAttribute);
        currentAttribute = null;
      } else {
        currentAttribute.value += k;
      }
    } else if (state === TokenType.ATTRIBUTE_VALUE_END) {
      if (isEmptyContent(k)) {
        state = TokenType.BEFORE_ATTRIBUTE_NAME;
      } else if (k === "/") {
        state = TokenType.SELF_CLOSING_START_TAG;
      } else if (k === ">") {
        state = TokenType.DATA;
      }
    } else if (state === TokenType.SELF_CLOSING_START_TAG) {
      if (k === ">") {
        stacks.pop();
        currentNode = stacks[stacks.length - 1] || null;
        state = TokenType.DATA;
      }
    }
  }
  return root;
}

function isAlphaNumeric(s) {
  return /[A-Za-z0-9]/.test(s);
}

function isEmptyContent(s) {
  return /[\s\n\t\f]/.test(s);
}

const htmlString = `<div attr="attrValue">
  <h3>标题</h3> 333 <br />
  <div>文本内容</div>
</div>`;
console.log(parseHtml(htmlString));

输出结果为

{
  "nodeName": "#document",
  "endNodeName": "",
  "children": [
    {
      "nodeName": "div",
      "endNodeName": "div",
      "children": [
        {
          "nodeName": "h3",
          "endNodeName": "h3",
          "children": [
            {
              "nodeName": "#text",
              "endNodeName": "",
              "children": [],
              "content": "标题",
              "attributes": []
            }
          ],
          "content": "",
          "attributes": []
        },
        {
          "nodeName": "#text",
          "endNodeName": "",
          "children": [],
          "content": " 333 ",
          "attributes": []
        },
        {
          "nodeName": "br",
          "endNodeName": "",
          "children": [],
          "content": "",
          "attributes": []
        },
        {
          "nodeName": "div",
          "endNodeName": "div",
          "children": [
            {
              "nodeName": "#text",
              "endNodeName": "",
              "children": [],
              "content": "文本内容",
              "attributes": []
            }
          ],
          "content": "",
          "attributes": []
        }
      ],
      "content": "",
      "attributes": [
        {
          "name": "attr",
          "value": "attrValue"
        }
      ]
    }
  ],
  "content": "",
  "attributes": []
}

style 解析

接下来来我们来对样式进行解析
html 内可能存在两种情况的样式
内敛样式和 style 节点内的样式

通过上面的方法，我们先尝试解析一下样式

const htmlString = `<div class="div" style="width: 100px; height: 100px; background: #f80;">内容</div>
<style>
  .div {
    border: 1px solid #000;
  }
</style>`;

parseHtml(htmlString);

我们会得到 2 个形式的 style

// div上
{

    "attributes": [
        {
            "name": "style",
            "value": "width: 100px; height: 100px; background: #f80;"
        }
    ]
}
// style标签内
{
    "nodeName": "#text",
    "endNodeName": "",
    "children": [],
    "content": "\n  .div {\n    border: 1px solid #000;\n  }\n",
    "attributes": []
}

接下来我们单独对每个node节点进行判断来将style插入节点内

// parseCss.js
// 简单 CSS 解析函数，返回 {selector: {prop: value, ...}, ...}
function parseCSS(cssText) {
  const rules = {};
  const ruleRegex = /([^{]+)\{([^}]+)\}/g;
  let match;
  while ((match = ruleRegex.exec(cssText)) !== null) {
    const selector = match[1].trim();
    const declarationsText = match[2].trim();
    const declarations = {};
    declarationsText.split(";").forEach((decl) => {
      const [property, value] = decl.split(":");
      if (property && value) {
        declarations[property.trim()] = value.trim();
      }
    });
    rules[selector] = declarations;
  }
  return rules;
}

// 解析行内 style 字符串，例如 "height: 100px; color: red;"
function parseInlineStyle(inlineStyle) {
  const styleObj = {};
  if (!inlineStyle) return styleObj;
  inlineStyle.split(";").forEach((decl) => {
    const [property, value] = decl.split(":");
    if (property && value) {
      styleObj[property.trim()] = value.trim();
    }
  });
  return styleObj;
}

// 主函数：提取 style 标签样式，并合并到节点 style 属性中
function extractAndParseStylesFromTree(root) {
  const styleSheet = {};

  // 1. 找到 style 标签，解析 CSS 并合并进 styleSheet
  function findAndParseStyle(node) {
    if (node.nodeName === "style") {
      const styleTextNode = node.children.find((c) => c.nodeName === "#text");
      if (styleTextNode && styleTextNode.content) {
        Object.assign(styleSheet, parseCSS(styleTextNode.content));
      }
    }
    if (node.children) {
      node.children.forEach(findAndParseStyle);
    }
  }
  findAndParseStyle(root);

  // 2. 遍历节点，合并样式
  function applyStyles(node) {
    if (!node.attributes) node.attributes = [];

    // 转成 map 方便取值
    const attrsMap = {};
    node.attributes.forEach(({ name, value }) => {
      attrsMap[name] = value;
    });

    let combinedStyle = {};

    // 根据 class 选择器合并样式
    if (attrsMap.class) {
      // 支持多 class，以空格分隔
      const classes = attrsMap.class.split(/\s+/);
      classes.forEach((cls) => {
        const classSelector = "." + cls;
        if (styleSheet[classSelector]) {
          Object.assign(combinedStyle, styleSheet[classSelector]);
        }
      });
    }

    // 根据 id 选择器合并样式
    if (attrsMap.id) {
      const idSelector = "#" + attrsMap.id;
      if (styleSheet[idSelector]) {
        Object.assign(combinedStyle, styleSheet[idSelector]);
      }
    }

    // 合并行内 style 属性，覆盖掉外部样式
    if (attrsMap.style) {
      Object.assign(combinedStyle, parseInlineStyle(attrsMap.style));
    }

    if (Object.keys(combinedStyle).length > 0) {
      node.style = combinedStyle;
    }

    // 递归处理子节点
    if (node.children) {
      node.children.forEach(applyStyles);
    }
  }
  applyStyles(root);

  return root;
}

module.exports = {
  extractAndParseStylesFromTree,
};


// step5.js

const htmlTree = parseHtml(`
  <style>
    .div {
      border: 1px solid #000;
    }
    #main {
      padding: 10px;
    }
  </style>
  <div class="div" style="height: 100px;">Hello</div>
`);

const styledTree = extractAndParseStylesFromTree(htmlTree);

console.log(styledTree)

输出

{
    "nodeName": "#document",
    "endNodeName": "",
    "children": [
        {
            "nodeName": "style",
            "endNodeName": "style",
            "children": [
                {
                    "nodeName": "#text",
                    "endNodeName": "",
                    "children": [],
                    "content": "\n    .div {\n      border: 1px solid #000;\n    }\n    #main {\n      padding: 10px;\n    }\n  ",
                    "attributes": []
                }
            ],
            "content": "",
            "attributes": []
        },
        {
            "nodeName": "div",
            "endNodeName": "div",
            "children": [
                {
                    "nodeName": "#text",
                    "endNodeName": "",
                    "children": [],
                    "content": "Hello",
                    "attributes": []
                }
            ],
            "content": "",
            "attributes": [
                {
                    "name": "class",
                    "value": "div"
                },
                {
                    "name": "style",
                    "value": "height: 100px;"
                }
            ],
            "style": {
                "border": "1px solid #000",
                "height": "100px"
            }
        }
    ],
    "content": "",
    "attributes": []
}

总结

以上就是HTML解析的简要过程,通过构建状态机，我们逐步识别出标签、属性、文本节点等结构。
尽管目前的实现还较为简化，但已经初步展现了浏览器解析 HTML 的核心机制。
后续我们还可以在此基础上扩展更多复杂的规则和错误处理逻辑。

HTML 解析过程

标签和内容

属性

子元素

文本内容/自闭合标签

style 解析

总结

参考