简单的makedown编译器

发表于 | 分类于 |
| 字数统计: 1.5k | 阅读时长 ≈ 7

目的：

学习正则表达式、文件 IO 等相关内容，编写简易的 Markdown 解析器

具体要求：

编写程序，解析文件，将 Markdown 格式的图片和超链接转换成 HTML 格式。

首先，你需要使用正则表达式在文件中筛选定位到 Markdown 格式的图片和超链接。

然后，将图片和超链接的路径获取出来并转换为 HTML 格式。

转换完成之后，生成新的 HTML 文件，双击打开该 HTML 文件后，图片和超链接均可以在网页上得到显示

效果图：

动态操作
在这里插动图入图片描述

新生成的HTML文件效果图
在这里插入图片描述

参考链接：

1.https://www.cnblogs.com/hhhyaaon/p/5929492.html；
2. http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/;
3.https://taoyouyou.gitee.io/;

思路：

1.读取所选文件的内容
注意： 务必在HTML部分添加input标签类型设置为type=“file” ；

1
2
3
4
5
6
7
var file = document.getElementById('file').files[0];  //选择一个文件
           oBtn1.onclick = function () {
               var reader = new FileReader();     ////读取本地文件，以utf-8编码方式输出
               reader.readAsText(file,'utf-8');
               reader.onload = function () {     // onload 回调函数是在异步请求加载完成后所执行的函数
                   var fileContent = reader.result;   //为读取到的内容附一个变量
                   getFile.innerHTML = fileContent;

2.使用正则表达式在文件中筛选定位到 Markdown 格式的图片和超链接，创建新的元素，并使用HTML5中的blob生成URL 地址.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imgLink = /!(\[.*\])\((.*)\)/gi;    //markdown中图片对应的正则表达式
var hyperLink = /\[(.*)\]\((.*)\)/gi;   //markdown中超链接对应的正则表达式
fileContent = fileContent.replace(imgLink, "<img src='$2' alt='picture'>");     //替换符合正则表达式的内容      
fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
aftChange.innerHTML = fileContent;
// 下载文件方法, 借助HTML5 Blob实现文本信息文件下载
console.log(fileContent)
var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};`
  1. 下载生成的test.md文件`
1
2
3
4
5
6
7
8
9
10
11
if ('download' in document.createElement('a')) {
                            // 作为test.html文件下载
                            oBtn3.addEventListener('click', function () {
                                alert(fileContent);
                                funDownload(fileContent, 'test.html');
                            });
                        } else {
                            oBtn3.onclick = function () {
                                alert('浏览器不支持');
                            };
                        }`

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>markdown!!!!!</title>
    <style>
        .position {
            float: left;
            width: 350px;
            height: 500px;
        }

        #left {
            margin-top: 100px;
            margin-left: 100px;
        }

        #center {
            margin-left: 200px;
            margin-top: 100px;
        }

        #right {
            margin-left: 100px;
            margin-top: 200px;
        }

        pre {
            color: blue;
            font-size: 15px;
            overflow: scroll;
        }

        .middle {
            margin-top: 125px;
        }

        span {
            color: tomato;
        }
    </style>
</head>

<body>
    <div id="left" class="position">
        <input type="file" id="file" />
        <span>First:</span><input type="button" id="readfile" value="读取文件" />
        <pre id="getfile">
var file = document.getElementById('file').files[0];
var oBtn1 = document.getElementById('readfile');
var oBtn2 = document.getElementById('change');
var oBtn3 = document.getElementById('download');
var getFile = document.getElementById('getfile');
var aftChange = document.getElementById('aftChange');
oBtn1.onclick = function () {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
var fileContent = this.result;
getFile.innerHTML = fileContent;
oBtn2.onclick;
oBtn3.onclick;
}
        </pre>
    </div>
    <div id="center" class="position">
        <span>Second:</span><input type="button" value="转换" id="change" class="middle" />
        <pre id="aftChange">
oBtn2.onclick = function () {
console.log(fileContent);
var imgLink = /!(\[.*\])\((.*)\)/gi;   
var hyperLink = /\[(.*)\]\((.*)\)/gi;
fileContent = fileContent.replace(imgLink, "<br/><img src='$2' alt='picture'><br/>");     //替换符合正则表达式的内容      
fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
aftChange.innerHTML = fileContent;
console.log(getFile.innerHTML);
}            
        </pre>
    </div>
    <div id="right" class="position">
        <span>Third:</span><input type="button" value="下载" id="download" class="middle" />
        <pre>
oBtn3.onclick = function () {            
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
funDownload(fileContent,'test.html');
}        
        </pre>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            alert('参考链接：https://www.cnblogs.com/hhhyaaon/p/5929492.html；http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/;https://taoyouyou.gitee.io/');
            var file = document.getElementById('file').files[0];  //选择一个文件
            var oBtn1 = document.getElementById('readfile');
            var oBtn2 = document.getElementById('change');
            var oBtn3 = document.getElementById('download');
            var getFile = document.getElementById('getfile');
            var aftChange = document.getElementById('aftChange');
            oBtn1.onclick = function () {
                var reader = new FileReader();     ////读取本地文件，以utf-8编码方式输出
                reader.readAsText(file,'utf-8');
                reader.onload = function () {     // onload 回调函数是在异步请求加载完成后所执行的函数
                    var fileContent = reader.result;   //为读取到的内容附一个变量
                    getFile.innerHTML = fileContent;
                    oBtn2.onclick = function () {
                        console.log(fileContent);
                        var imgLink = /!(\[.*\])\((.*)\)/gi;    //markdown中图片对应的正则表达式
                        var hyperLink = /\[(.*)\]\((.*)\)/gi;   //markdown中超链接对应的正则表达式
                        fileContent = fileContent.replace(imgLink, "<img src='$2' alt='picture'>");     //替换符合正则表达式的内容      
                        fileContent = fileContent.replace(hyperLink, "<h2><a herf ='$2' target = '_blank'>$1</a></h2>");
                        aftChange.innerHTML = fileContent;
                        // 下载文件方法, 借助HTML5 Blob实现文本信息文件下载
                        console.log(fileContent)
                        var funDownload = function (content, filename) {
                            var eleLink = document.createElement('a');
                            eleLink.download = filename;
                            eleLink.style.display = 'none';
                            // 字符内容转变成blob地址
                            var blob = new Blob([content]);
                            eleLink.href = URL.createObjectURL(blob);
                            // 触发点击
                            document.body.appendChild(eleLink);
                            eleLink.click();
                            // 然后移除
                            document.body.removeChild(eleLink);
                        };
                        if ('download' in document.createElement('a')) {
                            // 作为test.html文件下载
                            oBtn3.addEventListener('click', function () {
                                alert(fileContent);
                                funDownload(fileContent, 'test.html');
                            });
                        } else {
                            oBtn3.onclick = function () {
                                alert('浏览器不支持');
                            };
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>

能力有限，请多指教。当然别忘记点赞哦！！！！！！！！！！！！！
@看到这篇文章的所有人

100px

-------------本文结束感谢您的阅读-------------