如何将markdown解析成html

什么是markdown文件

随意打开任何markdown文件，你可能会看到类似如下内容：

# 标题1
## 标题2
**粗体**

我们需要将标题1、标题2、粗体转为<h1>、<h2>、<b>，如何做到这些呢？我们将利用正则表达式对其一一解析

正则表达式

不同的编程语言，其正则表达式可能会有一些差异。下面是用javascript编写的正则表达式：

const pattern = /Hello/
const text = 'Hello, beautiful people'
pattern.test(text) // true

如果你想学习更多的正则表达式知识，可以访问https://javascript.info

markdown编译器

该编译器，为parseMarkdown函数，它接收markdown文件内容，并将html文本返回

function parseMarkdown(markdownText) {
	const htmlText = markdownText // 对该文本做些编译相关的事

	return htmlText
}

String中的replace函数

replace函数的作用如下代码所示：

text = 'hello world and hello everyone'
regEx = /Hello/gi
console.log(text.replace(regEx, 'hi'))
// 输出: 'hi world and hi everyone'

i表示不区分大小写，g表示全局匹配，这表示它会对整个字符串进行匹配，而不是第一次匹配后便结束（若没有g的话，感兴趣的读者可以自己试试）

捕获分组(group)

我们使用()来捕获分组，捕获后，可以用$1表示它

text = 'hello world and hello everyone'
// 匹配由hello开始，任意字符结尾的字符串
regEx = /(Hello).*/i
console.log(text.replace(regEx, 'Matched Group: $1'))
// 输出: 'Matched Group: hello'

回到parseMarkdown函数

我们该如何编写该函数内容呢？需要准备如下的正则表达式

heading，如h1、h2等

由#开始，任意字符结尾的表达式

const h1 = /^# (.*$)/gim
const h2 = /^## (.*$)/gim
const h3 = /^### (.*$)/gim

^表示该字符串的开始，m表示多行，使用.*我们可捕获任意字符(字母、数字、特殊字符等等)

Blockquote

由>开始，注意前面必须使用转义字符\（因为正则表达式也有>，故需使用转义字符）

const bq = /^\> (.*$)/gim

粗体

匹配两个*号之间的内容

const bold = /\*\*(.*)\*\*/gim

斜体

匹配一个*号之间的内容

const italics = /\*(.*)\*/gim

image、link和分行字符

// ![Alt text](url)
const image = /!\[(.*?)\]\((.*?)\)/gim
// [text](url)
const link = /\[(.*?)\]\((.*?)\)/gim
const lineBreak = /\n$/gim

串联所有的正则表达式

该parseMarkdown的内容如下所示：

function parseMarkdown(markdownText) {
	const htmlText = markdownText
		.replace(/^### (.*$)/gim, '<h3>$1</h3>')
		.replace(/^## (.*$)/gim, '<h2>$1</h2>')
		.replace(/^# (.*$)/gim, '<h1>$1</h1>')
		.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
		.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
		.replace(/\*(.*)\*/gim, '<i>$1</i>')
		.replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")
		.replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")
		.replace(/\n$/gim, '<br />')

	return htmlText.trim()
}

编译如下markdown内容

const text = `
# Hello World
**This is a bold text**
`

console.log(parseMarkdown(text))
// <h1>Hello World</h1>
// <b>This is a bold text</b><br />

至此，我们简易的markdown编译器已编写完毕，当然，现在的它并没有包含所有的markdown语法，待后期补充