Un analyseur simple pour convertir des documents markdown en documents html

Il s'agit de l'interface en cours d'exécution de cet analyseur. Les étapes sont les suivantes

• Cliquez sur sélectionner le fichier pour sélectionner
• Cliquez sur Lire le fichier pour télécharger le contenu du fichier danstextarea
• Cliquez sur Convertir pour convertir le markdownfichier formaté au htmlformat
• Cliquez ci-dessous pour télécharger en tant que fichier test.html à télécharger

Idées de production

Passez principalement textareala valuevaleur pour exploiter les documents de démarque

1. Sélectionnez d'abord le fichier et téléchargez le fichier vers textarea, le code spécifique est le suivant:

			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. Utilisez des expressions régulières pour changer le markdowntexte formaté en htmlformat, le code spécifique est le suivant:

                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. Une fois la conversion terminée, vous pouvez le télécharger directement, le code est le suivant (les commentaires sont entre les lignes):

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

Achevée