- 首先,解析文件需要先上传文件,这里使用Html5 js FileReader接口事件对选择的readme.md文件进行读取,然后通过文本框的属性将文件以文本的格式显示出来,部分代码如下。
(学习资源:https://www.cnblogs.com/access520/p/5672435.html)
var result=document.getElementById("result");
var file=document.getElementById("file");
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
//使选择控件不可操作
file.setAttribute("disabled","disabled");
}
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;
}
}
- 文件读取以后,使用JavaScript中的正则表达式语法对test.md文件中的图片以及链接等进行筛选和定位,并将其格式转化为html格式。转化图片和连接的部分代码如下。
var img = str.match(/!\[.*\]\(.*\)/g);
var re1 = /\(.*\)/;
var re2 = /\[.*\]/;
if (img) {
for (i = 0, len = img.length; i < len; i++) {
var url = img[i].match(re1)[0];
var title = img[i].match(re2)[0];
str = str.replace(img[i], '<img src=' + url.substring(1, url.length - 1) + ' alt=' + title.substring(1, title.length -1) + '>');
}
}
var a = str.match(/\[.*\]\(.*\)/g);
if (a) {
for (i = 0, len = a.length; i < len; i++) {
var url = a[i].match(re1)[0];
var title = a[i].match(re2)[0];
str = str.replace(a[i], '<a href=' + url.substring(1, url.length - 1) + '>' + title.substring(1, title.length -1) + '</a>');
}
}
3.接着将文件以HTML的格式,借助Blob转换成二进制,然后,作为a元素的href属性,配合download属性,实现下载。
(https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/)
var eleTextarea = document.querySelector('textarea');
var eleButton = document.querySelector('input[type="button"]');
// 下载文件方法
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('浏览器不支持');
};
}
4.最后附上一张效果图