js实现简单的markdown解码

最新推荐文章于 2025-07-09 16:03:42 发布

蠢哭我喽

最新推荐文章于 2025-07-09 16:03:42 发布

阅读量2.2k

点赞数 9

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_39494664/article/details/87866109

本工具支持拖拽上传多个.md文件并自动转换为HTML格式，具备图片链接、超链接及二级标题转换功能，同时提供文件信息展示及删除选项，最终生成完整HTML页面并支持一键下载。

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

1.读取md文件，并且直接替换源文本中的连接为html格式

读取采取拖拽方式
可以读取多个md文件，但是能转换最后一次拖进去的，就当是查看文件大小了QAQ
直接上代码

var data, fileData, num = 0;
window.onload = function() {
  var drag = document.getElementById("content"); //目标区域
  drag.ondragover = function(ev) {
    ev.preventDefault(); //阻止浏览器默认打开文件
    this.style.borderColor = "#000";   //拖进时修改目标区域样式
  };
  drag.ondragleave = function() {
    this.style.borderColor = "#dcd0e8";   //拖离时修改目标区域样式
  };
  drag.ondrop = function(ev) {
    this.style.borderColor = "#dcd0e8";  //同上
    ev.preventDefault();   //阻止目标区域浏览器默认事件
    var files = ev.dataTransfer.files;   //获取拖入目标区域的文件
    var len = files.length, i = 0;  //获取文件个数
    var frag = document.createDocumentFragment();   //创建一个新的空白的文档片段
    var tr, size; 
    //拓展名判断
    var file = event.dataTransfer.files[0];
    var filename = files[i].name;
    if (!filename.endsWith(".md")) {   //文件拓展名不是.md时弹窗警告，不执行任何操作
      alert("该文件不是有效的.md文件");
      return false;
    } else {
      while (i < len) {   //拓展名验证通过，在目标区域创建文件的信息的表格
        tr = document.createElement("tr");
        size = Math.round((files[i].size * 100) / 1024) / 100 + "KB";
        tr.innerHTML =
          "<td>" + files[i].name + "</td><td>" + size + "</td><td>删除</td>";
        frag.appendChild(tr);
        i++;
        num = i；
      }
    }
    this.childNodes[1].childNodes[1].appendChild(frag);   //生成一个表格
    var file = event.dataTransfer.files[0];  //作用域问题再次创建
    var fileReader = new FileReader();  
    fileReader.readAsText(file);  //读取文件
    fileReader.onload = function() {
      data = fileReader.result;
      str = data;
      var image = /(\!\[.+\]\()(.+)(\))/g;  //此规则筛选图片链接
      var link = /(\[)(.+)(\]\()(.+)(\))/g;  //筛选超链接
      var H = /(\#\#)(\s+)(.+)(\s)/g;   //筛选二级标题
      var newImg = str.replace(image, "<img src = '$2' />"); 
      var newLink = newImg.replace(link, "<a href = '$4'>$2</a>"); 
      var newH = newLink.replace(H, "<h2>$3</h2> <br />");  //用jq方法替换
      HTML(newH);   //替换完成 执行此函数
    };
    //删除表格  运用事件委托,又bug 点哪都能删除，不一定要点删除
    var tr = document.querySelectorAll("tr");
    for (var i = 0; i < tr.length; i++) {
      tr[i].addEventListener("click", function(e) {
        //阻止冒泡
        var tag = e.target;
        while (tag.tagName !== "td") {
          tag = tag.parentNode;
          if (tag !== tr) {  判断父节点是不是tr，不是的话返回
            tag = null;
            break;
          }
        }
        if (tag === null) {
          this.remove(); //直接移除 tr
        }
      });
    }
  };
};

2.其他的一些辅助函数

1.模拟下载

function fake_click(obj) {
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  obj.dispatchEvent(ev);
}
function export_raw(name, data) {
  var urlObject = window.URL || window.webkitURL || window;
  var export_blob = new Blob([data]);
  var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  fake_click(save_link);
}

2.创建html格式

function HTML(data) {
  var css =
    "<style>div{width: 50%;margin: auto}img{max-width:100%}h2{position: relative;}h2::after{content: '';width: 100%;height: 1px;position: absolute;left: 0px;bottom: -20px;background-color: #dfdfdf;}</style>";
  data =
    "<!DOCTYPE html>" +
    "<html lang='en'>" +
    "<head>" +
    "<meta charset='UTF-8'>" +
    "<meta name='viewport' content='width=device-width, initial-scale=1.0'>" +
    "<meta http-equiv='X-UA-Compatible' content='ie=edge'>" +
    " <title>Document</title>" +
    css +
    "</head>" +
    "<body>" +
    "<div>" +
    data +
    "</div>" +
    "</body>" +
    "</html>";
  fileData = data;
}

3.触发下载

function star() {
  if (num != 0) {  //判断文件是否为空
    export_raw("test.html", fileData);   //触发下载
  } else {
    alert("请选择文件");
  }
}

正则replace方法（jq）

var newStr = str4.replace( rec, newstr);  //rec为正则表达式，后面一个参数是要替换的字符串（也可以还是函数）

$& 为正则选中的内容
$1,$2,$3…$99 正则第n个子表达式选中的字符串

html和css文件不过多叙述

下崽连接