最近打算寫一個支持markdown的的博客，就順便做一下百度的前端學(xué)院中對應(yīng)的任務(wù)。模仿了簡書markdown的樣式和功能……目前基本完成了任務(wù)，打算搭好服務(wù)器弄好圖片上傳等再完善。
先看要求：
完成效果：
目前存在的問題是markdown語法不能嵌套使用會有bug。
可以看出這個任務(wù)是練習(xí)使用正則表達(dá)式，之前只在表單驗證時使用過，所以如果有錯誤的地方歡迎指正，以免誤導(dǎo)更多人。
先引用簡書的文章介紹下markdown的部分語法：
標(biāo)題
這是最為常用的格式，在平時常用的的文本編輯器中大多是這樣實現(xiàn)的：輸入文本、選中文本、設(shè)置標(biāo)題格式。
而在 Markdown 中，你只需要在文本前面加上 # 即可，同理、你還可以增加二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題和六級標(biāo)題，總共六級，只需要增加 # 即可，標(biāo)題字號相應(yīng)降低。
# 一級標(biāo)題
## 二級標(biāo)題
### 三級標(biāo)題
#### 四級標(biāo)題
##### 五級標(biāo)題
###### 六級標(biāo)題
列表
列表格式也很常用，在 Markdown 中，你只需要在文字前面加上 - 就可以了，例如：
- 文本1
- 文本2
- 文本3
如果你希望有序列表，
也可以在文字前面加上 1. 2. 3. 就可以了，例如：
1. 文本1
2. 文本2
3. 文本3
注：-、1.和文本之間要保留一個字符的空格。
引用
在我們寫作的時候經(jīng)常需要引用他人的文字，這個時候引用這個格式就很有必要了，在 Markdown 中，你只需要在你希望引用的文字前面加上 > 就好了，例如：
一盞燈， 一片昏黃； 一簡書， 一杯淡茶。 守著那一份淡定， 品讀屬于自己的寂寞。 保持淡定， 才能欣賞到最美麗的風(fēng)景！ 保持淡定， 人生從此不再寂寞。
注：> 和文本之間要保留一個字符的空格。
需要引用代碼時，如果引用的語句只有一段，不分行，可以用 ` 將語句包起來。
如果引用的語句為多行，可以將```置于這段代碼的首行和末行。
簡書的markdown也有些小問題：可以直接輸入html標(biāo)簽，并且會被p抱起來，但是下方還有副本。空格只有一個生效(這個我也是)。它的回車也只能間隔一行，多個是無法起作用的，導(dǎo)致引用和引用之間沒有別的東西時會自動合并，因為簡書判斷應(yīng)用結(jié)束的標(biāo)志是連續(xù)兩個\n，類似的還有列表的判斷結(jié)束的方法。?_?
關(guān)于正則表達(dá)式：
30分鐘正則表達(dá)式
正則表達(dá)式匹配可視化
可以用來做匹配實驗
推薦一本書:精通正則表達(dá)式(適合深入）
方案：
左右兩欄：按照習(xí)慣：左邊輸入、右邊輸出。因為默認(rèn)會有標(biāo)題的，所以總的標(biāo)題可以單獨(dú)抽出來，和下面的文章分開，減少檢索文章時的總量、dom操作量。
<div class="left-wrapper">
<input type="text" id="titleInput" value="無標(biāo)題文章">
<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結(jié)構(gòu)就是這樣，給title的輸入加一個默認(rèn)選中，方便修改：
const titleInput = document.getElementById('titleInput');
titleInput.select();
想要左邊輸入，右邊預(yù)覽，就需要事件把輸入、預(yù)覽聯(lián)系起來：
看起來好像keypress更何時，可以連續(xù)觸發(fā)、又不包含一些不會輸出的鍵，但是實際上keypress對于中文輸入不會觸發(fā)，所以只能選擇keyup事件。對于事件不建議在html里直接寫上，這樣不符合html、js分離降低耦合的原則。簡易使用addEventListener來給dom節(jié)點(diǎn)添加對應(yīng)的事件，標(biāo)題和文章本身分別綁定對應(yīng)的事件即可。因為可能連續(xù)輸入，如果字?jǐn)?shù)、格式很多就會有大量操作，為了降低性能負(fù)擔(dān)，使用一個節(jié)流函數(shù)：
let throttle = (method) => {
method.tId && clearTimeout(method.tId);
method.tId = setTimeout(function () {
method();
}, 140);
};
方法第一次調(diào)用沒有影響，會添加一個定時器然后調(diào)用，第二次調(diào)用同一個方法時如果第一個方法還沒有觸發(fā)，就會清楚掉第一個定時器，再重新添加一個定時器，保證了同一個方法在一定時間內(nèi)只會執(zhí)行一次。定時的時間間隔越長性能越好，體驗越差……一般來說一次js執(zhí)行時間小于150ms體驗比較好。
titleInput.addEventListener('keyup', () => {
throttle(addTitle);
});
類似這樣綁定一個通過節(jié)流的方法，輸出的title非常簡單，因為是固定的h1只要動態(tài)的獲取輸入的title然后賦值給輸出的title就可以了。文章的輸入輸出也同樣，不過需要通過正則表達(dá)式，把對應(yīng)的符號換成html標(biāo)簽，通過標(biāo)簽來改變樣式。
第一部分關(guān)于標(biāo)題：
因為簡書的文章沒說#號后必須要有空格，所以我的標(biāo)題的定義就是行開頭的#。首先使用了一個寬泛的表達(dá)式來判斷(test方法)是否有行開頭的#或者行開頭任意空格后的#：
/^ *#{1,6}(( +[^\s]|[^#\s]).*)/gm
匹配在行開頭頭的任意空格加上1到6個#加上任意空格以及一個非空白符或者沒有空格任意一個非#的非空白符加上任意數(shù)量的非換行符。
如果test為true就執(zhí)行循環(huán)，將h1到h6都替換一遍：
//定義標(biāo)題循環(huán)次數(shù)
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中間的分組放到對應(yīng)的h標(biāo)簽內(nèi)就可以了。
第二部分關(guān)于列表：
判斷每行開頭或者是閉合的標(biāo)簽后-號后面加上一個空格加上一個非空白字符后面無所謂但是應(yīng)該是單行的：
//給符合格式的創(chuàng)建ul和li
const reg4 = /(^ *|<\/.+>) *- (\S.*)/gm;
//給符合格式的創(chuàng)建ol和li
const reg5 = /(^ *|\/.+>) *\d\. (\S.*)/gm;
因為js的正則不支持后瞻，判斷上文有沒有某物挺麻煩，所以我就給每個都li都加上了ul或者ol，在用一個正則把連著的/ul和ul標(biāo)簽或者/ol和ol標(biāo)簽給去掉，用這個正則replace為空即可:
//去掉多余的ul、ol
const reg6 = /<\/([uo]l)>\n? *<\1>/g;
這里使用了一個分組的的引用，保證第二個和第一個都是ul或者都是ol；
第三部分關(guān)于引用和代碼塊：
同樣也是每行的開頭或者閉合標(biāo)簽后，但是可以是多行的，和簡書一樣以空白的一行作為結(jié)束。內(nèi)容中的的每行肯定有一個非空白符字符一個可選的換行符其他無所謂所以,需要注意的是在html中>是用>表示的：
const reg7 = /(^ *|\/.+>) *> ((\S.*\n?)+)/gm;
單行代碼根據(jù)markdown語法只要匹配同一行的``及中間不能有換行和`即可：
const reg8 = /(^ *|\/.+>) *`([^`\n]+)`/gm;
代碼塊類似但是由于語法，可以看出出了上下語法標(biāo)志，中間每行必有換行，所以可以寫成任意字符加上換行重復(fù)任意次：
const reg9 = /~~~\n((.*\n)+)~~~/g;
