JavaScript+Node.js写一款markdown解析器
更新时间：2022年02月14日 09:54:09 作者：隐冬
这篇文章主要介绍了利用JavaScript和Node.js写一款markdown解析器，首先编写getHtml函数，传入markdown文本字符串，下面更多详细内容，需要的小伙伴可以参考一下
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);主要设计正则表达式和String.prototype.replace方法，replace接收的第一个参数可以是正则，第二个参数如果是函数那么返回值就是所替换的内容。
2. 处理图片&超链接
图片和超链接的语法很像，，[超链接](url)，使用正则匹配同时需要排除`。props会获取正则中的$，$1，$2。也就是匹配的字符整体，第一个括号内容，第二个括号内容。比如这里props[0]就是匹配到的完整内容，第四个参数props[3]是[]中的alt，第五个参数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匹配空格。如果匹配到内容，将文本props[3]放在blockquote标签返回就行了。
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. 处理标题
匹配必须以#开头，并且#的数量不能超过6，因为h6是最大的了，没有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. 处理字体
写的开始复杂了
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]是开头`的数量，props[5]是结尾`的数量，必须相等才生效。
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无序列表，写的同样很麻烦。主要我的思路是真复杂。而且bug肯定也不少。先匹配-+*加上空格，然后根据这一行前面的空格熟替换为ul。这样每一行都保证被ulli包裹。
第二步判断相邻ul之间相差的个数，如果相等则表示应该是同一个ul的li，替换掉</ul><ul>为空，如果后一个ul大于前一个ul，则表示后面有退格，新生成一个<ul>包裹退格后的li，如果是最后一个ul则补齐前面所有的</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);到此这篇关于JavaScript+Node.js写一款markdown解析器的文章就介绍到这了,更多相关写一款markdown解析器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Web开发领域,响应式设计已经成为一个不可或缺的趋势,PostCSS插件——postcss-pxtorem的出现为我们提供了一种更加智能和高效的解决方案,本文将深入探讨postcss-pxtorem的使用,包括其背后的原理、配置选项、实际应用中的注意事项等方面,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了JavaScript实现网页版的五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了javascript原型链学习记录之继承实现方式,结合实例形式分析了javascript使用原型链实现继承的相关操作技巧与注意事项,需要的朋友可以参考下2019-05-05
JavaScript延时效果比较不错的...2007-08-08
JavaScript中offsetWidth的bug及解决方法
这篇文章主要为大家详细介绍了JavaScript中offsetWidth的bug及解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
在上一篇文章里，我们设计了一套能在JavaScript中描述函数重载的方法，这套方法依赖于一个叫做Overload的静态类，现在我们就来看看如何实现这个静态类。2009-08-08
js获取通过window.location.search来获取页面传来的参数，经测试可用，大家可以学习下2014-09-09
有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志，有时候更是直接弹出错误无法继续浏览页面，这样对于网站的正规性与权威性发展不利。2010-04-04
下面小编就为大家带来一篇js遍历json的key和value的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
最新评论