js实现markdown转html

最新推荐文章于 2024-05-30 10:06:28 发布

兰_1999

最新推荐文章于 2024-05-30 10:06:28 发布

阅读量3.7k

点赞数 3

分类专栏：原创

本文链接：https://blog.csdn.net/weixin_43436925/article/details/87720871

版权

原创专栏收录该内容

14 篇文章 0 订阅

订阅专栏

《js实现markdown转html》

页面如下：

在这里插入图片描述

HTML:

<!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>mdToHtml</title>
    <link rel="stylesheet" href="mdToHtml.css">
</head>
<body>
    <div class="content">
        <div id='con1' class="div">MarkDown</div>
        <div id="con2" class="div">>>>></p>
            <div>
                <input type="file" name = "file" id = "fileId"> 
                <button  type = "submit" name = "btn" value = "提交" id = "btnId" onclick="check()" > 提交</button>
            </div>
        </div>
        <div id="con3" class="div">Html</div>
    </div>
   <script src="mdToHtml.js"></script> 
</body>
</html>

CSS:

.content{
    width:900px;
    height: 300px;
    margin: 250px auto;
}
.div{
    float: left;
    height: 100%;
    width: 33%;
    font-size: 50px;
    text-align: center;
    border: 1px solid black; 
}
#con1{
    background-color: aquamarine;
}
#con2{
    background-color: rebeccapurple;
}
#con3{
    background-color:khaki;
}
#btnId{
    width: 200px;
    height: 60px;
    font-size: 30px;
    border: 2px solid blue;
    border-radius: 10px;
}

JS:

思路分析：
1.xx.md格式文件的上传；
2.文件的内容转化；
3.xx.html格式文件的下载；

1.xx.md格式文件的上传:

function check() {
  button = document.getElementById("btnId");
  objFile = document.getElementById("fileId");
  if (objFile.value == "") {
    alert("不能空");
  }
  var files = objFile.files; //获取到文件列表
  console.log(files);
  if (files.length == 0) {
    alert("请选择文件");
  } else {
    valuePos = objFile.value; //存下此次提交的文件名
    var reader = new FileReader(); //新建一个FileReader
    reader.readAsText(files[0], "UTF-8"); //读取文件
    reader.onload = function(evt) {
      //读取完文件之后会回来这里
      fileString = evt.target.result; // 读取文件内容（全局）
      //设置定时器时刻检测是否用户未下载又重新提交一次不一样的文件；
      setInterval(function() {
        if (objFile.value !== valuePos) {
          button.innerHTML = "提交";
          button.onclick = function() {
            check();
            valuePos = objFile.value; //存下此次提交的文件名,
          };
        }
      }, 30);
      change();
    };
  }
}

2.文件的内容转化:

function change() {
  var nameReg = /\w+\./gi;
  name = valuePos.match(nameReg);
  result = [
    "<!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>"
  ].join("");
  result += name + "html" + "</title>";
  ///css
  result += "<style>div{width: 50%;margin: auto;}img{max-width:100%}</style>";
  var chImg = /(!\[[\S| ]+\])(\()([\S| ]+)(\))/gi;
  fileString = fileString.replace(chImg, '<img src="$3">'); //图片
  var chA = /(##\s+\[)([\S| ]+)(\]\()(\S+)\)/gi;
  fileString = fileString.replace(/#(?=\S+\))/g,'%23');//先将链接中的#转化为%23；
  fileString = fileString.replace(chA, '<h2><a href="$4">$2</a></h2>');//标题超链接
  fileString = fileString.replace(/(\[)([\S| ]+)(\]\()(\S+)\)/g, "<a href='$4'>$2</a>");//非标题超链接
  fileString = fileString.replace(/[\n|\r]+/g, "</br>");//空格
  result += "<body><div>";//div居中宽50%；
  result += fileString;
  result += "</div></body>";
  //布局收尾
  button.innerHTML = "下载HTML";
  button.onclick = function() {
    download();
  };
}

3.xx.html格式文件的下载:

function download() {
  var a = document.createElement("a");
  a.download = name + "html";
  result += "</html>";
  a.href = "data:text/txt;charset=utf-8," + result;
  a.textContent = "download";
  a.click();
  button = document.getElementById("btnId");
  button.innerHTML = "提交";
  button.onclick = function() {
    check();
  };
}

兰_1999

关注

3
点赞
踩
7

收藏

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

《js实现markdown转html》页面如下：HTML:&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;
复制链接

扫一扫

专栏目录