摘要:鏈接在語法中鏈接的表示形式為鏈接。。代表出現次或者無限次非貪婪模式讓正則表達式盡可能少的匹配,也就是說一旦匹配成功匹配不再繼續(xù)嘗試,就是非貪婪模式。斜體表示以一個或者開頭并結尾表示規(guī)則和第一個集合相同,中間包含個或多個字符的字符串。
轉載請注明出處
原文連接 http://blog.huanghanlian.com/article/5c80b4176f8b011040530140
文章起源源于本博客開發(fā)實現需要
在首頁列表需要對文字進行截取,需要截取第一張Markdown 語法的圖片url。
在文章詳情頁以及關于文章展示的頁面。需要對文章內容進行截取。填充headdescription。利于seo優(yōu)化
Markdown 是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。
真實場景以及功能需求
文章編寫
文章列表預覽
頭部描述截取
需要做的事情是將文章Markdown 語法的字符串,對特定的語句進行過濾。只顯示文章正文部分
實現場景文章編寫存入數據庫是字符串類型
在訪問某篇文章后臺會去數據庫中取對應的文章數據。
然后通過匹配將Markdown 語法的字符串轉義成html元素字符渲染輸出
"# 一級標題 ## 二級標題 ##### 五級標題 - 列表第一項 - 列表第二項 1. 有序列表第一項 2. 有序列表第 二項 [標題](鏈接地址) ![圖片描述](圖片鏈接地址) *斜體* **粗體** > 引用段落 ``` 代碼塊 ```"
現在需要做的是將這些字符去掉不想要的,提取內容部分
正則表達式規(guī)則在使用正則表達式解析 Markdown 語法之前,我們要先對正則表達式的規(guī)則有一個基本的認識,下面我整理了一張正則表達式語法對照表。
正則表達式預定義類:
字符 | 含義 |
---|---|
. | 除了回車符和換行符之外的所有字符,等價于1 |
d | 數字字符,等價于[0-9] digit |
D | 非數字字符,等價于2 |
s | 空白符,等價于[tnx0Bfr] space |
S | 非空白符,等價于3 |
w | 單詞字符(字母,數字,下劃線),等價于[a-zA-Z_0-9] word |
W | 非單詞字符,等價于4 |
邊界
字符 | 含義 |
---|---|
^ | 以xxx開始 |
$ | 以xxx結束 |
b | 單詞邊界 |
B | 非單詞邊界 |
量詞
字符 | 含義 |
---|---|
? | 出現零次或一次(最多出現一次) |
+ | 出現一次或多次(至少出現一次) |
* | 出現零次或多次(任意次) |
{n} | 出現n次 |
{n,m} | 出現n到m次 |
{n,} | 至少出現n次 |
Markdown 語法包括標題、圖片、鏈接、引用塊、列表、粗體、斜體等,下面是解析這些語法的正則表達式和簡單說明:
標題(表示以一個或多個“#”開頭的字符串,并且“#”之后有0個或以上的字符,如:“### 三級標題”)。
^(#+)(.*)
鏈接 (在 Markdown 語法中鏈接的表示形式為 [鏈接](URL)。)。
/[[sS]*?]([sS]*?)/g
解釋:
匹配 [符 開始
緊接著[sS]范圍類 空白符或者非空白符都可以的類。
*代表出現0次或者無限次
?非貪婪模式
讓正則表達式盡可能少的匹配,也就是說一旦匹配成功匹配不再繼續(xù)嘗試,就是非貪婪模式。
做法很簡單,在量詞后面加上?即可。
斜體(表示以一個 * 或者 _ 開頭并結尾(1表示規(guī)則和第一個集合相同),中間包含0個或多個字符的字符串)。
(*|_)(.*?)1
圖片(部分地方同鏈接)
![[^]]+]([^)]+)
粗體(同斜體)
(**|__)(.*?)1
刪除線(刪除線)
~~(.*?)~~
引用塊
(>|>)(.*)
內聯(lián)代碼塊
`{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,"") //全局匹配內聯(lián)代碼塊 .replace(/`{1,2}[^`](.*?)`{1,2}/g,"") //全局匹配內聯(lián)代碼塊 .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); } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102478.html
摘要:使用正則表達式也可以寫一個簡單的解析器一般的表達式是這樣這是一個表達式這是一個表達式一行一個表達式,所以可以使用將內容分割為一個數組,數組的都每一項都是一個表達式然后再對每一行表達式進行解析,假如匹配到了如下表達式這是一個表達式這是一個表達 使用正則表達式也可以寫一個簡單的markdown解析器一般的markdown表達式是這樣 # 這是一個markdown表達式 ## 這是一個mar...
摘要:如何擴展語法想要擴展語法,也就需要深入了解的工作機制。的工作機制創(chuàng)建詞法解析器實例將字符串解析成是官方文檔的叫法,按照我的理解應該是節(jié)點接下來創(chuàng)建解析器實例調用來解析,生成字符串到這里,的工作機制就完了。 請移步到我的Blog,獲得更好的閱讀體驗!本文的鏈接請點這里 起因 我的博客系統(tǒng)的文章是直接使用gitbook保存的markdown文檔,后端使用marked.js來解析markd...
摘要:總的來說,可以稱為文本主導的正則引擎,可以稱為表達式主導的正則引擎。首先,正則表達式在計算機看來只是一串符號,正則引擎首先肯定要解析它。精通正則表達式書中說引擎不支持非貪婪模式,很明顯不是引擎。正則表達式中可以商榷的部分就叫做備選狀態(tài)。 本文是『horseshoe·Regex專題』系列文章之一,后續(xù)會有更多專題推出GitHub地址:https://github.com/veedrin/...
摘要:首先,我承認標題黨的嫌疑是逃不掉的了但是,諸君請繼續(xù)看下去,就會發(fā)現還是有干貨的源碼寫這個編輯器的難點有兩個對文本進行語法的解析實時檢測頁面文本變化針對,我在上找到了,看就能很快地上手針對,我選擇的是,因為我看中了她的雙向綁定特性當然數據和 首先,我承認標題黨的嫌疑是逃不掉的了...但是,諸君請繼續(xù)看下去,就會發(fā)現還是有干貨的 源碼:https://github.com/shuiRo...
摘要:首先,我承認標題黨的嫌疑是逃不掉的了但是,諸君請繼續(xù)看下去,就會發(fā)現還是有干貨的源碼寫這個編輯器的難點有兩個對文本進行語法的解析實時檢測頁面文本變化針對,我在上找到了,看就能很快地上手針對,我選擇的是,因為我看中了她的雙向綁定特性當然數據和 首先,我承認標題黨的嫌疑是逃不掉的了...但是,諸君請繼續(xù)看下去,就會發(fā)現還是有干貨的 源碼:https://github.com/shuiRo...
閱讀 370·2023-04-25 16:38
閱讀 1482·2021-09-26 09:46
閱讀 3326·2021-09-08 09:35
閱讀 2779·2019-08-30 12:54
閱讀 3249·2019-08-29 17:06
閱讀 1017·2019-08-29 14:06
閱讀 3344·2019-08-29 13:00
閱讀 3466·2019-08-28 17:53