js简单将markdown转换为html
思路
markdown⽂本和HTML最⼤的不同即为markdown的超链接和图⽚链接与HTML中表达不同，即将超链接和图⽚链接转换成功，⽣成新的⽂件即可简单转换成功。
那么问题来了，如何识别链接，并将其筛选出来并⽤HTML的标准来表述？
正则表⽰；js replace（）替换
var imgs = place(/\!(\[.*\])\((.+)\)/g,"</br><img src=\""+"$2"+"\" /></br>");
var links = place(/\[(.*)\]\((.+)\)/g,"<a href=\""+"$2"+" \" >"+"$1"+"</a></br>");
详解（含$1…解释）
好了，现在简单的变换已经ojbk了，下⾯我们要做的就是进⾏格式的更改，并且新建URL，进⾏下载
//新建BLOB，建⽴URL，可进⾏下载
//BLOB:1.使⽤ Blob 创建⼀个指向类型化数组的URL;
// 2.从 Blob 中提取数据；
var blob =new Blob([links],{ type:"text/plain;charest:utf-8"});
var download = ElementsByTagName("a")[0];
download.setAttribute("href", ateObjectURL(blob));
这⾥我们⽤到了blob，有链接解释：
这⾥对markdown⽂件向HTML的变换已经简单完成了，那么还有⼀个问题，我们对markdown的解析，如何将⽂件传输进去，即进⾏⽂件的选择。
下⾯介绍拖拽⽂件到指定区域进⾏选择的⽅法：
拖拽法选择⽂件
var box = document.querySelector('.box');
// (1)需要解决⼀旦拖拽外部⽂件就覆盖掉当前页⾯的问题
// 解决：给document绑定drop事件
// drop事件默认触发不了，需要在dragover事件⾥⾯阻⽌默认事件
e.preventDefault();
}
// 这个阻⽌默认事件是为了让drop事件得以触发
e.preventDefault();
}
// console.log(e);
// 得到拖拽过来的⽂件
var dataFile = e.dataTransfer.files[0];
// FileReader实例化
var fr =new FileReader();
// 异步读取⽂件
// 读取完毕之后执⾏
// 获取得到的结果
var data = fr.result;
//新建textarea
var text = ateElement('textarea');
text.value = data;
text.id ='text';
box.innerHTML ='';
//appendChild：在当前基础上插⼊元素
box.appendChild(text);
}
}
这⾥我们对markdown向HTML的变换已经简单做出来了，其实还有许多细节问题，⽐如对新的HTML的格式没有进⾏设置，对其内是否需要进⾏动画效果的加⼊等等修饰没有进⾏改变…
下⾯是整体代码
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>markdown-->html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.box {
width:60%;
height:100%;
position: absolute;
border: solid 1px;
text-align: center;
line-height:500px;
font-size:30px;
font-weight:700;
}
.box #text {
width:100%;
height:100%;
}
#btn1 {
position: fixed;
right:300px;
top:60%;
width:200px;
height:100px;
font-size:20px;
border: solid green;
color: white;
background: green;
}
#btn2 {
position: fixed;
right:300px;
top:40%;
width:200px;
height:100px;
font-size:20px;
border: solid red;
color: white;
background: red;
}
</style>
<script>
function$(id){
return typeof id ==='string'? ElementById(id): id;
}
//拖拽⽂件进⾏选择
//获取⽬标元素
var box = document.querySelector('.box');
var box = document.querySelector('.box');
// (1)需要解决⼀旦拖拽外部⽂件就覆盖掉当前页⾯的问题
/
/ 解决：给document绑定drop事件
// drop事件默认触发不了，需要在dragover事件⾥⾯阻⽌默认事件
e.preventDefault();
}
// 这个阻⽌默认事件是为了让drop事件得以触发
e.preventDefault();
}
// console.log(e);
/
/ 得到拖拽过来的⽂件
var dataFile = e.dataTransfer.files[0];
// FileReader实例化
var fr =new FileReader();
// 异步读取⽂件
// 读取完毕之后执⾏
// 获取得到的结果
var data = fr.result;
//新建textarea
var text = ateElement('textarea');
text.value = data;
text.id ='text';
box.innerHTML ='';
//appendChild：在当前基础上插⼊元素
box.appendChild(text);
}
$('btn2').onclick=function(){
//调⽤函数进⾏转换
sult);
alert("转换完成，可下载查看")
}
}
}
//封函数进⾏转换
//问题：转换得到的HTML布局混乱
function transform(file){
js 正则替换//对图⽚、超链接进⾏转化
//使⽤正则筛选图⽚及超链接
var imgs = place(/\!(\[.*\])\((.+)\)/g,"</br><img src=\""+"$2"+"\" /></br>");
var links = place(/\[(.*)\]\((.+)\)/g,"<a href=\""+"$2"+" \" >"+"$1"+"</a></br>");
//新建BLOB，建⽴URL，可进⾏下载
/
/BLOB:1.使⽤ Blob 创建⼀个指向类型化数组的URL;
// 2.从 Blob 中提取数据；
var blob =new Blob([links],{ type:"text/plain;charest:utf-8"});
var download = ElementsByTagName("a")[0];
download.setAttribute("href", ateObjectURL(blob));
}
</script>
<body>
<div class="box" id="box">拖拽外部md⽂件⾄此进⾏选择</div>
<a href="" download="test.html"><input type="button" id="btn1" value="下载html⽂件"/></a> <input type="button" id="btn2" value="markdown --> html"/>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论