マークダウンドキュメントをhtmlドキュメントに変換するためのシンプルなパーサー

これは、このパーサーの実行中のインターフェイスです。手順は次のとおりです。

• [ファイルを選択]をクリックして選択します
• [ファイルの読み取り]をクリックして、ファイルの内容を以下にアップロードしますtextarea
• [変換]をクリックして、markdownフォーマットされたファイルをhtmlフォーマットに変換します
• test.htmlファイルとしてダウンロードするには、以下をクリックしてください

制作のアイデア

主textareaにvalue値を渡してマークダウンドキュメントを操作します

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('浏览器不支持');
				};
			}

コンプリート