1.读取md文件,并且直接替换源文本中的连接为html格式
- 读取采取拖拽方式
- 可以读取多个md文件,但是能转换最后一次拖进去的,就当是查看文件大小了QAQ
- 直接上代码
var data, fileData, num = 0;
window.onload = function() {
var drag = document.getElementById("content");
drag.ondragover = function(ev) {
ev.preventDefault();
this.style.borderColor = "#000";
};
drag.ondragleave = function() {
this.style.borderColor = "#dcd0e8";
};
drag.ondrop = function(ev) {
this.style.borderColor = "#dcd0e8";
ev.preventDefault();
var files = ev.dataTransfer.files;
var len = files.length, i = 0;
var frag = document.createDocumentFragment();
var tr, size;
var file = event.dataTransfer.files[0];
var filename = files[i].name;
if (!filename.endsWith(".md")) {
alert("该文件不是有效的.md文件");
return false;
} else {
while (i < len) {
tr = document.createElement("tr");
size = Math.round((files[i].size * 100) / 1024) / 100 + "KB";
tr.innerHTML =
"<td>" + files[i].name + "</td><td>" + size + "</td><td>删除</td>";
frag.appendChild(tr);
i++;
num = i;
}
}
this.childNodes[1].childNodes[1].appendChild(frag);
var file = event.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = function() {
data = fileReader.result;
str = data;
var image = /(\!\[.+\]\()(.+)(\))/g;
var link = /(\[)(.+)(\]\()(.+)(\))/g;
var H = /(\#\#)(\s+)(.+)(\s)/g;
var newImg = str.replace(image, "<img src = '$2' />");
var newLink = newImg.replace(link, "<a href = '$4'>$2</a>");
var newH = newLink.replace(H, "<h2>$3</h2> <br />");
HTML(newH);
};
var tr = document.querySelectorAll("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].addEventListener("click", function(e) {
var tag = e.target;
while (tag.tagName !== "td") {
tag = tag.parentNode;
if (tag !== tr) { 判断父节点是不是tr,不是的话返回
tag = null;
break;
}
}
if (tag === null) {
this.remove();
}
});
}
};
};
2.其他的一些辅助函数
function fake_click(obj) {
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
obj.dispatchEvent(ev);
}
function export_raw(name, data) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
fake_click(save_link);
}
function HTML(data) {
var css =
"<style>div{width: 50%;margin: auto}img{max-width:100%}h2{position: relative;}h2::after{content: '';width: 100%;height: 1px;position: absolute;left: 0px;bottom: -20px;background-color: #dfdfdf;}</style>";
data =
"<!DOCTYPE html>" +
"<html lang='en'>" +
"<head>" +
"<meta charset='UTF-8'>" +
"<meta name='viewport' content='width=device-width, initial-scale=1.0'>" +
"<meta http-equiv='X-UA-Compatible' content='ie=edge'>" +
" <title>Document</title>" +
css +
"</head>" +
"<body>" +
"<div>" +
data +
"</div>" +
"</body>" +
"</html>";
fileData = data;
}
function star() {
if (num != 0) {
export_raw("test.html", fileData);
} else {
alert("请选择文件");
}
}
正则replace方法(jq)
var newStr = str4.replace( rec, newstr);
- $& 为正则选中的内容
- $1,$2,$3…$99 正则第n个子表达式选中的字符串
html和css文件不过多叙述
下崽连接