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

「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——標題篇
浙公網安備 33010602011771號