什么是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
语法,待后期补充