本文详解如何使用递归 JavaScript 函数将 HTML 中任意深度的嵌套 结构（含 和 ）精准解析为等价的嵌套数组，保留层级关系与文本语义。

本文详解如何使用递归 javascript 函数将 html 中任意深度的嵌套 `

` 结构（含 `
• ` 和 `
• `）精准解析为等价的嵌套数组，保留层级关系与文本语义。

  在构建动态规则引擎、可视化逻辑编辑器或 DSL 解析器时，常需将用户通过拖拽/缩进生成的嵌套列表（如“操作符 → 条件”树形结构）转化为可序列化、可计算的 JavaScript 数组。核心挑战在于：

  不是
  • 的直接子元素，而是紧跟在某个
  • 后的兄弟节点——但语义上它属于该
  • 的子级。因此，不能简单遍历所有
  • ，而应按 DOM 层级顺序逐层处理，并将紧随其后的
    视为其父
    • 的嵌套子结构
    。

    以下是一个健壮、可复用的递归解析函数：

    const parseListItems = (element) => {
      const resultArray = [];
      // 遍历当前 ul 的直接子节点（非仅 li，因 ul 是 li 的兄弟）
      Array.from(element.children).forEach(node => {
        if (node.tagName === 'LI') {
          const textContent = node.textContent.trim();
          const nestedUl = node.querySelector('ul'); // 查找该 li 内部或紧邻的 ul（标准 HTML 中 ul 应在 li 内）
    
          if (nestedUl && nestedUl.parentElement === node) {
            // ul 是当前 li 的直接子元素：递归解析并拼入数组
            const nestedResult = parseListItems(nestedUl);
            resultArray.push([textContent, ...nestedResult]);
          } else {
            // 无嵌套 ul：直接推入纯文本（保留原始语义，如 "operator1" 或 "condition1"）
            resultArray.push(textContent);
          }
        }
      });
      return resultArray;
    };

    ✅ 关键设计说明：

    

    稿定AI

    一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

    下载
    • 使用 element.children（而非 querySelectorAll('li')）确保按 DOM 顺序处理，避免遗漏或错位；
    • 显式检查 nestedUl.parentElement === node，防止误捕父级或无关
      ；
    • 对每个
    • 提取 textContent.trim()，自动剥离换行与空格，兼容多行 HTML 缩进；
    • 采用 [textContent, ...nestedResult] 语法，天然支持多子项（如 operator2 下两个 condition），生成形如 ["operator2", ["condition1"], ["condition2"]] 的结构。

    ? 使用示例（配合 DOM 加载）：

    document.addEventListener('DOMContentLoaded', () => {
      const rootUl = document.querySelector('ul');
      const tree = parseListItems(rootUl);
      console.log(tree);
      // 输出：["operator1", ["operator2", ["condition1"], ["condition2"]], ["condition3"]]
    });

    ⚠️ 注意事项：

    • 输入 HTML 必须符合规范：嵌套
      应作为
      • 的子元素（而非同级兄弟），否则需预处理修正 DOM 结构；
      • 若
      • 内含其他标签（如 、），textContent 仍能准确提取全部文本；如需保留 HTML 结构，请改用 innerText 或定制文本提取逻辑；
      • 该函数不依赖 class 名称（如 "operator" / "condition"），仅基于 DOM 层级和标签结构，语义由业务层后续解析。

      此方案简洁、无外部依赖、深度适配真实 HTML 树，可直接集成至 React/Vue 组件或 Node.js JSDOM 环境中进行服务端解析。