实现MarkDown转换html

简易的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, " + "$2" + "\" />");//转换图片
           var trans2 = trans1.replace(/\[(.*)\]\((.+)\)/g, " + "$2" + " \" >" + "$1" + "") //转换超链接

上述代码实现图片和超链接的转换
使用正则表达式来匹配对应格式

转换完成之后就要把生成的新文件保存下来
但是因为安全性的问题无法在客户端使用JS直接写入本地文件(部分浏览器可以通过修改权限实现)
这里用下载的方式代替

添加一个标签来执行下载

<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来实现更全面的完整的转换功能

下面贴出完整代码


<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Titletitle>
    <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, " + "$2" + "\" />");//转换图片
            var trans2 = trans1.replace(/\[(.*)\]\((.+)\)/g, " + "$2" + " \" >" + "$1" + "") //转换超链接
            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转换已经完成

你可能感兴趣的:(语言入门练习)