正则表达解析 Markdown 语法

chaosx110 发布于2019-08-23 15:43 / 3793人阅读

摘要：链接在语法中链接的表示形式为链接。。代表出现次或者无限次非贪婪模式让正则表达式尽可能少的匹配，也就是说一旦匹配成功匹配不再继续尝试，就是非贪婪模式。斜体表示以一个或者开头并结尾表示规则和第一个集合相同，中间包含个或多个字符的字符串。

转载请注明出处

原文连接 http://blog.huanghanlian.com/article/5c80b4176f8b011040530140

文章起源

源于本博客开发实现需要

在首页列表需要对文字进行截取，需要截取第一张Markdown 语法的图片url。

在文章详情页以及关于文章展示的页面。需要对文章内容进行截取。填充headdescription。利于seo优化

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

真实场景以及功能需求

文章编写

文章列表预览

头部描述截取

需要做的事情是将文章Markdown 语法的字符串，对特定的语句进行过滤。只显示文章正文部分

实现场景

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

在访问某篇文章后台会去数据库中取对应的文章数据。
然后通过匹配将Markdown 语法的字符串转义成html元素字符渲染输出

</>复制代码 
"# 一级标题
## 二级标题
##### 五级标题
- 列表第一项
- 列表第二项
1. 有序列表第一项
2. 有序列表第
二项
[标题](链接地址)
![图片描述](图片链接地址)
*斜体*
**粗体**
> 引用段落
```
代码块
```"

现在需要做的是将这些字符去掉不想要的，提取内容部分

正则表达式规则

在使用正则表达式解析 Markdown 语法之前，我们要先对正则表达式的规则有一个基本的认识，下面我整理了一张正则表达式语法对照表。

正则表达式预定义类：

字符	含义
.	除了回车符和换行符之外的所有字符，等价于¹
d	数字字符,等价于[0-9] digit
D	非数字字符,等价于²
s	空白符,等价于[tnx0Bfr] space
S	非空白符,等价于³
w	单词字符（字母，数字，下划线）,等价于[a-zA-Z_0-9] word
W	非单词字符,等价于⁴

边界

字符	含义
^	以xxx开始
$	以xxx结束
b	单词边界
B	非单词边界

量词

字符	含义
？	出现零次或一次(最多出现一次)
+	出现一次或多次(至少出现一次)
*	出现零次或多次(任意次)
{n}	出现n次
{n,m}	出现n到m次
{n,}	至少出现n次

正则表达式解析 Markdown 语法

Markdown 语法包括标题、图片、链接、引用块、列表、粗体、斜体等，下面是解析这些语法的正则表达式和简单说明：

标题（表示以一个或多个“#”开头的字符串，并且“#”之后有0个或以上的字符，如：“### 三级标题”）。

</>复制代码 
^(#+)(.*)

链接（在 Markdown 语法中链接的表示形式为 [链接](URL)。）。

</>复制代码 
/[[sS]*?]([sS]*?)/g

解释：
匹配 [符开始
紧接着[sS]范围类空白符或者非空白符都可以的类。
*代表出现0次或者无限次
?非贪婪模式
让正则表达式尽可能少的匹配，也就是说一旦匹配成功匹配不再继续尝试，就是非贪婪模式。
做法很简单，在量词后面加上?即可。

斜体（表示以一个 * 或者 _ 开头并结尾（1表示规则和第一个集合相同），中间包含0个或多个字符的字符串）。

</>复制代码 
(*|_)(.*?)1

图片（部分地方同链接）

</>复制代码 
![[^]]+]([^)]+)

粗体（同斜体）

</>复制代码 
(**|__)(.*?)1

删除线（删除线）

</>复制代码 
~~(.*?)~~

引用块

</>复制代码 
(>|>)(.*)

内联代码块

</>复制代码 
`{1,2}[^`](.*?)`{1,2}

分割线

</>复制代码 
^-+$

`包围的代码块

</>复制代码 
```([sS]*?)```[s]?

无序列表

</>复制代码 
^[s]*[-*+] +(.*)

有序列表

</>复制代码 
^[s]*[0-9]+.(.*)

</>复制代码 
function abstractFn(res){
  if(!res){
    return "";
  }else{
    var str=res.replace(/(**|__)(.*?)(**|__)/g,"")          //全局匹配内粗体
    .replace(/![[sS]*?]([sS]*?)/g,"")                  //全局匹配图片
    .replace(/[[sS]*?]([sS]*?)/g,"")                    //全局匹配连接
    .replace(//g,"")                                 //全局匹配内html标签
    .replace(/(*)(.*?)(*)/g,"")                               //全局匹配内联代码块
    .replace(/`{1,2}[^`](.*?)`{1,2}/g,"")                       //全局匹配内联代码块
    .replace(/```([sS]*?)```[s]*/g,"")                       //全局匹配代码块
    .replace(/~~(.*?)~~/g,"")                               //全局匹配删除线
    .replace(/[s]*[-*+]+(.*)/g,"")                           //全局匹配无序列表
    .replace(/[s]*[0-9]+.(.*)/g,"")                           //全局匹配有序列表
    .replace(/(#+)(.*)/g,"")                                    //全局匹配标题
    .replace(/(>+)(.*)/g,"")                                    //全局匹配摘要
    .replace(/
/g,"")                                        //全局匹配换行
    .replace(/
/g,"")                                          //全局匹配换行
    .replace(/s/g,"")                                          //全局匹配空字符;
    return str.slice(0,155);
  }
}

rn ↩

0-9 ↩

tbx0Bfr ↩

a-zA-Z_0-9 ↩

GPU云服务器云服务器 js正则表达式语法正则正则表达式正则匹配正则表达式 -正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102478.html

正则表达式之简易markdown文件解析器

摘要：使用正则表达式也可以写一个简单的解析器一般的表达式是这样这是一个表达式这是一个表达式一行一个表达式，所以可以使用将内容分割为一个数组，数组的都每一项都是一个表达式然后再对每一行表达式进行解析，假如匹配到了如下表达式这是一个表达式这是一个表达使用正则表达式也可以写一个简单的markdown解析器一般的markdown表达式是这样 # 这是一个markdown表达式 ## 这是一个mar...

darryrzhong 2019-08-23 14:19 评论0 收藏0
marked.js使用杂记-markdown扩展语法

摘要：如何扩展语法想要扩展语法，也就需要深入了解的工作机制。的工作机制创建词法解析器实例将字符串解析成是官方文档的叫法，按照我的理解应该是节点接下来创建解析器实例调用来解析，生成字符串到这里，的工作机制就完了。请移步到我的Blog，获得更好的阅读体验！本文的链接请点这里起因我的博客系统的文章是直接使用gitbook保存的markdown文档，后端使用marked.js来解析markd...

huashiou 2019-08-23 18:41 评论0 收藏0
一次性搞懂JavaScript正则表达式之引擎

摘要：总的来说，可以称为文本主导的正则引擎，可以称为表达式主导的正则引擎。首先，正则表达式在计算机看来只是一串符号，正则引擎首先肯定要解析它。精通正则表达式书中说引擎不支持非贪婪模式，很明显不是引擎。正则表达式中可以商榷的部分就叫做备选状态。本文是『horseshoe·Regex专题』系列文章之一，后续会有更多专题推出GitHub地址：https://github.com/veedrin/...

hlcc 2019-08-23 14:00 评论0 收藏0
12行代码实现一个Web版Markdown编辑器: 实时预览

摘要：首先，我承认标题党的嫌疑是逃不掉的了但是，诸君请继续看下去，就会发现还是有干货的源码写这个编辑器的难点有两个对文本进行语法的解析实时检测页面文本变化针对，我在上找到了，看就能很快地上手针对，我选择的是，因为我看中了她的双向绑定特性当然数据和首先，我承认标题党的嫌疑是逃不掉的了．．．但是，诸君请继续看下去，就会发现还是有干货的源码：https://github.com/shuiRo...

Mertens 2019-08-20 15:10 评论0 收藏0
12行代码实现一个Web版Markdown编辑器: 实时预览

摘要：首先，我承认标题党的嫌疑是逃不掉的了但是，诸君请继续看下去，就会发现还是有干货的源码写这个编辑器的难点有两个对文本进行语法的解析实时检测页面文本变化针对，我在上找到了，看就能很快地上手针对，我选择的是，因为我看中了她的双向绑定特性当然数据和首先，我承认标题党的嫌疑是逃不掉的了．．．但是，诸君请继续看下去，就会发现还是有干货的源码：https://github.com/shuiRo...

makeFoxPlay 2019-08-01 16:31 评论0 收藏0