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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43716048/article/details/87875744

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

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

在这里插入图片描述

制作思路

主要通过textareavalue值进行操作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('浏览器不支持');
				};
			}

展开阅读全文

没有更多推荐了,返回首页