• 欢迎大家分享资料!前往留言板评论即可!

统计markdown字数

合宙 模组资料网 2年前 (2021-05-15) 425次浏览 0个评论 扫描二维码
文章目录[隐藏]

由于社区需要统计文章字数并展示,在此记录实现原理。

Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

实现场景

文章编写存入数据库是字符串类型。

统计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 语法包括标题、图片、链接、引用块、列表、粗体、斜体等,下面是解析这些语法的正则表达式和简单说明:

  1. 标题(表示以一个或多个“#”开头的字符串,并且“#”之后有0个或以上的字符,如:“### 三级标题”)。
^(#+)(.*)
  1. 链接 (在 Markdown 语法中链接的表示形式为 [链接](URL)。)。
/\[[\s\S]*?\]\([\s\S]*?\)/g
  1. 斜体(表示以一个 * 或者 _ 开头并结尾(\1表示规则和第一个集合相同),中间包含0个或多个字符的字符串)。
(\\*|_)(.*?)\\1
  1. 图片(部分地方同链接)
!\\[[^\\]]+\\]\\([^\\)]+\\)
  1. 粗体(同斜体)
(\\*\\*|__)(.*?)\\1
  1. 删除线(删除线)
\~\\~(.*?)\\~\\~
  1. 引用块
n(>|\\>)(.*)
  1. 内联代码块
`{1,2}[^`](.*?)`{1,2}
  1. 分割线
^-+$
  1. *
    “`*包围的代码块
    </li>
    </ol>

    <pre><code class="language-js line-numbers">“`([\\s\\S]*?)“`[\\s]?

    1. 无序列表
    ^[\\s]*[-\\*\\+] +(.*)
    
    1. 有序列表
    ^[\\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, "")
    

    转载请注明原文链接:统计markdown字数
    喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址