Javascript 用正则表达式解析markdown的子集

为了在我的博客上显示评论，我只想解析标记的一个子集。即链接、内联代码、代码块和段落

我很难处理受保护的代码块，因为正则表达式与内联代码块和段落块冲突

以下是我的功能：

function parseMd(text) {
    const codeblock = /```([^]+?.*?[^]+?[^]+?)```/g
    const code = /`(.*?)`/g
    const link = /\[(.*?)\]\((.*?)\)/g
    const paragraph = /(.+((\r?\n.+)*))/g

    return text.replace(codeblock, '<pre><code>$1</code></pre>')
    .replace(code, '<code>$1</code>')
    .replace(link, '<a href="$2">$1</a>')
    .replace(paragraph, '<p>$1</p>');
}

') .替换（代码“

$1

”） .替换（链接“”） .替换（段落“$1

”）； }

---

理想情况下，我需要

code

和

段落

正则表达式来忽略与

code块

匹配的所有内容，但由于它是一个多行的正则表达式，它变得很棘手

您可以利用项目中的正则表达式。

下面提供的实现依赖于

innerHTML

属性检查和编辑

它遵循以下主要步骤：

首先解析代码块以保护它们不被进一步替换

将结果作为

innerHTML

属性注入HTML元素，以允许浏览器解析，并将其转换为

节点
集合（现在代码块受到保护）
将剩余文本（现在是文本节点）替换为
元素以解析段落，并在内部执行内联元素解析，最终得到和
内联代码

下面是一个经过测试的代码片段


//解析过程中使用的一些HTML元素
var resultDiv=document.getElementById（“呈现结果”）
var resultSrcTA=document.getElementById（“resultsrc”）；
//convert（）-我们的lite MD解析器
函数转换（）{
var mdt=document.getElementById（“md”）.value；
//首先，我们解析这些块，以防止以后解析它们
解析码块（mdt）；
//然后我们处理发回重审的文本，这些文本是段落
解析段落（）；
resultSrcTA.value=resultDiv.innerHTML；
}
//此函数仅对给定文本执行regexp替换
//并将其注入结果HTML元素（resultDiv）
//作为内部HTML字符串，让浏览器将其分离
函数解析代码块（文本）{
常量代码块=/```\s*（[^]+？.[^]+？[^]+？）```/g；
resultDiv.innerHTML=
替换（代码块“”）；
}
//此函数使用段落替换剩余的文本节点
//（棘手的部分）
函数parseparations（）{
var nodes=resultDiv.childNodes；
//循环通过节点
对于（var i=0；i元素数组
ps=createPelementFrommdarges（节点[i].nodeValue）；
//通过
元素的反向循环
//因为我们在解析文本节点之后插入它们
对于（var j=ps.length-1；j>-1；j--）{
resultDiv.insertBefore（ps[j]，nodes[i].nextSibling）
}
//我们已经完成了段落插入，该删除了
//已解析的文本节点
结果v.removeChild（nodes[i]）；
//更新i：我们添加了n个段落，删除了一个文本节点
i+=ps.length-1；
}
}
//此函数返回给定文本的
数组，表示
//内容
函数createPelementFromMDPages（文本）{
常量段落=/（.+）（\r？\n.+）*）/g；
常量代码=/`（.**`/g；
常量链接=/\[（.*？\]\（.*？）/g；
var ps=[]；
var匹配；
//我们循环遍历段落正则表达式匹配
//对于每个匹配，我们创建一个
元素并推送它
//进入结果数组
while（（匹配=段落.exec（文本））！==null）{
var p=document.createElement（“p”）；
p、 appendChild（document.createTextNode（匹配[1]）；
//我们现在有机会格式化内联元素
//请注意，链接将在代码元素内进行解析，并且可以正常工作
p、 innerHTML=p.innerHTML.replace（代码“
$1
”）；
p、 innerHTML=p.innerHTML.replace（链接“”）；
ps.push（p）；
}
返回ps；
}
/*只是为了让它好看一点*/
文本区{
宽度：100%；
高度：15ex；
}
div#渲染结果{
最小高度：10ex；
高度：10ex；
边框：1px纯黑；
填充：1em；
字体系列：无衬线；
溢出y：自动；
}
div#渲染结果>预处理{
背景：#f0；
边缘：1米；
填充：0.5em；
边框：1px实心#808080；
}
div#渲染结果>预处理>代码{
保证金：0；
}
/*检查这是否是一个解析良好的段落*/
div#渲染结果>p:：第一个字母{
字体大小：粗体；
颜色：深色；
}
在下面键入您的标记文本：

第一段。
```
代码块被很好地捕获
哈哈，这个‘内联代码’不会被解析。
```
和一个带[2]的句子(http://stackoverflow.com)[链接](http://askbuntu.com).
还有一个有“内联代码”和[链接](http://superuser.com).
```
和另一个代码块
```
还有一个链接为“[内联代码](http://superuser.com)`.
最后一句。

转换它

结果

资料来源：

似乎是最有效的方法，但我愿意接受任何建议。我只是不想包含一个lib！听起来很有趣。你会怎么做？使用正则表达式解析文本或html是一个非常糟糕的主意。这就是解析器的用途。这里有一个想法：@amesshel真棒，谢谢@LGSon你指给我的链接也是关于使用正则表达式的…但是是的，这不是最好的主意。太棒了！虽然myƒn（在代码块之前有一个空的
p
标记）确实更干净。哎呀，看起来标记的项目不再使用正则表达式了