「Javascript」解析markdown为html——标题篇
「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 中标题的格式:一方面, “#” 的个数代表了标题的级数,其中一级标题比较大,与正文字体差距较大,比较适合作为文章标题,二极标题则适合作为章节标题,三级标题适合作小节标题……以上只是我在记录笔记时的个人风格,如何使用完全看个人。
另一方面, “#” 标记与标题内容之间用空格分隔,这便给了解析以便利性。于是便有两种方法来得到对应的标题级数:
- 数 “#” 符号的个数,
- 获取第一个空格的下标。
相对来说,获取空格的下标更便捷一些,在 javascript 中,获取一个字符在字符串中第一次出现的位置只需要函数:
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 文本的实现如下:
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 属性对应到标题即可实现跳转。如下:
<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];// 分别记录一级、二极、三级标题的个数, if (level == 1) { title[0]++; title[1] = title[2] = 0;// 遇到以及标题需要将二极、三级标题的个数清零。因为标题序号都是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 + ">"; }
以上。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!