草系前端手摸手帶你實現正則引擎,點燃夏日最熱情的煙火🔥

你們好,我是寒草😈,一隻草系碼猿🐒。間歇性熱血🔥,持續性沙雕🌟。
若是喜歡個人文章,能夠關注➕ 點贊 👍,,與我一同成長吧~
微信:hancao97前端

「本文已參與好文召集令活動,點擊查看:後端、大前端雙賽道投稿,2萬元獎池等你挑戰!node

序章

對讀者的話

前一陣,我發了一篇文章前端學編譯原理(一):編譯引論,粗略的介紹了一下編譯原理這門學科,我也想到一個問題:git

單純枯燥的講解編譯原理這門課程你們可能並不會很接受這系列文章,而且單純的講解編譯原理確定有不少人比我講的要好要細緻。github

因此我作了這樣一個決定:我是一個前端,讀我文章的大多數人可能也是前端,因此我不妨接下來將前端的一些應用或者實踐和編譯原理結合起來。因此這篇文章是本系列的全新實踐🌟,若是你們喜歡能夠留下大家的點贊👍 或者關注➕,大家的支持是我更文的最大動力🔥。正則表達式

本篇文章,我將從自動機出發,擴展到咱們經常使用的正則匹配,最後我也會帶着你們親手實現一個簡單的正則匹配。乾貨滿滿,也會有一己之言,若是你們有疑問或者指正請留在評論區,我會仔細閱讀。後端

倉庫地址:js-regular,照例放出倉庫的地址,請各位大佬忽視我沒寫gitignore不當心把node_modules上傳上來了,失誤,純屬失誤數組

文章大綱

  • 有限自動機基礎:DFA與NFA
  • 正則原理淺析
  • 手摸手,帶你實現簡易版正則引擎

和文章目錄一致,其中若是不閱讀第一章自動機科普,也能夠直接跳轉到第二章開始閱讀,可是推薦全文閱讀, 由於第一章也乾貨滿滿, 第一章過於生硬的地方我也有舉例說明或者用更加接地氣的手段作了描述總結✨,以得到完整的思考體驗,感覺一遍我完整學習實踐的過程,屬於正則的那如煙火🔥 般絢爛的夏日詩篇也會徐徐展開。微信

那麼咱們鹹鹽少量(閒言少敘),開始咱們的正篇吧~markdown

有限自動機基礎

章節引論—有限自動機(FA)

tip: 若是看不懂特色和形式定義中的話,請你們移步後面我來總結一下部分,幫助你們對有限自動機的定義有一個粗略的理解。數據結構

首先在開始下面的話題以前,咱們有必要去了解一下,什麼是有限自動機, 有限自動機也被稱爲:時序機

有限自動機有如下特色

  • 系統具備有限個狀態,不一樣的狀態表明不一樣的意義。按照實際的須要,系統能夠在不一樣的狀態下完成規定的任務。

  • 咱們能夠將輸入字符串中出現的字符聚集在一塊兒構成一個字母表。系統處理的全部字符串都是這個字母表上的字符串。

  • 系統在任何一個狀態下,從輸入字符串中讀入一個字符,根據當前狀態和讀入的這個字符轉到新的狀態。

  • 系統中有一個狀態,它是系統的開始狀態。

  • 系統中還有一些狀態表示它到目前爲止所讀入的字符構成的字符串是語言的一個句子。

有限自動機的形式定義

有限狀態自動機是一個五元組 M=(Q, Σ, δ, q0, F),其中:

  • Q——狀態的非空有窮集合。∀q∈Q,q稱爲M的一個狀態。

  • Σ——輸入字母表。

  • δ —— 狀態轉移函數,有時又叫做狀態轉換函數或者移動函數,δ:Q×Σ→Q,δ(q,a)=p。

  • q0 —— M的開始狀態,也可叫做初始狀態或啓動狀態。q0∈Q。

  • F —— M的終止狀態集合。F被Q包含。任給q∈F,q稱爲M的終止狀態

我來總結一下

你們不要被上面列出的一大堆定義和特色繞暈,其實總結起來很是簡單:

  • 首先有限狀態機有一個開始狀態,具一個不太恰當的例子:好比說你要提交一個工單,你會經歷直屬領導審批,人事審批,老總審批幾個階段。那麼提交工單就是這個工單系統的有限自動機的開始狀態,對應五元組裏面的q0
  • 固然,除了開始狀態咱們還有一個結束狀態,那麼對於咱們提交工單這個流程來說,咱們的結束狀態就是工單成功或者工單結束,你們能夠發現這個有限自動機具備兩個終止狀態,因此終止狀態是一個集合,並不必定只有一個結束狀態,這個結束狀態就是五元組裏面的F
  • 還有咱們有限自動機有限兩個字很重要,有限指的是具備有限個狀態,就像咱們下圖中的提交工單,待上級領導審批待人事審批待老總審批工單成功工單失敗就是咱們的狀態集,即五元組中的Q
  • 那麼做爲自動機,咱們該怎麼知道咱們的下一個狀態是啥呢,因此其實咱們須要兩個東西,一個是如今的狀態,一個是狀態轉移函數δ,好比:咱們如今的階段是人事審批,咱們的輸入其實就是人事審批,通過狀態轉移函數(審批結果判斷)以後咱們就能夠獲得下一步的狀態,狀態多是工單失敗或者待老總審批

image.png

不知道通過個人舉例以後,你們有沒有對定義有了必定的理解,其實總結起來很簡單,其實:

有限自動機 = 有限的內部狀態集合 + 一組控制規則

DFA — 肯定有限自動機

定義

前文咱們已經瞭解了有限自動機,那麼肯定有限自動機有哪些特別的點呢,下面咱們來看一下肯定有限自動機的定義:

  • 肯定有限自動機M爲一個五元組 M = ( S, ∑, s0, f, Z)
  • S:一個有窮狀態集,它的每一個元素稱爲一個狀態;
  • ∑:一個有窮字母表,它的每一個元素稱爲一個輸入字符;
  • s0∈S:惟一的初始狀態(開始狀態);
  • f:狀態轉換函數:S×∑→ S,且單值函數,f(Si,a)=Sk。當前狀態Si,遇輸入字符a時,自動機將惟一地轉換到狀態 Sk,稱Sk爲 Si的一個後繼狀態;
  • Z⊆S:終止狀態集(可接受狀態集、結束狀態集) 其中每一個元素稱爲終止狀態(可接受狀態、結束狀態), Z可空.

我來總結一下:

咱們其實能夠和上面的形式定義作一個比較,咱們會發現一些很重要的點:

  • 初始狀態惟一
  • 狀態轉換函數是單值函數
  • 終止狀態集Z能夠爲空

舉個例子

M=({S,U,V,Q}, {a, b}, f, S, {Q}), 其中f定義爲:

f(S, a)=U f(S, b)=V

f(U, a)=Q f(U, b)=V

f(V, a)=U f(V, b)=Q

f(Q, a)=Q f(Q, b)=Q
複製代碼

那麼咱們就能夠畫出它對應的自動狀態機

image.png

DFA接受的字符串

  • 對於 ∑ 中任何字符串t,若存在一條從初始結點到某一終止結點 的路徑,且這條路上全部弧上的標記符鏈接成的字符串等於t, 則稱 t 可爲DFA M所接受

  • 若DFA M的初始狀態同時又是終止狀態,則空字符串可爲DFA M所接受.

  • DFA M 所能接受的字符串的全體記爲L(M)

再次舉個例子說明,若是一個自動機是這樣的:

image.png

那麼:L(M1) = { aba, abaa, abab, abaab,...}
你們有沒有發現,正則匹配的雛形已經有了🌟

DFA的肯定性

那麼咱們爲何說 DFA 是肯定有限自動機呢,肯定這兩個字體如今哪裏呢?

  • 初始狀態惟一
  • 狀態轉換函數f: S×∑→S是一個單值函數,即對任何狀態s∈S,輸入 符號a∈∑, f(S, a)惟一肯定下一狀態.

DFA如何代碼實現

好比自動機如圖所示:

image.png

其實咱們想要實現簡易的 DFA 自動機能夠藉助 swicth case 實現

// 簡單寫個switch
switch (currentChar) {
    case 'a':
        goto Lj;
        break;
    case 'b':
        goto Lk;
        break;
    default:
        throw err;
}
複製代碼

NFA — 非肯定有限自動機

定義

非肯定有限自動機M爲一個五元組 M = ( S, ∑, S0, f, Z)

  • S: 一個有窮狀態集,它的每一個元素稱爲一個狀態;
  • ∑: 一個有窮字母表,它的每一個元素稱爲一個輸入字符;
  • S0 ⊆ S: 非空初始狀態集;
  • Z⊆S: 終止狀態集;
  • f : 狀態轉換函數,是從S×(∑∪{ε}) 到 S 子集的映射,即S×(∑∪{ε})→ 2^S

注意,這裏的後繼狀態不是單一狀態,而是狀態集S的子集, 即轉換函數不是單值.

我這裏總結一下,你們看區別就是狀態轉換函數的結果再也不是單值了, 起始狀態也這是一個集合而不是一個肯定的值,以及轉換函數的的輸入是∑∪{ε}就表示有向弧上面的標記能夠是空

舉個例子

NFA M = ({0, 1, 2}, {a, b}, f, {0}, {2})
狀態轉換函數以下:
f(0,a)={0,1} f(1,a)=∅ f(2,a)={2}
f(0,b)={0} f(1,ε)={2} f(2,b)={2}
複製代碼

那麼咱們就能夠畫出它對應的有限自動機

image.png

NFA接受的字符串

設M是一個NFA,M=(S, ∑, f, S0, Z),則定義L(M)爲從任意初始 狀態到任意終止狀態所接受的字符串的集合,咱們拿上面的自動機舉例。 上面自動機接受的字符串集合是: L(M) = { β | β是形如...a...的由a, b構成的字符串 }

好比:aaa, bab, abaa...

DFA 與 NFA 對照

那在本章結束以前,咱們回顧一下~

DFA:

  • 開始狀態惟一
  • 狀態轉換函數爲單值函數

NFA:

  • 開始狀態是一個狀態集合
  • 狀態轉換函數的結果是一個集合
  • 有向弧上面的標記能夠是空

更多擴展內容

tip: 此處還會不少值得講的內容,好比 NFADFA 的轉換, DFA的化簡等,可是由於文章內容有限,並且與本文主題關係不大,感興趣的人能夠留言,咱們繼續開坑。固然我也更加鼓勵你們自我學習。

正則原理淺析

本章節部份內容參考:正則表達式引擎執行原理——從未如此清晰!,這篇文章也有不少能夠了解的內容你們也能夠去圍觀一下,我從這篇文章學到不少,總結整理的很好。

前文咱們已經講解過了 DFA 和 NFA,即肯定有限自動機和非肯定有限自動機,根據前面的鋪墊想必各位大佬已經能夠將正則引擎與自動機關聯起來了,而正則引擎大致也能夠分紅這樣的兩大類,即:DFA 正則引擎和 NFA 正則引擎。

DFA引擎

舉個例子

咱們直接舉一個比較簡單的例子:

正則表達式是 a[db]c
待匹配的字符串是 abc

此處咱們使用‘[]’的緣由是第三章手摸手,帶你實現簡易版正則引擎咱們將會去實現‘[]’

下面咱們開始匹配:

image.png

不知道你們有沒有理解,我描述一下對比的過程:

  1. 第一次是字符 a 和正則表達式 a 比較
  2. 匹配成功後,是字符 b 同時比較表達式中的 b 和 d
  3. 再次匹配成功,字符 c 和正則表達式 c 比較
  4. 匹配成功

這裏面咱們值得注意的點是,第二次匹配是 b 同時和 b, d 進行比較,因此可能會消耗更多的內存。

特色

咱們從上面的例子能夠看出一些DFA正則引擎的特色:

  • 文本主導:按照文本順序執行,因此保證了DFA正則引擎的肯定性
  • 記錄當前全部有效可能:正如前文示例中的第二次匹配同樣,同時比較了 b 和 d ,因此須要消耗更大的內存
  • 每一個字符只檢查一次:提升了執行效率,由於沒有回溯操做重複匹配的過程
  • 不能使用反向引用等功能:由於每一個字符只檢查一次,只記錄當前比較值,因此不能使用反向引用、環視等一些功能

NFA引擎

舉個例子

例子仍是剛纔的例子,方便你們對照:

正則表達式是 a[db]c
待匹配的字符串是 abc

下面咱們開始匹配:

image.png

這裏和前面的DFA模式作一下對比,咱們會發現區別,NFA引擎在匹配以前會記錄字符的位置,而後選擇其中一個可能狀態進行匹配,若是匹配失敗,會進行回溯,進入其餘分支進行匹配。

特色

咱們從上面的例子能夠看出一些NFA正則引擎的特色:

  • 文表達式主導:按照表達式的一部分執行,若是不匹配換其餘部分繼續匹配,直到表達式匹配完成。
  • 會記錄某個位置:咱們看到當執行到[db]時,NFA引擎會記錄字符的位置,而後選擇其中一個先匹配。
  • 單個字符可能檢查屢次:咱們看到當執行到[db]時,比較d後發現不匹配,因而NFA引擎換表達式的另外一個分支b,同時文本位置回溯,從新匹配字符'b'。這也是NFA引擎是非肯定型的緣由,同時帶來另外一個問題效率可能沒有DFA引擎高。
  • 可實現反向引用等功能:由於具備回溯這一步,因此能夠很容易的實現反向引用等一些功能!

對比

image.png

章節小結

本章結束你們已經得到了全部前置知識🌟,下面咱們會利用這些知識去親手實現一個簡單的正則,也是本文的重點,下面咱們一塊兒進入下一章的內容吧📖

手摸手,帶你實現簡易版正則引擎

章節序言

功能介紹:

入口方法介紹:咱們要提供一個方法,testReg,參數有兩個,一個是待驗證的字符串str,另外一個是正則表達式reg,返回一個布爾值,便是否匹配

正則表達式規則介紹

  • 這個正則表達式要以 ^ 開頭,以 $ 結尾
  • [] 表示匹配字符集合中的一個字符,[] 後能夠接 * 或者 +
  • * 表示匹配 0 個或者 0 個以上多個
  • + 表示匹配 1 個或者 1 個以上的多個
// 正則表達式舉例
^[123]*mn[ab]+cd$
^a[ab]+$
...
複製代碼

倉庫地址:js-regular

思路解析

咱們遇到一個問題,須要先思考,有了思路以後再進行編碼,避免重複修改致使代碼的混亂以及時間的浪費。

那麼,咱們首先要思考咱們的目標是啥,既然咱們本篇文章的主題是自動機,也不必賣關子, 咱們第一步想到的確定是, 把正則表達式轉換成自動機, 以後藉助這個正則匹配的自動機去匹配咱們的字符串

那麼咱們如何把一個正則表達式轉換成一個自動機呢?
個人思路是這樣的:

graph TD
正則表達式 --> 具備匹配含義的獨立單元序列 
具備匹配含義的獨立單元序列 --> 正則匹配自動機

我來簡單解讀一下,我會把這個問題分紅兩部分,首先我須要解析字符串,以後轉換成具備匹配含義的獨立單元序列,即 TOKEN 序列。什麼叫作具備匹配含義的獨立單元序列呢?

我舉個例子:

正則表達式是 ^[123]+[a]*3$ , 那麼其它能夠分紅三個獨立單元即:

  • [123]+
  • [a]*
  • 3

可是我確定不會只是拆成三個字符串,我仍是會變成三個具備含義的對象(便於生成自動機),可是這都是後話了。

以後咱們要把 具備匹配含義的獨立單元序列(我真的是起名鬼才🐶)轉換成自動機,既然咱們都說了我會用對象表示每一個獨立單元, 那最簡單的方法就是在這個對象中加入 next 屬性, 固然 next 多是一個數組, 存儲着全部可能的分支。

以後咱們再寫一個方法, 讓自動機跑起來就行了。

ok,說幹就幹,下面咱們將進入代碼分步驟展現與解讀環節,請你們跟着我一塊兒思考。

入口方法 - testReg

// the entry function
const testReg = (str, reg) => {
    if (!reg.startsWith('^') || !reg.endsWith('$')){
        // it's not a right reg string
        throw Error('format mismatch!');
    }
    const generator = getGeneratorStart(reg);
    return isMatch(str, generator);
    //console.log(matchStructure)
}
複製代碼

入口方法很直白, 你們看我這裏接受兩個參數, 第一個 str 是待匹配的字符串, 第二個 reg 是正則表達式。

首先我對正則表達式作了驗證,若是正則表達式不以 ^ 開頭,以 $ 結尾, 表示這個表達式是無效的,是不合法的。 以後咱們調用了 getGeneratorStart 方法獲取了自動機的開始狀態, 以後調用 isMatch 方法對字符串進行一個匹配。

獲取自動機方法 - getGeneratorStart

// use reg to get generator and return start Pattern Object
const getGeneratorStart = (reg) => {
    const regStr = reg.slice(1, reg.length - 1);
    const patternObjList = getPatternObjList(regStr);
    const generator = getGenerator(patternObjList);
    return generator;
}
複製代碼

又是一個很短很直白的方法, 第一步咱們對正則表達式作了一個截取,掐頭去尾(去掉開頭的 ^ 和結尾的 $ ),留下真正有效的部分。 以後咱們又調用了兩個方法 getPatternObjListgetGenerator 。這兩個方法和以前我在思路解析中表達的一致:

  • getPatternObjList: 輸入是 regStr ,即正則表達式字符串,輸出是 具備匹配含義的獨立單元序列
  • getGenerator: 輸入是前一步的輸出,即具備匹配含義的獨立單元序列,輸出是自動機的起始狀態

獲取單元序列方法 - getPatternObjList

// change reg String to Pattern Ojects and return list
const getPatternObjList = (regStr) => {
    const len = regStr.length;
    let patternObjlist = [];
    let isInCollection = false;
    let collection = []; // used to store current collection
    for (let i = 0; i < len; i++) {
        const char = regStr[i];
        if (!isInCollection) {
            // 
            if (char != '[') {
                // single char object
                patternObjlist.push({
                    isCollection: false,
                    pattern: [char],
                    next: []
                })
            } else {
                // char === [ we need to change isInCollection to true
                isInCollection = true;
            }
        } else {
            if (char != ']') {
                collection.push(char);
            } else {
                // ] is the sign end of collection
                isInCollection = false;
                // collectionSign maybe * or + 
                let collectionSign = regStr[i + 1];
                let collectionType = 'COMMON';
                if( collectionSign && collectionTypes.includes(collectionSign) ){
                    collectionType = collectionSign
                    i++;
                }
                patternObjlist.push({
                    isCollection: true,
                    pattern: collection,
                    collectionType,
                    next: []
                })
                collection = [];
            }
        }
    }
    return patternObjlist;
}
複製代碼

這個方法比較長,但其實就是字符串的一遍遍歷, 其實看上去比較簡單, 可是值得注意的是我把具備匹配含義的獨立單元序列轉換成的數據結構:

  • [] 集合對應的數據結構
{
    isCollection: Boolean,
    pattern: Array,
    collectionType: emun,
    next: Array
}
複製代碼
  • 正常字符串對應的數據結構
{
    isCollection: Boolean,
    pattern: Array,
    next: Array
}
複製代碼

其中

  • pattern 存儲着全部可能的匹配,好比 [123]+ 這個 pattern 就是 [1, 2, 3]
  • collectionType 存儲着是 * 仍是 + 仍是 COMMON,方便後續生成自動機時處理

我給你們演示一下方法的輸入輸出:

輸入:
^[123]+[a]*3$
輸出:
[
  {
    isCollection: true,
    pattern: [ '1', '2', '3' ],
    collectionType: '+',
    next: []
  },
  {
    isCollection: true,
    pattern: [ 'a' ],
    collectionType: '*',
    next: []
  },
  { 
    isCollection: false, 
    pattern: [ '3' ], 
    next: [] 
   }
]
複製代碼

單元序列轉換爲自動機方法 - getGenerator

// change pattern list to regular generator
const getGenerator = (patternObjList) => {
    patternObjList.push({
        isEnd: true,
    }) // the end signal of generator
    let start = {
        isStart: true,
        next:[]
    }; // generator need a 'start' to start valid
    const len = patternObjList.length;
    start.next = getNext(patternObjList, -1);
    for(let i = 0; i < len; i++ ){
        const curPattern = patternObjList[i];
        curPattern.next = getNext(patternObjList, i)
        if(collectionTypes.includes(curPattern.collectionType)){
            curPattern.next.push(curPattern);
        }
    }
    return start;
}
複製代碼

咱們先給 getPatternObjList 方法返回值數組加入起始狀態和結束狀態。以後咱們給起始狀態的 next 初始化,以後循環遍歷數組,爲數組的每一項的 next 初始化,這樣就經過 next 中存儲的指針將自動機的各個狀態串聯起來了。

注意:這裏 next 數組的每一項都是 patternObjList 數組中對象的引用。以及最後若是 collectionType* 或者 + 還要把本身追加進去,這類的節點能夠自循環

以後咱們看一下其中的子方法 getNext ,我就不單獨開一個章節了,由於這兩個方法關聯性很強。

// get PatternObj's next
const getNext = (patternObjList, index) => {
    let next = [];
    const len = patternObjList.length;
    for(let i = index + 1; i < len; i++){
        const nextPattern = patternObjList[i]
        next.push(nextPattern)
        if(nextPattern.collectionType != '*'){
            // * need to handle, * is possible no
            break;
        }
    }  
    return next;
}
複製代碼

其實最關鍵就是處理 * ,由於 * 表示 0 個或者 0 個以上的多個,就要繼續日後遍歷。

好比 a[b]*c 這樣的正則表達式,a 後面跟的多是 b 也多是 b 後面的 c

最後咱們能夠看一下這個自動機的輸出

輸入:
^[123]+[a]*3$
輸出:
// 這裏由於可能有循環引用的關係,因此輸出會有問題,可是你們也能夠經過這個結構一窺究竟
{
  isStart: true,
  next: [
    {
      isCollection: true,
      pattern: [Array],
      collectionType: '+',
      next: [Array]
    }
  ]
}
複製代碼

自動機圖例展現

輸入:^[123]+[a]*3$
圖例:

image.png

驗證匹配方法 - isMatch

// use generator to test string
const isMatch = (str, generator) => {
    if(generator.isStart){
        // the start of recursive
        for(const nextGen of generator.next){
            if(isMatch(str, nextGen)) return true;
        }
        return false;
    } else if(generator.isEnd){
        // if generator is end but str is not end return false
        return str.length ? false : true;
    } else {
        if(!str.length){
            return false;
        }
        if(!generator.pattern.includes(str[0])) {
            return false;
        } else {
            const restStr = str.slice(1);
            for(const nextGen of generator.next){
                if(isMatch(restStr, nextGen)) return true;
            }
            return false;
        }
    }
}
複製代碼

這裏其實就是一個遞歸程序:

  • 若是自動機的當前處於起始狀態:不進行匹配,循環匹配 next,只要有一條分支匹配成功,就是合法字符串
  • 若是自動機的當前處於結束狀態:判斷方法傳入的 str 長度是不是 0 ,若是是 0 則表示待匹配字符串也匹配完成了,是合法字符串,反之不合法。
  • 其餘狀況:匹配當前字符是否在 pattern 數組中,若是在就表示當前字符匹配,繼續循環匹配 next,只要有一條分支匹配成功,就是合法字符串

因而
這樣咱們的代碼就完成了!

輸出演示

image.png

結果正確🌟

完整代碼

方便你們複製粘貼或者完整回顧,是否是很貼心❤️

const collectionTypes = ['*', '+'];

// change reg String to Pattern Ojects and return list
const getPatternObjList = (regStr) => {
    const len = regStr.length;
    let patternObjlist = [];
    let isInCollection = false;
    let collection = []; // used to store current collection
    for (let i = 0; i < len; i++) {
        const char = regStr[i];
        if (!isInCollection) {
            // 
            if (char != '[') {
                // single char object
                patternObjlist.push({
                    isCollection: false,
                    pattern: [char],
                    next: []
                })
            } else {
                // char === [ we need to change isInCollection to true
                isInCollection = true;
            }
        } else {
            if (char != ']') {
                collection.push(char);
            } else {
                // ] is the sign end of collection
                isInCollection = false;
                // collectionSign maybe * or + 
                let collectionSign = regStr[i + 1];
                let collectionType = 'COMMON';
                if( collectionSign && collectionTypes.includes(collectionSign) ){
                    collectionType = collectionSign
                    i++;
                }
                patternObjlist.push({
                    isCollection: true,
                    pattern: collection,
                    collectionType,
                    next: []
                })
                collection = [];
            }
        }
    }
    return patternObjlist;
}

// get PatternObj's next
const getNext = (patternObjList, index) => {
    let next = [];
    const len = patternObjList.length;
    for(let i = index + 1; i < len; i++){
        const nextPattern = patternObjList[i]
        next.push(nextPattern)
        if(nextPattern.collectionType != '*'){
            // * need to handle, * is possible no
            break;
        }
    }  
    return next;
}

// change pattern list to regular generator
const getGenerator = (patternObjList) => {
    patternObjList.push({
        isEnd: true,
    }) // the end signal of generator
    let start = {
        isStart: true,
        next:[]
    }; // generator need a 'start' to start valid
    const len = patternObjList.length;
    start.next = getNext(patternObjList, -1);
    for(let i = 0; i < len; i++ ){
        const curPattern = patternObjList[i];
        curPattern.next = getNext(patternObjList, i)
        if(collectionTypes.includes(curPattern.collectionType)){
            curPattern.next.push(curPattern);
        }
    }
    return start;
}

// use reg to get generator and return start Pattern Object
const getGeneratorStart = (reg) => {
    const regStr = reg.slice(1, reg.length - 1);
    const patternObjList = getPatternObjList(regStr);
    const generator = getGenerator(patternObjList);
    return generator;
}

// use generator to test string
const isMatch = (str, generator) => {
    if(generator.isStart){
        // the start of recursive
        for(const nextGen of generator.next){
            if(isMatch(str, nextGen)) return true;
        }
        return false;
    } else if(generator.isEnd){
        // if generator is end but str is not end return false
        return str.length ? false : true;
    } else {
        if(!str.length){
            return false;
        }
        if(!generator.pattern.includes(str[0])) {
            return false;
        } else {
            const restStr = str.slice(1);
            for(const nextGen of generator.next){
                if(isMatch(restStr, nextGen)) return true;
            }
            return false;
        }
    }
}

// the entry function
const testReg = (str, reg) => {
    if (!reg.startsWith('^') || !reg.endsWith('$')){
        // it's not a right reg string
        throw Error('format mismatch!');
    }
    const generator = getGeneratorStart(reg);
    return isMatch(str, generator);
    //console.log(matchStructure)
}
console.log(testReg('2131aa3', '^[123]+[a]*3$'));
複製代碼

章節小結

本章咱們用前面幾章所學的知識實現了一個簡易的正則🌟,當熱真正的正則引擎要複雜的多的多,也會有預編譯等我尚未接觸過的流程。可是文章領進門,修行仍是在我的的,相信你們與我一同完成這個簡易的正則匹配以後也會得到一些解決問題的思路,或者多了一些思考,感謝你們與我一塊兒體驗這個過程,不妨點個贊呀👍 ,或者關注➕ 給我更大的動力,與大家一塊兒學習成長。

結束語

image.png

正則原理淺析章節部份內容參考:正則表達式引擎執行原理——從未如此清晰! 感謝前輩的分享。
感謝母校吉林大學的教材課件~
感謝做者大佬洛竹有關某些特殊內容🐶的經驗分享~
感謝運營姐姐少女騎士的抱枕,讓我戰鬥力滿滿~

最後,我是寒草,一隻草系碼猿🐒,,你們喜歡個人文章不妨關注➕ ,點贊👍 。大家的支持是我最大最大最大的動力~

乾坤未定,你我皆是黑馬🔥 蔥鴨🦆

相關文章
相關標籤/搜索