「Javascript」解析markdown為html——特殊樣式篇

author: 陸柒

date: 2023-03

classification: 計算機 . javascript

tag: Javascript, 解析, markdown, html

1 前言

在記錄筆記或撰寫文章時，時常需要突出重點，讓自己和讀者關注到重要內容。在 markdown 和 html 中，常見的著重樣式有加粗，高亮，斜體。在我的個人博客中，為了更方便更完整地轉換格式，在轉換腳本中也加入了這方面的轉換。

---

2 格式分析

2.1 加粗

markdown：

**markdown加粗樣式**
__markdown加粗樣式__

html：

<strong>html加粗樣式</strong>

在 markdown 中加粗樣式雖然有兩種標記，但都是前后各兩個“ * ”或“ _ ”進行包裹，可以精確地對兩符號之間的內容渲染加粗樣式。對應于 html 則只需用 標簽包裹即可。

2.2 斜體

markdown：

*markdown斜體*
_markdown斜體_

html：

<em>html斜體</em>

markdown 語法很簡單，首尾各一個“ * ”或“ _ ”時表示斜體，兩個時表示加粗。對應于 html 的標簽。

2.3 高亮

markdown：

==markdown高亮樣式==

html：

<span style="background-color:yellow">html高亮</span>
<mark>html高亮</mark>

在 html 中兩種方式都有，但是直接使用 mark 標簽是專用來標記的標簽，使用更方便。

---

3 代碼

3.1 解析加粗樣式

function parseMdstrong(str) {
	var strong_text = str.match(/(\*\*|__)(.+?)(\*\*|__)/g);//匹配加粗文本，正則中(.+?)的？是為了避免過度匹配把多個加粗匹配成一個
	if (strong_text != null) {// 如果有這個樣式
		for (var i = 0; i < strong_text.length; i++) {
			str = str.replace(strong_text[i], "<strong>" + strong_text[i].match(/[^(**)^(__)]+/g)[0] + "</strong>");// 替換成 html 標簽
		}
	}
	return str;
}

3.2 解析斜體樣式

function parseMditalic(str) {
	var em_text = str.match(/(_|\*)(.+?)(_|\*)/g);//匹配斜體文本，同樣為了避免正則貪婪匹配
	if (em_text != null) {
		for (var i = 0; i < em_text.length; i++) {
			str = str.replace(em_text[i], "<em>" + em_text[i].match(/[^_^*]+/g)[0] + "</em>");// 替換成 html 標簽
		}
	}
	return str;
}

3.3 解析高亮樣式

function parseMdHighlight(str) {
	var highlight_text = str.match(/==(.+?)==/g);//正則匹配高亮文本
	if (highlight_text != null) {
		for (var i = 0; i < highlight_text.length; i++) {
			str = str.replace(highlight_text[i], "<mark>" + highlight_text[i].match(/[^(==)]+/g)[0] + "</mark>");// 替換成 html 標簽
		}
	}
	return str;
}

代碼中，運用了 match 函數進行正則表達式匹配出特定格式的文本，也運用該函數匹配出樣式標記包裹的文本。正則表達式測試工具在這里。

---

4 其他

「Javascript」解析markdown為html——引用篇
「Javascript」解析markdown為html——標題篇