如何在JS中将任意深度的嵌套ul解析为嵌套数组

需求说明 #

需要将任意深度的嵌套<ul>结构解析为保留层级的嵌套数组，规则如下：

• 带condition类的<li>直接转为纯文本元素
• 带operator类的<li>作为数组容器，嵌套其后续同级<ul>内的所有元素

示例输入HTML #

<ul>
    <li class="operator">operator1</li>
    <ul>
        <li class="operator">operator2</li>
        <ul>
            <li class="condition">condition 1</li>
            <li class="condition">condition 2</li>
        </ul>
        <li class="condition">condition3</li>
    </ul>

目标输出数组 #

["operator1", ["operator2", ["condition 1"], ["condition 2"]], "condition3"]

现有代码的问题 #

你当前的实现只做了递归查询<li>元素，但没有：

1. 区分operator和condition的不同处理逻辑
2. 关联<li>和后续同级<ul>的嵌套关系
3. 正确收集和填充结果数组

修正后的实现代码 #

const parseNestedUl = (container) => {
    const result = [];
    let currentOperatorContainer = null;

    // 遍历容器的直接子元素，严格按层级处理
    Array.from(container.children).forEach(child => {
        if (child.tagName === 'LI') {
            const itemText = child.textContent.trim();
            if (child.classList.contains('operator')) {
                // operator作为数组容器，初始化后加入结果集
                currentOperatorContainer = [itemText];
                result.push(currentOperatorContainer);
            } else if (child.classList.contains('condition')) {
                // 根据是否有当前活跃的operator容器，决定存放位置
                if (currentOperatorContainer) {
                    currentOperatorContainer.push(itemText);
                } else {
                    result.push(itemText);
                }
            }
        } else if (child.tagName === 'UL') {
            // 递归解析嵌套ul，将结果注入最近的operator容器
            const nestedResults = parseNestedUl(child);
            if (currentOperatorContainer) {
                currentOperatorContainer.push(...nestedResults);
            } else {
                // 容错：若ul未跟随operator，直接加入顶层结果
                result.push(...nestedResults);
            }
        }
    });

    return result;
};

// 使用示例
const rootUl = document.querySelector('ul');
const parsedArray = parseNestedUl(rootUl);
console.log(parsedArray);

核心逻辑说明 #

• 层级控制：遍历容器的直接子元素，避免querySelectorAll跨层级获取元素导致的结构混乱
• 角色区分：
  • operator类元素作为嵌套容器，创建数组后标记为当前活跃容器
  • condition类元素根据是否有活跃容器，决定存入容器或顶层数组
• 递归嵌套：遇到<ul>时递归解析，将返回的嵌套数组注入最近的operator容器，保证层级对应
• 容错处理：针对结构异常的情况（如<ul>未跟随operator），直接将嵌套结果加入顶层数组

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