自制md编译器

自制md编译器

本次项目是在家闲得无事，突发奇想做个md编译器。因为最近在学网页方面的知识点，而且也逐渐适应了所有文档用md语法来写。

废话不多说，直接上思路。md编译器的思路我觉得还是挺简单的，分为两部分：

• 界面部分，可以直接用html和css搞定。界面主要是用来书写md语法的界面，然后还有一个预览界面
• md语法部分，这一部分可以用js搞定，实现在线编译。这一部分主要是利用 正则表达式 将md语句翻译成html语句，然后html翻译部分就交给浏览器即可。

界面部分

这一部分比较简答， 而且每个人对于界面的定义都有所不同，我就简单说一下。直接上界面:

思路就是：左边一个textarea，用来当作书写md语法的界面。右边一个div用来预览结果。

md语法部分:

功能：

• 多级标题
• 链接
• 图片

后面会考虑增加无序（有序）列表，表格等功能。

思路：

动态获取textarea输入框的值，然后将值按行分隔，对每一行用正则表达式进行匹配，如果匹配得到就替换，匹配不到就直接按照原内容输出到展示界面。

下面是各个功能的实现：

多级标题

正则表达式如下：

var headline = /#{1,6} \S+/;

先通过此模式匹配字符串，将得到的字符串按照空格分隔，得到一个字符串数组 strs。strs[0]的长度就算多少级标题，strs[1]就算标题内容。完整代码如下：

var headline = /#{1,6} \S+/;
if(str = textline[i].match(headline) != null){
			//匹配六级标题
			var strs = textline[i].match(headline)[0].split(" ");
			const count = strs[0].length;
			const text = strs[1];
			h = '<h'+count+'>'+text+'</h'+count+'>'
			//console.log(strs);
			//console.log(h);
}

图片

正则表达式如下：

var img = /!\[\S*\]\(\S+\)/;  //需要转义符号\将 [ 进行转义

先通过此模式匹配字符串，将得到字符串按照 ]分割，得到一个字符串数组strs。将strs[0]中的字符!，[替换掉即是图片的alt，将strs[1]的字符(,)替换掉即是图片的链接。完整代码如下：

if(str = textline[i].match(img) != null){
			//匹配图片
			//console.log(textline[i].match(img)[0]);
			var strs = textline[i].match(img)[0].split("]"); //分隔
			var text = strs[0].replace('[','');
			text = text.replace('!','');  //替换字符！,[
			var link = strs[1].replace('(','');
			link = link.replace(')','');  //替换字符 (,)
			console.log(text);
			console.log(link);
			h = '<img alt="'+text+'" src="'+link+'">'
			console.log(h)
}

链接

正则表达式如下：

var anchor = /\[\S+\]\(\S+\)/;  //需要转义符号\将 [ 进行转义

思路与图片差不多， 我就不多累述。直接上代码：

if(str = textline[i].match(anchor) != null){
			//匹配链接
			console.log(textline[i].match(anchor)[0]);
			var strs = textline[i].match(anchor)[0].split("]");
			var text = strs[0].replace('[','');
			var link = strs[1].replace('(','');
			link = link.replace(')','');
			console.log(text);
			console.log(link);
			h = '<a href="'+link+'">'+text+' </a>'
			console.log(h);
}

完整代码链接如下：
https://gitee.com/Aer2/blog-post-storage/tree/master/JS项目/md编译器