如何基于带Tab缩进的字符串生成多维数组并构建HTML层级结构？

你的思路方向是对的，但当前的代码有个关键缺陷——它只是把同层级的元素归为一组，却没有建立父节点与子节点的关联关系。这会导致后续构建DOM时，你无法知道哪个父项对应哪些子项，最终没法正确生成嵌套的层级结构。

更优的实现方式是先把文本解析成树形数据结构（每个节点包含标题、链接和子节点列表），再基于这个树来生成嵌套的HTML列表。这种方式天然匹配你的层级数据逻辑，代码更清晰也更容易维护。

步骤1：解析每行文本为结构化对象 #

首先，我们需要把每行文本拆解成包含层级、标题、链接的对象。可以用正则来匹配开头的Tab数量，再拆分标题和链接部分：

// 解析单行文本
const parseLine = (line) => {
  // 匹配开头的Tab字符，计算层级（Tab数量就是层级，从0开始）
  const tabMatch = line.match(/^\t*/);
  const level = tabMatch ? tabMatch[0].length : 0;
  
  // 去掉开头的Tab，拆分标题和链接（格式：标题 (链接)）
  const content = line.trim();
  const [title, link] = content.split(/\s+\((#\/.*)\)/);
  
  return {
    level,
    title: title.trim(),
    link: link?.trim() || ''
  };
};

步骤2：构建树形数据结构 #

接下来，我们用栈来跟踪当前层级的父节点，遍历所有解析后的对象，逐步构建树：

// 从解析后的数组构建树形结构
const buildTree = (parsedLines) => {
  const root = { children: [] };
  const stack = [root]; // 栈顶始终是当前节点的父节点

  parsedLines.forEach((item) => {
    // 调整栈的长度，确保栈顶是当前层级的直接父节点
    while (stack.length > item.level + 1) {
      stack.pop();
    }
    
    // 创建当前节点
    const node = { ...item, children: [] };
    // 添加到父节点的children列表
    stack[stack.length - 1].children.push(node);
    // 将当前节点压入栈，作为后续子节点的父节点
    stack.push(node);
  });

  return root.children; // 返回根节点的子节点（即第一层级的所有项）
};

步骤3：遍历树生成DOM元素 #

最后，我们递归遍历树形结构，生成嵌套的<ul>和<li>元素：

// 从树形结构生成DOM
const generateDOM = (treeNodes) => {
  const ul = document.createElement('ul');
  
  treeNodes.forEach((node) => {
    const li = document.createElement('li');
    // 创建链接元素
    const link = document.createElement('a');
    link.href = node.link;
    link.textContent = node.title;
    li.appendChild(link);
    
    // 如果有子节点，递归生成子列表
    if (node.children.length > 0) {
      const subUl = generateDOM(node.children);
      li.appendChild(subUl);
    }
    
    ul.appendChild(li);
  });
  
  return ul;
};

完整使用示例 #

把这些函数组合起来，加载你的文本数据并渲染：

import data from './raw';

const initNavigation = () => {
  // 1. 拆分文本为行
  const lines = data.split(/\r?\n/).filter(line => line.trim() !== ''); // 过滤空行
  
  // 2. 解析每行
  const parsedLines = lines.map(parseLine);
  
  // 3. 构建树形结构
  const navigationTree = buildTree(parsedLines);
  
  // 4. 生成DOM并添加到页面
  const navContainer = document.getElementById('navigation-container');
  navContainer.appendChild(generateDOM(navigationTree));
};

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initNavigation);

为什么树形结构比多维数组更好？ #

• 关联关系明确：树形结构直接保存了每个节点的父节点和子节点，完全匹配你的层级数据逻辑，不会像多维数组那样丢失父子关联。
• 扩展性强：后续如果需要添加样式、交互（比如折叠展开），或者修改数据，直接操作树节点即可，逻辑更清晰。
• 递归生成DOM更简单：嵌套的列表结构和树形结构天然对应，递归遍历的代码非常直观，不容易出错。

你的初始思路核心是对的——先结构化数据再生成DOM，但把“层级分组”改成“树形关联”，就能完美解决你的问题啦。

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