1. 准备工作
首先编写getHtml
函数,传入markdown
文本字符串,这里使用fs
读取markdown
文件内容,返回值是转换过后的字符串。
const fs = require('fs');
const source = fs.readFileSync('./test.md', 'utf-8');
const getHtml = (source) => {
// 处理标题
return source;
}
const result = getHtml(source);
console.log(result);
复制代码
2. 处理图片&超链接
图片和超链接的语法很像,![图片](url)
,[超链接](url)
,使用正则匹配同时需要排除`。
const imageora = (source) => {
return source.replace(/(`?)(!?)\[(.*)\]\((.+)\)/gi, (...props) => {
switch (props[0].trim()[0]) {
case '!': return `<a href="${props[4]}" 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
匹配空格。
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. 处理标题
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. 处理字体
写的开始复杂了
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. 处理代码块
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
无序列表,写的同样很麻烦。
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. 调用方法
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);
复制代码
正则有点入门了,接着还是去看看开源的markdown解析器怎么实现的吧。
水一水,生活真快乐。