由于社区需要统计文章字数并展示,在此记录实现原理。
Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
实现场景
文章编写存入数据库是字符串类型。
在访问某篇文章后台会去数据库中取对应的文章数据。然后通过匹配将Markdown 语法的字符串转义成 html 元素字符渲染输出。现在需要做的是将这些字符去掉不想要的,提取内容部分并计算长度。
正则表达式规则
在使用正则表达式解析 Markdown 语法之前,我们要先对正则表达式的规则有一个基本的认识,下面我整理了一张正则表达式语法对照表。
正则表达式预定义类:
字符 | 含义 |
---|---|
. | 除了回车符和换行符之外的所有字符,等价于[^\r\n] |
\d | 数字字符,等价于[0-9] digit |
\D | 非数字字符,等价于[^0-9] |
\s | 空白符,等价于[\t\n\x0B\f\r] space |
\S | 非空白符,等价于[^\t\b\x0B\f\r] |
\w | 单词字符(字母,数字,下划线),等价于[a-zA-Z_0-9] word |
\W | 非单词字符,等价于[^a-zA-Z_0-9] |
边界
字符 | 含义 |
---|---|
^ | 以xxx开始 |
$ | 以xxx结束 |
\b | 单词边界 |
\B | 非单词边界 |
量词
字符 | 含义 |
---|---|
? | 出现零次或一次(最多出现一次) |
+ | 出现一次或多次(至少出现一次) |
* | 出现零次或多次(任意次) |
{n} | 出现n次 |
{n,m} | 出现n到m次 |
{n,} | 至少出现n次 |
正则表达式解析 Markdown 语法
Markdown 语法包括标题、图片、链接、引用块、列表、粗体、斜体等,下面是解析这些语法的正则表达式和简单说明:
- 标题(表示以一个或多个“#”开头的字符串,并且“#”之后有0个或以上的字符,如:“### 三级标题”)。
^(#+)(.*)
- 链接 (在 Markdown 语法中链接的表示形式为
[链接](URL)
。)。
/\[[\s\S]*?\]\([\s\S]*?\)/g
- 斜体(表示以一个 * 或者 _ 开头并结尾(\1表示规则和第一个集合相同),中间包含0个或多个字符的字符串)。
(\\*|_)(.*?)\\1
- 图片(部分地方同链接)
!\\[[^\\]]+\\]\\([^\\)]+\\)
- 粗体(同斜体)
(\\*\\*|__)(.*?)\\1
- 删除线(删除线)
\~\\~(.*?)\\~\\~
- 引用块
n(>|\\>)(.*)
- 内联代码块
`{1,2}[^`](.*?)`{1,2}
- 分割线
^-+$
- *
“`*包围的代码块
</li>
</ol><pre><code class="language-js line-numbers">“`([\\s\\S]*?)“`[\\s]?
- 无序列表
^[\\s]*[-\\*\\+] +(.*)
- 有序列表
^[\\s]*[0-9]+\\.(.*)
最终实现
这里值得一提的是,借助 javascript 的字符串操作方法
replace
可以有效地替换 markdown 中的语法规则。最终的字符统计可以返回字符串的长度作为结果。//全局匹配内联代码块 content.replace(/(\*)(.*?)(\*)/g, (a, b, c) => c) //全局匹配内联代码块 .replace(/`{1,2}[^`](.*?)`{1,2}/g, (a, b) => b) //全局匹配代码块 .replace(/```([\s\S]*?)```[\s]*/g, (a, b) => b) //全局匹配删除线 .replace(/\~\~(.*?)\~\~/g, (a, b) => b) //全局匹配无序列表 .replace(/[\s]*[-\*\+]+(.*)/g, (a,b) => b) //全局匹配有序列表 .replace(/[\s]*[0-9]+\.(.*)/g, (a,b) => b) //全局匹配标题 .replace(/(#+)(.*)/g, (a, b, c, d) => c) //全局匹配摘要 .replace(/(>+)(.*)/g, (a, b, c) => c) //全局匹配换行 .replace(/\r\n/g, "") //全局匹配换行 .replace(/\n/g, "") .replace(/\s/g, "")