如何从字符串中按顺序创建JavaScript Element元素

直接用正则解析HTML不可靠，因为HTML语法包含属性嵌套引号、自闭合标签、注释、CDATA等复杂场景，正则无法覆盖所有边界情况，维护成本极高。推荐使用浏览器内置的节点遍历API或SAX式解析器来实现需求。

核心思路 #

1. 用DOMParser将HTML字符串解析为隐藏的文档对象（避免直接插入到当前DOM影响性能）
2. 用TreeWalker按顺序遍历所有节点（元素、文本、注释等），比getElementsByTagName("*")遍历效率更高
3. 维护一个栈结构处理元素嵌套关系，栈顶始终是当前元素的父节点
4. 遍历过程中可直接构建DOM，同时生成手动创建DOM的代码片段

实现代码 #

function parseAndBuildHTML(htmlStr) {
  const stack = [];
  let rootElement = null;
  let generatedCode = '';
  let indentLevel = 0;

  // 解析HTML到临时文档
  const tempDoc = new DOMParser().parseFromString(htmlStr, 'text/html');
  // 创建TreeWalker遍历所有节点
  const nodeWalker = document.createTreeWalker(
    tempDoc.body,
    NodeFilter.SHOW_ALL,
    null,
    false
  );

  let currentNode;
  while (currentNode = nodeWalker.nextNode()) {
    switch (currentNode.nodeType) {
      // 处理元素节点
      case Node.ELEMENT_NODE:
        const tagName = currentNode.tagName.toLowerCase();
        // 拼接属性字符串
        const attributes = Array.from(currentNode.attributes).map(attr => {
          return `${attr.name}="${attr.value.replace(/"/g, '\\"')}"`;
        }).join(' ');

        // 生成创建元素的代码
        const elementVarName = `${tagName}El`;
        generatedCode += `${'  '.repeat(indentLevel)}const ${elementVarName} = document.createElement('${tagName}');\n`;
        // 生成属性设置代码
        Array.from(currentNode.attributes).forEach(attr => {
          generatedCode += `${'  '.repeat(indentLevel)}${elementVarName}.setAttribute('${attr.name}', '${attr.value.replace(/'/g, "\\'")}');\n`;
        });

        // 添加到父元素或根节点
        if (stack.length === 0) {
          rootElement = currentNode.cloneNode(true);
          generatedCode += `${'  '.repeat(indentLevel)}document.body.appendChild(${elementVarName});\n`;
        } else {
          const parentElement = stack[stack.length - 1];
          parentElement.appendChild(currentNode.cloneNode(true));
          generatedCode += `${'  '.repeat(indentLevel)}${stack[stack.length - 1].tagName.toLowerCase()}El.appendChild(${elementVarName});\n`;
        }
        stack.push(currentNode);
        indentLevel++;
        break;

      // 处理文本节点（过滤空文本）
      case Node.TEXT_NODE:
        const textContent = currentNode.textContent.trim();
        if (textContent) {
          const textNode = document.createTextNode(textContent);
          const parent = stack[stack.length - 1];
          parent.appendChild(textNode.cloneNode(true));

          // 生成文本节点代码
          generatedCode += `${'  '.repeat(indentLevel)}const textNode = document.createTextNode('${textContent.replace(/'/g, "\\'")}');\n`;
          generatedCode += `${'  '.repeat(indentLevel)}${parent.tagName.toLowerCase()}El.appendChild(textNode);\n`;
        }
        break;

      // 处理注释节点（可选）
      case Node.COMMENT_NODE:
        const commentNode = document.createComment(currentNode.textContent);
        const commentParent = stack[stack.length - 1];
        commentParent.appendChild(commentNode.cloneNode(true));

        generatedCode += `${'  '.repeat(indentLevel)}const commentNode = document.createComment('${currentNode.textContent.replace(/'/g, "\\'")}');\n`;
        generatedCode += `${'  '.repeat(indentLevel)}${commentParent.tagName.toLowerCase()}El.appendChild(commentNode);\n`;
        break;

      // 处理元素结束（出栈）
      case Node.END_ELEMENT_NODE:
        stack.pop();
        indentLevel--;
        break;
    }
  }

  return {
    dom: rootElement,
    generatedCode: generatedCode
  };
}

// 测试示例
const testHTML = '<div>abc<span class="abc">123</span>567</div>';
const result = parseAndBuildHTML(testHTML);
console.log('生成的手动创建代码：');
console.log(result.generatedCode);
console.log('构建好的DOM元素：');
console.log(result.dom);

代码说明 #

• 解析过程完全遵循HTML结构顺序，支持任意合法HTML（包括嵌套、属性、文本、注释等）
• TreeWalker遍历节点的效率远高于getElementsByTagName("*")，因为它是按需遍历，无需先构建完整的节点列表
• 生成的代码与手动创建DOM的逻辑完全一致，可直接复用或修改
• 如果仅需要按顺序处理元素（而非生成代码），可在遍历节点时直接添加业务逻辑（如绑定事件、修改样式等）

非浏览器环境适配 #

如果在Node.js环境中处理，可使用htmlparser2库（SAX式解析器），它会边解析HTML边触发事件，适合处理大体积HTML字符串，性能更优。

内容的提问来源于stack exchange，提问作者John1998