一个简易的markdown文档转化为html文档的解析器

这是此解析器的运行界面，使用步骤为

• 点击选择文件进行选择
• 点击读取文件将文件内容上传到下面的textarea
• 点击转化将markdown格式的文件转化为html格式
• 点击下方作为test.html文件下载进行下载

制作思路

主要通过textarea的value值进行操作markdown文档

1.首先进行选择文件，将文件上传到textarea ，具体代码如下：

			var result=document.getElementById("result");  
            var file=document.getElementById("file");  
           
            function readAsText(){
    
      
                var file = document.getElementById("file").files[0];  
                var reader = new FileReader();  
                //将文件以文本形式读入页面  
                reader.readAsText(file);  
                reader.onload=function(f){
    
      
                var result=document.getElementById("result");  
                //显示文件  
                result.innerHTML=this.result;  
                }  
            }  

2.运用正则表达式将markdown格式的文本改为html格式，具体代码如下：

                var oBtn=document.getElementById('change');
                var result=document.getElementById("result");  
                var file=document.getElementById("file");  

                oBtn.onclick=function(){
    
    
                    if(result.value==''){
    
           //判断是否选择文件
                        alert('请选择文件！！');    
                    }else{
    
    
                        result.value=result.value.replace(/(!\[[\S| ]+\])(\()([\S| ]+)(\))/gi, '<img src="$3">');
                        result.value=result.value.replace(/(\[)([\S| ]+)(\]\()(\S+)\)/g, "<a href='$4'>$2</a>");
                    }
                }
            }

3.转化完成后就可以直接进行下载了，代码如下(注释在行间)：

// 下载文件方法
			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('浏览器不支持');
				};
			}

毕