溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何使用JavaScript+Node.js寫一款markdown解析器，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
首先編寫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)容。
圖片和超鏈接的語法很像，，[超鏈接](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;
}這里使用\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];
}
});
}匹配必須以#開頭，并且#的數(shù)量不能超過6，因?yàn)閔7是最大的了，沒有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];
}
})
}寫的開始復(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;
}使用正則匹配使用`包裹的代碼塊，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;
}這里只是處理了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>');
}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;
}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);感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用JavaScript+Node.js寫一款markdown解析器”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼