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

author: 陸柒

date: 2023-03-20

classification: 計算機 . javascript

tag: Javascript, 解析, markdown, html, 格式轉換, 目錄跳轉

1 前言

在 markodwn 解析中，標題是最簡單的格式之一。簡單到只需要將 “#” 符號去掉，換之 html 的標題標簽即可。

---

2 格式分析

2.1 markdown

在 markdown 中，一條標題的格式為：

# title1
## title1.1
### title1.1.1

由此可見 markdown 中標題的格式：一方面， “#” 的個數(shù)代表了標題的級數(shù)，其中一級標題比較大，與正文字體差距較大，比較適合作為文章標題，二極標題則適合作為章節(jié)標題，三級標題適合作小節(jié)標題……以上只是我在記錄筆記時的個人風格，如何使用完全看個人。

另一方面， “#” 標記與標題內容之間用空格分隔，這便給了解析以便利性。于是便有兩種方法來得到對應的標題級數(shù)：

1. 數(shù) “#” 符號的個數(shù)，
2. 獲取第一個空格的下標。

相對來說，獲取空格的下標更便捷一些，在 javascript 中，獲取一個字符在字符串中第一次出現(xiàn)的位置只需要函數(shù)：

var str = "#### title1.1.1.1";
var level = str.indexOf(" ");

---

2.2 html

在 html 中，標題標記與 markdown 的標題標記有一一對應的關系，雖然格式不同，但是只需要一點簡單的替換就能將 markdown 解析為html。Html 的標題格式為：

<h1>title1</h1>
<h2>
    title1.1
</h2>
<h3>
    title1.1.1
</h3>
<h2>
    title1.2
</h2>

不同標簽表示不同等級的標題。

---

3 代碼

3.1 將 markdown 解析為 html

單單將 markdown 文本解析為 html 文本的實現(xiàn)如下：

var str = "#### title1.1.1.1";
var level = str.indexOf(" ");
if(level==1){
    var title = str.replace(/^#+\x20/g,"");//把 # 標記和分割的空格替換掉，用正則匹配可以匹配任意多個 # ，是通用的。
    title = "<h" + level + ">" + title + "</h" + level + ">";//用 html 相同等級的標題標簽包裹，可以跟上一步合寫為一句
}

這里正則表達式的匹配效果如下：

3.2 html 可跳轉目錄

對于一篇比較長的文章來說，目錄是十分有必要的。我希望在自己博客的文章一側放置一個目錄，點擊目錄就能跳轉到對應標題。這需要對 html 的標題標簽設置 id ，然后在 <a> 標簽的 href 屬性對應到標題即可實現(xiàn)跳轉。如下：

<h1 id="title1">title1</h1>
<a href="#title1">點擊跳轉到title1</a>

所以我的解析 markdown 標題代碼如下：

var title_content = block.replace(/^\#+\x20/g, "");
title_content = replaceSpecialstyle(title_content);
var level = block.indexOf(" ");	/* 以空格的下標判斷標題的等級 */
var title = [0,0,0];// 分別記錄一級、二極、三級標題的個數(shù)，
if (level == 1) {
	title[0]++;
	title[1] = title[2] = 0;// 遇到以及標題需要將二極、三級標題的個數(shù)清零。因為標題序號都是1.1、2.1.1之類
	block_html += "<div class=\"alticle-title\"><h1 id=\"_title" + title[0] + "\">" + title_content + "</h1></div><div class=\"paragraph\">";
}
else if (level == 2) {
	title[1]++;
	title[2] = 0;	// 遇到二極標題時，三級標題需要清零
	block_html += "<h2 id=\"_title" + title[0] + "-" + title[1] + "\">" + title_content + "</h2>";
}
else if (level == 3) {
	title[2]++;
	block_html += "<h3 id=\"_title" + title[0] + "-" + title[1] + "-" + title[2] + "\">" + title_content + "</h3>";
}
else {	// 對于其他更小的標題就不用跳轉了
	block_html += "<h" + level + ">" + title_content + "</h" + level + ">";
}

---

以上。