Question

我一直试图根据＆＃34;＃＆＃34;的数量嵌套标题。我解析了markdown并提取了所有标题。他们采用以下格式

function createRepresentationFromHeadings(headings, index, level) {
    var data = "<ul>";
    for (var i = index; i < headings.length; i++) {
        var heading = headings[i];
        var parts = heading.split("# ");
        parts[0] = parts[0] + "#";
        data += "<li>" + parts[1];
        if (i + 1 < headings.length) {
            var nextParts = headings[i + 1].split("# ");
            nextParts[0] = nextParts[0] + "#";
            if (determineHeadingLevel(nextParts[0]) > level)
                createRepresentationFromHeadings(headings, i + 1, determineHeadingLevel(nextParts[0]));
        }
        data += "</li>";
    }
    data += "</ul>";
    return data;
}

function determineHeadingLevel(part) {
    return part.length;
}

我试图以递归方式将其转换为嵌套的ul列表，但它似乎无法工作..这就是我到目前为止所做的

{{1}}

它只是创造了一个扁平的ul。这是一个小提琴：Slow file download using cURL

Answer 1

您可以使用此递归（子）函数：

＆＃13;

function createRepresentationFromHeadings(headings) {
    let i = 0;
    const tags = [];
    
    (function recurse(depth) {
        let unclosedLi = false;
        while (i < headings.length) {
            const [hashes, data] = headings[i].split("# ");
            if (hashes.length < depth) {
                break;
            } else if (hashes.length === depth) {
                if (unclosedLi) tags.push('</li>');
                unclosedLi = true;
                tags.push('<li>', data);
                i++;
            } else {
                tags.push('<ul>');
                recurse(depth+1);
                tags.push('</ul>');
            }
        }
        if (unclosedLi) tags.push('</li>');
    })(-1);
    return tags.join('\n');
}

var headings = [
    "# Getting Started",
    "# Heading 1",
    "## SubHeading 1",
    "## SubHeading 2",
    "### SubSubHeading 1",
    "### SubSubHeading 2",
    "#### SubSubSubHeading 1",
    "## SubHeading 3",
];

document.getElementById("test").innerHTML = 
    createRepresentationFromHeadings(headings);

＆＃13;

<div id="test"></div>

＆＃13;

解析Markdown标题以在JavaScript中生成嵌套列表

1 个答案: