js实现简单的Markdown解析器

首先，解析文件需要先上传文件，这里使用Html5 js FileReader接口事件对选择的readme.md文件进行读取，然后通过文本框的属性将文件以文本的格式显示出来，部分代码如下。
(学习资源：https://www.cnblogs.com/access520/p/5672435.html)

var result=document.getElementById("result"); 
 var file=document.getElementById("file");
 //判断浏览器是否支持FileReader接口
 if(typeof FileReader == 'undefined'){  
result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; 
//使选择控件不可操作 
 file.setAttribute("disabled","disabled");
   }  
   function readAsText(){ 
   var file = document.getElementById("file").files[0]; 
   var reader = new FileReader(); 
    //将文件以文本形式读入页面  
     reader.readAsText(file);  
     reader.function(f){  
    var result=document.getElementById("result");   
       //显示文件  
      result.innerHTML=this.result; 
       }
    }

文件读取以后，使用JavaScript中的正则表达式语法对test.md文件中的图片以及链接等进行筛选和定位，并将其格式转化为html格式。转化图片和连接的部分代码如下。

  var img = str.match(/!\[.*\]\(.*\)/g);
        var re1 = /\(.*\)/;
        var re2 = /\[.*\]/;
        if (img) {
            for (i = 0, len = img.length; i < len; i++) {
                var url = img[i].match(re1)[0];
                var title = img[i].match(re2)[0];
                str = str.replace(img[i], '<img src=' + url.substring(1, url.length - 1) + ' alt=' + title.substring(1, title.length -1) + '>');
            }
        }


        var a = str.match(/\[.*\]\(.*\)/g);
        if (a) {
            for (i = 0, len = a.length; i < len; i++) {
                var url = a[i].match(re1)[0];
                var title = a[i].match(re2)[0];
                str = str.replace(a[i], '<a href=' + url.substring(1, url.length - 1)  + '>' + title.substring(1, title.length -1) + '</a>');
            }
        }

3.接着将文件以HTML的格式，借助Blob转换成二进制，然后，作为a元素的href属性，配合download属性，实现下载。
（https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/）

var eleTextarea = document.querySelector('textarea');
var eleButton = document.querySelector('input[type="button"]');

// 下载文件方法
var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

if ('download' in document.createElement('a')) {
    // 作为test.html文件下载
    eleButton.addEventListener('click', function () {
        funDownload(eleTextarea.value, 'test.html');    
    });
} else {
    eleButton.onclick = function () {
        alert('浏览器不支持');    
    };
}

4.最后附上一张效果图在这里插入图片描述

js实现简单的Markdown解析器

猜你喜欢