[JavaScript知识库] 用JavaScript编写一个非常简单的Markdown解析器

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 用JavaScript编写一个非常简单的Markdown解析器 -> 正文阅读

[JavaScript知识库]用JavaScript编写一个非常简单的Markdown解析器

本文介绍一个非常简单的Markdown解析器，示例代码的文件目录结构如下：

.
├── css
│   └── style.css
├── main.html
└── script
    └── markdownparser.js

测试环境

Ubuntu 20.04
Chrome 95.0.4638.54
FireFox 93.0 (64 位)

1、main.html

<!DOCTYPE html>
<!--CSDN，繁星间漫步，陆巍的博客-->
<html lang="zh-cn">
<link rel="stylesheet" href="css/style.css">
<script src="script/markdownparser.js"></script>

<title>一个非常简单的Markdown解析器</title>

<div class="markdown-editor">
  <!--不要使用onchange来触发，因为onchange只在焦点离开textarea控件时才被触发。oninput会实时监听内容变化并触发。-->
  <textarea class="markdown-code" id="markdown-input" oninput="preview()"></textarea>
</div>

<div class="html-viewer">
  <div id="markdown-output"></div>
</div>

</html>

2、style.css

.markdown-code {
	height: 700px;
	width: 400px;
	margin: auto;
	float: left;
}
.html-viewer {
	height: 700px;
	width: 400px;
	margin: auto;
	border: 1px lightgray solid;
}

3、markdownparser.js

// CSDN，繁星间漫步，陆巍的博客

// @brief 解析转换markdown文本为html文本
// @param markdownText markdown文本
// @return 返回html文本
function parseMarkdown(markdownText) {
  var htmlText = markdownText
    .replace(/^- (.*$)\n/gim, '<li>$1</li>')// 简单的无序列表 -
    .replace(/^---\n/gm, '<hr />')// 水平线 ---
    .replace(/^##### (.*$)/gim, '<h5>$1</h5>')// 标题5 #####
    .replace(/^#### (.*$)/gim, '<h4>$1</h4>')// 标题4 ####
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')// 标题3 ###
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')// 标题2 ##
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')// 标题1 #
    .replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')// 长引用 >
    .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')// 加粗 **abc**
    .replace(/\*(.*)\*/gim, '<i>$1</i>')// 斜体 *abc*
    .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")// 图片 ![图片说明](图片地址)
    .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")// 超链接 [链接显示文字]（链接地址）
    .replace(/\n$/gim, '<br />')// 换行，把用户输入的换行用<br />来处理

  return htmlText;
}

// @brief 预览
function preview() {
  var editor = document.getElementById("markdown-input");
  var viewer = document.getElementById("markdown-output");

  viewer.innerHTML = parseMarkdown(editor.value);
}