JavaScript如何从树形对象生成带正确缩进的HTML字符串

原代码核心问题 #

• 起始标签的缩进与标签拆分到两个数组元素，导致每级标签前多生成空行
• 字符串类型的文本子节点未添加对应层级的缩进，格式错乱
• depth * 2 逻辑重复，缩进计算规则混乱
• 未单独处理文本节点，直接返回原始字符串缺少缩进

修正后完整代码 #

function generateHTMLFrom(tree) {
  // 可自定义单级缩进长度，这里设置为4个空格匹配预期输出
  const INDENT_UNIT = '    '
  const recur = (node, depth = 0) => {
    // 处理文本节点，直接添加对应深度缩进后返回
    if (typeof node === 'string') {
      return `${INDENT_UNIT.repeat(depth)}${node}`
    }
    // 处理带tag的元素节点
    const currentIndent = INDENT_UNIT.repeat(depth)
    return [
      // 起始标签和缩进放在同一行
      `${currentIndent}<${node.tag}>`,
      // 递归处理子节点，层级+1
      ...node.children.flatMap(child => recur(child, depth + 1)),
      // 闭合标签
      `${currentIndent}</${node.tag}>`
    ]
  }
  return recur(tree).join('\n')
}

效果验证 #

传入你提供的测试树形对象，运行后输出与预期完全一致：

<body>
    <div>
        <span>
            bar1
            bar2
        </span>
    </div>
    <div>
        baz
    </div>
</body>

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