写一个简单的markdown到html的解析器

发表于 更新于 分类于

markdown

markdown是一种方便快捷的基于标签的文本格式化语法，类似于HTML超文本标志语言。事实上，很多markdown的解析器就是把markdown转换成html来显示的，特别是web端的markdown编辑器，基本上主流的开源库比如marked都是这样实现的。下面我们自己来实现一个简单的markdown到html的解析器。

markdown标签

首先，我们来看看markdown常用的标签及语义，对应的html标签，如下所示：

markdown 标签 语义 html标签
# ~ ###### 标题 h1 ~ h6
*text* 斜体 em
**text** 加粗 strong
`text` 高亮 a
[text](href) 链接 a

markdown转html

实现思路：

  1. 写markdown标签的正则表达式和对应的html模板规则映射表
  2. 循环规则的正则进行正则匹配的字符串替换

实现代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const rules = [
  // header rules
  [/#{6}\s?([^\n]+)/g, "<h6>$1</h6>"],
  [/#{5}\s?([^\n]+)/g, "<h5>$1</h5>"],
  [/#{4}\s?([^\n]+)/g, "<h4>$1</h4>"],
  [/#{3}\s?([^\n]+)/g, "<h3>$1</h3>"],
  [/#{2}\s?([^\n]+)/g, "<h2>$1</h2>"],
  [/#{1}\s?([^\n]+)/g, "<h1>$1</h1>"],

  //bold, italics
  [/\*\*\s?([^\n]+)\*\*/g, "<strong>$1</strong>"],
  [/\*\s?([^\n]+)\*/g, "<em>$1</em>"],
  
  //links
  [
    /\[([^\]]+)\]\(([^)]+)\)/g,
    '<a href="$2">$1</a>',
  ],

  //highlights
  [
    /(`)(\s?[^\n,]+\s?)(`)/g,
    '<a style="background-color:grey;color:black;text-decoration: none;border-radius: 3px;padding:0 2px;">$2</a>',
  ],
]

function markdown2html(markdown = '') {
  let html = markdown;
  try {
    rules.forEach(([rule, template]) => {
      html = html.replace(rule, template);
    });
  } catch (error) {
    console.error('转换失败：', error);
  }
  return html;
}

console.log(markdown2html(`
# heading1
## heading2
### heading3
#### heading4
##### heading5
###### heading6

**strong**
*em*

[百度](https://www.baidu.com)

\`highlight\`
`));

联系我