Javascript Markdown 解析

Question

我正在开发一个 markdown 到 html 解析器。我知道这是一个大项目，并且有第三方库，但尽管如此，我想自己推出一个简单的解决方案，不必处理 markdown 的每个方面。

到目前为止，该过程是获取输入(在我的例子中是文本区域的值)并逐行解析它。

var html = [];
var lines = txt.split('\n'); //Convert string to array
//Remove empty lines
for(var index = lines.length-1; index >= 0; index--) {
    if(lines[index] == '') lines.splice(index, 1);
}
//Parse line by line
for(var index = 0; index <= lines.length-1; index++) {
    var str = lines[index];
    if(str.match(/^#[^#]/)) {
        //Header
        str = str.replace(/#(.*?)$/g, '<h1>$1</h1>');
    } else if(str.match(/^##[^#]/)) {
        //Header 2
        str = str.replace(/##(.*?)$/g, '<h2>$1</h2>');
    } else if(str.match(/^###[^#]/)) {
        //Header 3
        str = str.replace(/###(.*?)$/g, '<h3>$1</h3>');
    } else if(str.trim().startsWith('+')) {
        //Unordered List
        var orig = str;
        str = str.replace(/\+(.*?)$/, '<li>$1</li>');

        var previous, next;
        if(index > 0) previous = lines[index-1];
        if(!previous || previous && previous.indexOf('+') < orig.indexOf('+')) {
            str = '<ul>' + str;
        }
        if(index < lines.length-1) next = lines[index+1];
        if(!next || next && next.indexOf('+') < orig.indexOf('+')) {
            var count = Math.max(0, orig.indexOf('+') / 4);
            if(next) count = count - Math.max(0, next.indexOf('+') / 4);
            for(var i=1; i<=count; i++) {
                    str = str + '</ul>';
            }
        }
            if(next && next.trim().indexOf('+') == -1) str = str + '</ul>';
        } else if(str.match(/^[0-9a-zA-Z]/)) {
            //Paragraph
            str = str.replace(/^([0-9a-zA-Z].*?)$/g, '<p>$1</p>');
        }
    //Inline formatting
    str = str.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); //Bold
    str = str.replace(/\_\_(.*?)\_\_/g, '<strong>$1</strong>'); //Another bold
    str = str.replace(/\*(.*?)\*/g, '<em>$1</em>'); //Italics
    str = str.replace(/\_(.*?)\_/g, '<em>$1</em>'); //Another italics
    //Append formatted to return string
    html.push(str);
}

我遇到问题的地方是嵌套 block ，例如 ul。目前，代码查看以 + 开头的行并将其包装在 li 中。很好，但是这些列表项永远不会放置在 ul 中。我可以在逐行之后再次运行输出，然后将每组 li 包装起来，但是当我嵌套需要自己的 ul 的 li 时，这会搞砸我。

关于如何应用这些额外的包装标签有什么想法吗？我考虑过在列表类型元素周围使用我自己的特殊字符，这样我就知道在哪里添加包装标签，但这打破了传统的 Markdown 。我无法将原始 Markdown 传递给我以外的其他人，并且知道他们会理解发生了什么。

编辑 我更新了代码示例以包含工作示例。工作示例还支持嵌套列表。

Answer 1

您需要一个非常简单的状态机。

当你遇到第一个+时您添加 <ul>并举起旗帜。

如果您没有看到以 + 开头的行并且您的旗帜已升起，然后关闭 </ul>