js简单将markdown转换为html

infBrain

已于 2022-07-13 09:47:00 修改

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：新手学徒文章标签： js web

于 2019-02-22 19:35:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44244646/article/details/87884490

新手学徒专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现Markdown文本转换为HTML的方法，通过正则表达式筛选并转换超链接和图片链接，利用FileReader读取文件内容，最终通过Blob创建可下载的HTML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

markdown文本和HTML最大的不同即为markdown的超链接和图片链接与HTML中表达不同，即将超链接和图片链接转换成功，生成新的文件即可简单转换成功。
那么问题来了，如何识别链接，并将其筛选出来并用HTML的标准来表述？

正则表示；js replace（）替换

 var imgs = file.replace(/\!(\[.*\])\((.+)\)/g, "</br><img src=\"" + "$2" + "\" /></br>");
var links = imgs.replace(/\[(.*)\]\((.+)\)/g, "<a href=\"" + "$2" + " \" >" + "$1" + "</a></br>");

replace()详解（含$1…解释）
好了，现在简单的变换已经ok了，下面我们要做的就是进行格式的更改，并且新建URL，进行下载

//新建BLOB，建立URL，可进行下载
//BLOB:1.使用 Blob 创建一个指向类型化数组的URL;
//      2.从 Blob 中提取数据；
var blob = new Blob([links], { type: "text/plain;charest:utf-8" });
var download = document.getElementsByTagName("a")[0];
download.setAttribute("href", window.URL.createObjectURL(blob));

这里我们用到了blob，有链接解释：BLOB
这里对markdown文件向HTML的变换已经简单完成了，那么还有一个问题，我们对markdown的解析，如何将文件传输进去，即进行文件的选择。
下面介绍拖拽文件到指定区域进行选择的方法：

拖拽法选择文件

var box = document.querySelector('.box');
        // (1)需要解决一旦拖拽外部文件就覆盖掉当前页面的问题
        //  解决：给document绑定drop事件 
        //  drop事件默认触发不了，需要在dragover事件里面阻止默认事件
        document.ondrop = function (e) {
            e.preventDefault();
        }
        // 这个阻止默认事件是为了让drop事件得以触发
        document.ondragover = function (e) {
            e.preventDefault();
        }
        box.ondrop = function (e) {
            // console.log(e);
            // 得到拖拽过来的文件
            var dataFile = e.dataTransfer.files[0];
            // FileReader实例化
            var fr = new FileReader();
            // 异步读取文件
            fr.readAsText(dataFile);
            // 读取完毕之后执行
            fr.onload = function () {
                // 获取得到的结果
                var data = fr.result;
                //新建textarea
                var text = document.createElement('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' ? document.getElementById(id) : id;
    }
    window.onload = function () {
        //拖拽文件进行选择

        //获取目标元素
        var box = document.querySelector('.box');
        // (1)需要解决一旦拖拽外部文件就覆盖掉当前页面的问题
        //  解决：给document绑定drop事件 
        //  drop事件默认触发不了，需要在dragover事件里面阻止默认事件
        document.ondrop = function (e) {
            e.preventDefault();
        }
        // 这个阻止默认事件是为了让drop事件得以触发
        document.ondragover = function (e) {
            e.preventDefault();
        }
        box.ondrop = function (e) {
            // console.log(e);
            // 得到拖拽过来的文件
            var dataFile = e.dataTransfer.files[0];
            // FileReader实例化
            var fr = new FileReader();
            // 异步读取文件
            fr.readAsText(dataFile);
            // 读取完毕之后执行
            fr.onload = function () {
                // 获取得到的结果
                var data = fr.result;
                //新建textarea
                var text = document.createElement('textarea');
                text.value = data;
                text.id = 'text';
                box.innerHTML = '';
                //appendChild:在当前基础上插入元素
                box.appendChild(text);
            }
            $('btn2').onclick = function () {
                //调用函数进行转换
                transform(fr.result);
                alert("转换完成，可下载查看")
            }
        }
    }

    //封函数进行转换
    //问题：转换得到的HTML布局混乱
    function transform(file) {
        //对图片、超链接进行转化
        //使用正则筛选图片及超链接
        var imgs = file.replace(/\!(\[.*\])\((.+)\)/g, "</br><img src=\"" + "$2" + "\" /></br>");
        var links = imgs.replace(/\[(.*)\]\((.+)\)/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 = document.getElementsByTagName("a")[0];
        download.setAttribute("href", window.URL.createObjectURL(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>