实现MarkDown转换html

最新推荐文章于 2024-07-08 10:09:25 发布

Explosion_M

最新推荐文章于 2024-07-08 10:09:25 发布

阅读量1k

点赞数 4

分类专栏：语言入门练习文章标签：练习demo

本文链接：https://blog.csdn.net/weixin_44077128/article/details/87863637

版权

语言入门练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简易的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转换已经完成

Explosion_M

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现MarkDown转换html

简易的MarkDown转换Html这个demo侧重于方法探索所以细节处显得粗枝大叶，请不要在意。javascript实现:因为是直接操作文件，所以首先要获取文件。其中ActiveXObject只适用于IE所以不加考虑。我们使用H5的FileReader来进行文件的读取。首先上传文件&lt;input type="file" id="file" onchange="fileChange...
复制链接

扫一扫

专栏目录