最近打算寫一個支持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;
