简单的Markdown编辑器
目的：
学习正则表达式、文件 IO 等相关内容，编写简易的 Markdown 解析器
具体要求：
编写程序，解析文件，将 Markdown 格式的图片和超链接转换成 HTML 格式。
首先，你需要使用正则表达式在文件中筛选定位到 Markdown 格式的图片和超链接。
然后，将图片和超链接的路径获取出来并转换为 HTML 格式。
转换完成之后，生成新的 HTML 文件，双击打开该 HTML 文件后，图片和超链接均可以在网页上得到显示
效果图：
动态操作
新生成的HTML文件效果图
参考链接：
1.https://www.cnblogs.com/hhhyaaon/p/5929492.html；
2. http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/;
3.https://taoyouyou.gitee.io/;
思路：
1.读取所选文件的内容
注意： 务必在HTML部分添加input标签类型设置为type=“file” ；
var file = document.getElementById('file').files[0]; //选择一个文件
oBtn1.onclick = function () {
var reader = new FileReader(); ////读取本地文件，以utf-8编码方式输出
reader.readAsText(file,'utf-8');
reader.onload = function () { // onload 回调函数是在异步请求加载完成后所执行的函数
var fileContent = reader.result; //为读取到的内容附一个变量
getFile.innerHTML = fileContent;
2.使用正则表达式在文件中筛选定位到 Markdown 格式的图片和超链接，创建新的元素，并使用HTML5中的blob生成URL 地址.
var imgLink = /!(\[.*\])\((.*)\)/gi; //markdown中图片对应的正则表达式
var hyperLink = /\[(.*)\]\((.*)\)/gi; //markdown中超链接对应的正则表达式
fileContent = fileContent.replace(imgLink, "<img src='$2' alt='picture'>"); //替换符合正则表达式的内容
fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
aftChange.innerHTML = fileContent;
// 下载文件方法, 借助HTML5 Blob实现文本信息文件下载
console.log(fileContent)
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);
};`
- 下载生成的test.md文件`
if ('download' in document.createElement('a')) {
// 作为test.html文件下载
oBtn3.addEventListener('click', function () {
alert(fileContent);
funDownload(fileContent, 'test.html');
});
} else {
oBtn3.onclick = function () {
alert('浏览器不支持');
};
}`
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>markdown!!!!!</title>
<style>
.position {
float: left;
width: 350px;
height: 500px;
}
#left {
margin-top: 100px;
margin-left: 100px;
}
#center {
margin-left: 200px;
margin-top: 100px;
}
#right {
margin-left: 100px;
margin-top: 200px;
}
pre {
color: blue;
font-size: 15px;
overflow: scroll;
}
.middle {
margin-top: 125px;
}
span {
color: tomato;
}
</style>
</head>
<body>
<div id="left" class="position">
<input type="file" id="file" />
<span>First:</span><input type="button" id="readfile" value="读取文件" />
<pre id="getfile">
var file = document.getElementById('file').files[0];
var oBtn1 = document.getElementById('readfile');
var oBtn2 = document.getElementById('change');
var oBtn3 = document.getElementById('download');
var getFile = document.getElementById('getfile');
var aftChange = document.getElementById('aftChange');
oBtn1.onclick = function () {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
var fileContent = this.result;
getFile.innerHTML = fileContent;
oBtn2.onclick;
oBtn3.onclick;
}
</pre>
</div>
<div id="center" class="position">
<span>Second:</span><input type="button" value="转换" id="change" class="middle" />
<pre id="aftChange">
oBtn2.onclick = function () {
console.log(fileContent);
var imgLink = /!(\[.*\])\((.*)\)/gi;
var hyperLink = /\[(.*)\]\((.*)\)/gi;
fileContent = fileContent.replace(imgLink, "<br/><img src='$2' alt='picture'><br/>"); //替换符合正则表达式的内容
fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
aftChange.innerHTML = fileContent;
console.log(getFile.innerHTML);
}
</pre>
</div>
<div id="right" class="position">
<span>Third:</span><input type="button" value="下载" id="download" class="middle" />
<pre>
oBtn3.onclick = function () {
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
funDownload(fileContent,'test.html');
}
</pre>
</div>
<script type="text/javascript">
window.onload = function () {
alert('参考链接：https://www.cnblogs.com/hhhyaaon/p/5929492.html；http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/;https://taoyouyou.gitee.io/');
var file = document.getElementById('file').files[0]; //选择一个文件
var oBtn1 = document.getElementById('readfile');
var oBtn2 = document.getElementById('change');
var oBtn3 = document.getElementById('download');
var getFile = document.getElementById('getfile');
var aftChange = document.getElementById('aftChange');
oBtn1.onclick = function () {
var reader = new FileReader(); ////读取本地文件，以utf-8编码方式输出
reader.readAsText(file,'utf-8');
reader.onload = function () { // onload 回调函数是在异步请求加载完成后所执行的函数
var fileContent = reader.result; //为读取到的内容附一个变量
getFile.innerHTML = fileContent;
oBtn2.onclick = function () {
console.log(fileContent);
var imgLink = /!(\[.*\])\((.*)\)/gi; //markdown中图片对应的正则表达式
var hyperLink = /\[(.*)\]\((.*)\)/gi; //markdown中超链接对应的正则表达式
fileContent = fileContent.replace(imgLink, "<img src='$2' alt='picture'>"); //替换符合正则表达式的内容
fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
aftChange.innerHTML = fileContent;
// 下载文件方法, 借助HTML5 Blob实现文本信息文件下载
console.log(fileContent)
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文件下载
oBtn3.addEventListener('click', function () {
alert(fileContent);
funDownload(fileContent, 'test.html');
});
} else {
oBtn3.onclick = function () {
alert('浏览器不支持');
};
}
}
}
}
}
</script>
</body>
</html>
能力有限，请多指教。当然别忘记点赞哦！！！！！！！！！！！！！
@看到这篇文章的所有人