JavaScript+Node.js寫一款markdown解析器
更新時(shí)間：2022年02月14日 09:54:09 作者：隱冬?
這篇文章主要介紹了利用JavaScript和Node.js寫一款markdown解析器，首先編寫getHtml函數(shù)，傳入markdown文本字符串，下面更多詳細(xì)內(nèi)容，需要的小伙伴可以參考一下
1. 準(zhǔn)備工作
首先編寫getHtml函數(shù)，傳入markdown文本字符串，這里使用fs讀取markdown文件內(nèi)容，返回值是轉(zhuǎn)換過后的字符串。
const fs = require('fs');
const source = fs.readFileSync('./test.md', 'utf-8');
const getHtml = (source) => {
? ? // 處理標(biāo)題
? ? return source;
}
const result = getHtml(source);
console.log(result);主要設(shè)計(jì)正則表達(dá)式和String.prototype.replace方法，replace接收的第一個(gè)參數(shù)可以是正則，第二個(gè)參數(shù)如果是函數(shù)那么返回值就是所替換的內(nèi)容。
2. 處理圖片&超鏈接
圖片和超鏈接的語法很像，，[超鏈接](url)，使用正則匹配同時(shí)需要排除`。props會(huì)獲取正則中的$，$1，$2。也就是匹配的字符整體，第一個(gè)括號(hào)內(nèi)容，第二個(gè)括號(hào)內(nèi)容。比如這里props[0]就是匹配到的完整內(nèi)容，第四個(gè)參數(shù)props[3]是[]中的alt，第五個(gè)參數(shù)props[4]是鏈接地址。
const imageora = (source) => {
? ? return source.replace(/(`?)(!?)\[(.*)\]\((.+)\)/gi, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '!': return `<a href="${props[4]}" rel="external nofollow" alt="${props[3]}">${props[3]}</a>`;
? ? ? ? ? ? case '[': return `<img src="${props[4]}" alt="${props[3]}"/>`;
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? });
}
const getHtml = (source) => {
? ? source = imageora(source);
? ? return source;
}3. 處理blockquote
這里使用\x20匹配空格。如果匹配到內(nèi)容，將文本props[3]放在blockquote標(biāo)簽返回就行了。
const block = (source) => {
? ? return source.replace(/(.*)(`?)\>\x20+(.+)/gi, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '>': return `<blockquote>${props[3]}</blockquote>`;
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? });
}4. 處理標(biāo)題
匹配必須以#開頭，并且#的數(shù)量不能超過6，因?yàn)閔6是最大的了，沒有h7，最后props[2]是#后跟隨的文本。
const formatTitle = (source) => {
? ? return source.replace(/(.*#+)\x20?(.*)/g, (...props) => {
? ? ? ? switch (props[0][0]) {
? ? ? ? ? ? case '#': if (props[1].length <= 6) {
? ? ? ? ? ? ? ? return `<h${props[1].length}>${props[2].trim()}</h${props[1].length}>`;
? ? ? ? ? ? };
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? })
}5. 處理字體
寫的開始復(fù)雜了
const formatFont = (source) => {
? ? // 處理 ~ 包裹的文本
? ? source = source.replace(/([`\\]*\~{2})(.*?)\~{2}/g, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '~': return `<del>${props[2]}</del>`;;
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? });
? ? // 處理 * - 表示的換行
? ? source = source.replace(/([`\\]*)[* -]{3,}\n/g, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '*': ;
? ? ? ? ? ? case '-': return `<hr />`;
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? })
? ? // 處理***表示的加粗或者傾斜。
? ? source = source.replace(/([`\\]*\*{1,3})(.*?)(\*{1,3})/g, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '*': if (props[1] === props[3]) {
? ? ? ? ? ? ? ? if (props[1].length === 1) {
? ? ? ? ? ? ? ? ? ? return `<em>${props[2]}</em>`;;
? ? ? ? ? ? ? ? } else if (props[1].length === 2) {
? ? ? ? ? ? ? ? ? ? return `<strong>${props[2]}</strong>`;;
? ? ? ? ? ? ? ? } else if (props[1].length === 3) {
? ? ? ? ? ? ? ? ? ? return `<strong><em>${props[2]}</em></strong>`;;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? });
? ? return source;
}6. 處理代碼塊
使用正則匹配使用`包裹的代碼塊，props[1]是開頭`的數(shù)量，props[5]是結(jié)尾`的數(shù)量，必須相等才生效。
const pre = (source) => {
? ? source = source.replace(/([\\`]+)(\w+(\n))?([^!`]*?)(`+)/g, (...props) => {
? ? ? ? switch (props[0].trim()[0]) {
? ? ? ? ? ? case '`': if (props[1] === props[5]) {
? ? ? ? ? ? ? ? return `<pre>${props[3] || ''}${props[4]}</pre>`;
? ? ? ? ? ? };
? ? ? ? ? ? default: return props[0];
? ? ? ? }
? ? });
? ? return source;
}7. 處理列表
這里只是處理了ul無序列表，寫的同樣很麻煩。主要我的思路是真復(fù)雜。而且bug肯定也不少。先匹配-+*加上空格，然后根據(jù)這一行前面的空格熟替換為ul。這樣每一行都保證被ulli包裹。
第二步判斷相鄰ul之間相差的個(gè)數(shù)，如果相等則表示應(yīng)該是同一個(gè)ul的li，替換掉</ul><ul>為空，如果后一個(gè)ul大于前一個(gè)ul，則表示后面有退格，新生成一個(gè)<ul>包裹退格后的li，如果是最后一個(gè)ul則補(bǔ)齊前面所有的</ul>。
const list = (source) => {
? ? source = source.replace(/.*?[\x20\t]*([\-\+\*]{1})\x20(.*)/g, (...props) => {
? ? ? ? if (/^[\t\x20\-\+\*]/.test(props[0])) {
? ? ? ? ? ? return props[0].replace(/([\t\x20]*)[\-\+\*]\x20(.*)/g, (...props) => {
? ? ? ? ? ? ? ? const len = props[1].length || '';
? ? ? ? ? ? ? ? return `<ul${len}><li>${props[2]}</li></ul${len}>`;
? ? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? ? return props[0];
? ? ? ? }
? ? });
? ? const set = new Set();
? ? source = source.replace(/<\/ul(\d*)>(\n<ul(\d*)>)?/g, (...props) => {
? ? ? ? set.add(props[1]);
? ? ? ? if (props[1] == props[3]) {
? ? ? ? ? ? return '';
? ? ? ? } else if (props[1] < props[3]) {
? ? ? ? ? ? return '<ul>';
? ? ? ? } else {
? ? ? ? ? ? const arr = [...set];
? ? ? ? ? ? const end = arr.indexOf(props[1]);
? ? ? ? ? ? let start = arr.indexOf(props[3]);
? ? ? ? ? ? if (start > 0) {
? ? ? ? ? ? ? ? return '</ul>'.repeat(end - start);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return '</ul>'.repeat(end + 1);
? ? ? ? ? ? } ? ? ? ? ? ?
? ? ? ? }
? ? });
? ? return source.replace(/<(\/?)ul(\d*)>/g, '<$1ul>');
}8. 處理表格
const table = (source) => {
? ? source = source.replace(/\|.*\|\n\|\s*-+\s*\|.*\|\n/g, (...props) => {
? ? ? ? let str = '<table><tr>';
? ? ? ? const data = props[0].split(/\n/)[0].split('|');
? ? ? ? for (let i = 1; i < data.length - 1; i++) {
? ? ? ? ? ? str += `<th>${data[i].trim()}</th>`
? ? ? ? }
? ? ? ? str += '<tr></table>';
? ? ? ? return str;
? ? });
? ? return formatTd(source);
}
const formatTd = (source) => {
? ? source = source.replace(/<\/table>\|.*\|\n/g, (...props) => {
? ? ? ? let str = '<tr>';
? ? ? ? const data = props[0].split('|');
? ? ? ? for (let i = 1; i < data.length - 1; i++) {
? ? ? ? ? ? str += `<td>${data[i].trim()}</td>`
? ? ? ? }
? ? ? ? str += '<tr></table>';
? ? ? ? return str;
? ? });
? ? if (source.includes('</table>|')) {
? ? ? ? return formatTd(source);
? ? }
? ? return source;
}9. 調(diào)用方法
const getHtml = (source) => {
? ? source = imageora(source);
? ? source = block(source);
? ? source = formatTitle(source);
? ? source = formatFont(source);
? ? source = pre(source);
? ? source = list(source);
? ? source = table(source);
? ? return source;
}
const result = getHtml(source);
console.log(result);到此這篇關(guān)于JavaScript+Node.js寫一款markdown解析器的文章就介紹到這了,更多相關(guān)寫一款markdown解析器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Express代理轉(zhuǎn)發(fā)服務(wù)器實(shí)現(xiàn)
這篇文章主要為大家介紹了Express代理轉(zhuǎn)發(fā)服務(wù)器實(shí)現(xiàn)技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
js合并兩個(gè)數(shù)組生成合并后的key：value數(shù)組
這篇文章主要是介紹了js將兩個(gè)數(shù)組合并為類json方式,需要的朋友可以參考下2018-05-05
JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類,實(shí)例分析了javascript通過cookie實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
利用js實(shí)現(xiàn)前臺(tái)動(dòng)態(tài)添加文本框,后臺(tái)獲取文本框內(nèi)容(示例代碼)
這篇文章主要是對(duì)利用js實(shí)現(xiàn)前臺(tái)動(dòng)態(tài)添加文本框,后臺(tái)獲取文本框內(nèi)容的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了swtich／if...else的替代語句的相關(guān)資料,需要的朋友可以參考下2015-08-08
如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫效果
這篇文章主要介紹了如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫效果,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用ImageMagick進(jìn)行圖片縮放、合成與裁剪(js+python)
由于需要在服務(wù)器端處理，使用就研究使用imagemagick來進(jìn)行。同時(shí)準(zhǔn)備封裝了一個(gè)Node.js和Python的方法，主要還是講一下然后使用imagemagick來對(duì)圖片進(jìn)行縮放、合成后進(jìn)行裁剪吧2013-09-09
基于JavaScript 性能優(yōu)化技巧心得(分享)
下面小編就為大家分享一篇基于JavaScript 性能優(yōu)化技巧心得，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
window對(duì)象的alert和confirm標(biāo)準(zhǔn)方法在不同瀏覽器的顯示效果不太相同，有個(gè)相同點(diǎn)是都不是很美觀。本文對(duì)此解決方法進(jìn)行介紹：使用js和css分別仿照它們，提供另一套函數(shù)，使在不同瀏覽器的有著相同的體驗(yàn)效果。下面就跟小編一起來看下吧2016-12-12
JS信息收集代碼研究(獲取客戶端的瀏覽器、cpu等軟硬件信息)
聽朋友說，這段JavaScript信息收集代碼主要用于收集IP......等等什么的，用來研究,需要的朋友可以參考一下2023-06-06