简易的MarkDown转换Html
这个demo侧重于方法探索所以细节处显得粗枝大叶,请不要在意。
javascript实现:
因为是直接操作文件,所以首先要获取文件。
其中ActiveXObject只适用于IE所以不加考虑。
我们使用H5的FileReader来进行文件的读取。
首先上传文件
<input type="file" id="file" onchange="fileChange()">//上传文件
然后我们要获取上传的文件并读取,该步骤封装一个函数,上传时调用
function fileChange() {
var oMyFiles = document.getElementById("file");
var oMyFile = oMyFiles.files;//获取上传文件数组
var oFileReader = new FileReader();//实例化读取器
oFileReader.readAsText(oMyFile[0]);//读取文件
oFileReader.onload = function () {//执行转换函数
translate(this.result);//读取的文件保存在result属性中
}
}
接下来开始实现上面的代码最后出现的转换函数,转换文件格式
function translate(file) {
var trans1 = file.replace(/\!(\[.*\])\((.+)\)/g, "<img src=\"" + "$2" + "\" />");//转换图片
var trans2 = trans1.replace(/\[(.*)\]\((.+)\)/g, "<a href=\"" + "$2" + " \" >" + "$1" + "<a />") //转换超链接
上述代码实现图片和超链接的转换
使用正则表达式来匹配对应格式
转换完成之后就要把生成的新文件保存下来
但是因为安全性的问题无法在客户端使用JS直接写入本地文件(部分浏览器可以通过修改权限实现)
这里用下载的方式代替
添加一个<a>
标签来执行下载
<a href="" download="test.html">下载文件</a>
用js生成临时URL
var blob = new Blob([trans2], { type: "text/plain;charest:utf-8" });//实例化blob,存入要下载的内容
var oDowmload = document.getElementsByTagName("a")[0];
oDowmload.setAttribute("href", window.URL.createObjectURL(blob));//生成临时URL以执行下载
var oMark=document.getElementById("mark");
oMark.innerHTML="转换完成,点击下载";//提示可进行下载
}
点击下载即可,基本功能大致实现,可以自己写一个稍微能看的界面,或者添加JS来实现更全面的完整的转换功能
下面贴出完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
#content {
border: 1px solid red;
margin: 0 auto;
width: 400px;
height: 100px;
text-align: center;
line-height: 100px;
}
#function {
margin: 0 auto;
width: 400px;
}
#mark {
margin: 0 auto;
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
简易markdown文件解析器demo
</div>
<div id="mark">
待转换
</div>
<div id="function">
<input type="file" id="file" onchange="fileChange()">
<a href="" download="test.html">下载文件</a>
</div>
<script>
function fileChange() {
var oMyFiles = document.getElementById("file");
var oMyFile = oMyFiles.files;//获取上传文件数组
//console.log(oMyFile.name)
var oFileReader = new FileReader();//实例化读取器
oFileReader.readAsText(oMyFile[0]);
oFileReader.onload = function () {
translate(this.result);//执行转换
}
}
function translate(file) {
var trans1 = file.replace(/\!(\[.*\])\((.+)\)/g, "<img src=\"" + "$2" + "\" />");//转换图片
var trans2 = trans1.replace(/\[(.*)\]\((.+)\)/g, "<a href=\"" + "$2" + " \" >" + "$1" + "<a />") //转换超链接
var blob = new Blob([trans2], { type: "text/plain;charest:utf-8" });//实例化blob
var oDowmload = document.getElementsByTagName("a")[0];
oDowmload.setAttribute("href", window.URL.createObjectURL(blob));//生成临时URL以执行下载
var oMark=document.getElementById("mark");
oMark.innerHTML="转换完成,点击下载";
}
</script>
</body>
</html>
至此使用JS实现MarkDown转换已经完成