最近打算写一个支持markdown的的博客，就顺便做一下百度的前端学院中对应的任务。模仿了简书markdown的样式和功能……目前基本完成了任务，打算搭好服务器弄好图片上传等再完善。

先看要求：

任务要求

完成效果：

完成效果

目前存在的问题是markdown语法不能嵌套使用会有bug。

可以看出这个任务是练习使用正则表达式，之前只在表单验证时使用过，所以如果有错误的地方欢迎指正，以免误导更多人。

先引用简书的文章介绍下markdown的部分语法：

标题
这是最为常用的格式，在平时常用的的文本编辑器中大多是这样实现的：输入文本、选中文本、设置标题格式。
而在 Markdown 中，你只需要在文本前面加上 # 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 # 即可，标题字号相应降低。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
列表
列表格式也很常用，在 Markdown 中，你只需要在文字前面加上 - 就可以了，例如：
- 文本1
- 文本2
- 文本3
如果你希望有序列表，
也可以在文字前面加上 1. 2. 3. 就可以了，例如：
1. 文本1
2. 文本2
3. 文本3
注：-、1.和文本之间要保留一个字符的空格。
引用
在我们写作的时候经常需要引用他人的文字，这个时候引用这个格式就很有必要了，在 Markdown 中，你只需要在你希望引用的文字前面加上 > 就好了，例如：

一盏灯，一片昏黄；一简书，一杯淡茶。守着那一份淡定，品读属于自己的寂寞。保持淡定，才能欣赏到最美丽的风景！保持淡定，人生从此不再寂寞。
注：> 和文本之间要保留一个字符的空格。
需要引用代码时，如果引用的语句只有一段，不分行，可以用 ` 将语句包起来。
如果引用的语句为多行，可以将```置于这段代码的首行和末行。

简书的markdown也有些小问题：可以直接输入html标签，并且会被p抱起来，但是下方还有副本。空格只有一个生效(这个我也是)。它的回车也只能间隔一行，多个是无法起作用的，导致引用和引用之间没有别的东西时会自动合并，因为简书判断应用结束的标志是连续两个\n，类似的还有列表的判断结束的方法。ಠ_ಠ

关于正则表达式：

正则速查.png

30分钟正则表达式
 正则表达式匹配可视化
 可以用来做匹配实验
 推荐一本书:精通正则表达式(适合深入）

方案：

左右两栏：按照习惯：左边输入、右边输出。因为默认会有标题的，所以总的标题可以单独抽出来，和下面的文章分开，减少检索文章时的总量、dom操作量。

<div class="left-wrapper">
    <input type="text" id="titleInput" value="无标题文章">
    <ul class="tools"></ul>
    <textarea id="articleInput"></textarea>
</div>
<div class="right-wrapper">
    <div class="output">
        <h1 id="titleOutput"></h1>
        <div id="articleOutput"></div>
    </div>
</div>

大概dom结构就是这样，给title的输入加一个默认选中，方便修改：

const titleInput = document.getElementById('titleInput');
titleInput.select();

想要左边输入，右边预览，就需要事件把输入、预览联系起来：

键盘事件

看起来好像keypress更何时，可以连续触发、又不包含一些不会输出的键，但是实际上keypress对于中文输入不会触发，所以只能选择keyup事件。对于事件不建议在html里直接写上，这样不符合html、js分离降低耦合的原则。简易使用addEventListener来给dom节点添加对应的事件，标题和文章本身分别绑定对应的事件即可。因为可能连续输入，如果字数、格式很多就会有大量操作，为了降低性能负担，使用一个节流函数：

        let throttle = (method) => {
            method.tId && clearTimeout(method.tId);
            method.tId = setTimeout(function () {
                method();
            }, 140);
        };

方法第一次调用没有影响，会添加一个定时器然后调用，第二次调用同一个方法时如果第一个方法还没有触发，就会清楚掉第一个定时器，再重新添加一个定时器，保证了同一个方法在一定时间内只会执行一次。定时的时间间隔越长性能越好，体验越差……一般来说一次js执行时间小于150ms体验比较好。

        titleInput.addEventListener('keyup', () => {
            throttle(addTitle);
        });

类似这样绑定一个通过节流的方法，输出的title非常简单，因为是固定的h1只要动态的获取输入的title然后赋值给输出的title就可以了。文章的输入输出也同样，不过需要通过正则表达式，把对应的符号换成html标签，通过标签来改变样式。

第一部分关于标题：

因为简书的文章没说#号后必须要有空格，所以我的标题的定义就是行开头的#。首先使用了一个宽泛的表达式来判断(test方法)是否有行开头的#或者行开头任意空格后的#：

/^ *#{1,6}(( +[^\s]|[^#\s]).*)/gm

宽泛匹配标题

匹配在行开头头的任意空格加上1到6个#加上任意空格以及一个非空白符或者没有空格任意一个非#的非空白符加上任意数量的非换行符。

如果test为true就执行循环，将h1到h6都替换一遍：

//定义标题循环次数
const circles = 6;
for (let i = times; i > 0; i--) {
    reg3 = new RegExp(`^ *(#{${i}})(( +[^\s]|[^#\s]).*)(\n?)`, 'gm');
    articleOutput.innerHTML =articleOutput.innerHTML.replace(reg3, `<h${i}>$2</h${i}>`);
}

把符合具体格式的，#和\n中间的分组放到对应的h标签内就可以了。

第二部分关于列表：

判断每行开头或者是闭合的标签后-号后面加上一个空格加上一个非空白字符后面无所谓但是应该是单行的：

//给符合格式的创建ul和li
const reg4 = /(^ *|<\/.+>) *- (\S.*)/gm;
//给符合格式的创建ol和li
const reg5 = /(^ *|\/.+>) *\d\. (\S.*)/gm;

因为js的正则不支持后瞻，判断上文有没有某物挺麻烦，所以我就给每个都li都加上了ul或者ol，在用一个正则把连着的/ul和ul标签或者/ol和ol标签给去掉，用这个正则replace为空即可:

//去掉多余的ul、ol
const reg6 = /<\/([uo]l)>\n? *<\1>/g;

这里使用了一个分组的的引用，保证第二个和第一个都是ul或者都是ol；

第三部分关于引用和代码块：

同样也是每行的开头或者闭合标签后，但是可以是多行的，和简书一样以空白的一行作为结束。内容中的的每行肯定有一个非空白符字符一个可选的换行符其他无所谓所以,需要注意的是在html中>是用>表示的：

const reg7 = /(^ *|\/.+>) *&gt; ((\S.*\n?)+)/gm;

单行代码根据markdown语法只要匹配同一行的`及中间不能有换行和即可：

const reg8 = /(^ *|\/.+>) *`([^`\n]+)`/gm;

代码块类似但是由于语法，可以看出出了上下语法标志，中间每行必有换行，所以可以写成任意字符加上换行重复任意次：

const reg9 = /~~~\n((.*\n)+)~~~/g;

demo
代码

求点赞、关注、star，^_^