JavaScript >> Javascript 文檔 >  >> Tags >> regex

使用 XRegExp.build 創建語法正則表達式

最近,我為 XRegExp v2.0(目前在 GitHub 上的候選發布階段)添加了三個新插件:

  • XRegExp.build — 允許您使用命名子模式構建正則表達式。靈感來自 Lea Verou 的 RegExp.create。
  • XRegExp 原型方法 — 添加一組由 XRegExp 正則表達式繼承的方法:apply , call , forEach , globalize , xexec , 和 xtest .這些也適用於由 XRegExp 複製的本機 RegExp。
  • XRegExp Unicode 屬性 — 包括 Level-1 Unicode 支持所需的其餘九個屬性(除了其他 XRegExp 插件中已有的屬性):Alphabetic , Uppercase , Lowercase , White_Space , Noncharacter_Code_Point , Default_Ignorable_Code_Point , Any , ASCII , 和 Assigned .

直接進入一些代碼,下面演示瞭如何使用新的 XRegExp.build 插件來創建匹配實數的語法模式:

// Approach 1: Make all of the subpatterns reusable

var lib = {
    digit:             /[0-9]/,
    exponentIndicator: /[Ee]/,
    digitSeparator:    /[_,]/,
    sign:              /[+-]/,
    point:             /[.]/
};
lib.preexponent = XRegExp.build('(?xn)\
    {{sign}} ?              \
    (?= {{digit}}           \
      | {{point}}           \
    )                       \
    ( {{digit}} {1,3}       \
      ( {{digitSeparator}} ?\
        {{digit}} {3}       \
      ) *                   \
    ) ?                     \
    ( {{point}}             \
      {{digit}} +           \
    ) ?                     ',
    lib
);
lib.exponent = XRegExp.build('(?x)\
    {{exponentIndicator}}\
    {{sign}} ?           \
    {{digit}} +          ',
    lib
);
lib.real = XRegExp.build('(?x)\
    ^              \
    {{preexponent}}\
    {{exponent}} ? \
    $              ',
    lib
);

// Approach 2: No need to reuse the subpatterns. {{sign}} and {{digit}} are
// defined twice, but that can be avoided by defining them before constructing
// the main pattern (see Approach 1).

var real = XRegExp.build('(?x)\
    ^              \
    {{preexponent}}\
    {{exponent}} ? \
    $              ',
    {
        preexponent: XRegExp.build('(?xn)\
            {{sign}} ?              \
            (?= {{digit}}           \
              | {{point}}           \
            )                       \
            ( {{digit}} {1,3}       \
              ( {{digitSeparator}} ?\
                {{digit}} {3}       \
              ) *                   \
            ) ?                     \
            ( {{point}}             \
              {{digit}} +           \
            ) ?                     ',
            {
                sign:           /[+-]/,
                digit:          /[0-9]/,
                digitSeparator: /[_,]/,
                point:          /[.]/
            }
        ),
        exponent: XRegExp.build('(?x)\
            {{exponentIndicator}}\
            {{sign}} ?           \
            {{digit}} +          ',
            {
                sign:              /[+-]/,
                digit:             /[0-9]/,
                exponentIndicator: /[Ee]/
            }
        )
    }
);

reallib.real 上述代碼創建的正則表達式是相同的。以下是它們匹配的幾個字符串示例:

  • -1
  • 1,000
  • 10_000_000
  • 1,111.1111
  • 01.0
  • .1
  • 1e2
  • +1.1e-2

以下是一些不匹配的字符串示例:

  • ,100
  • 10,00
  • 1,0000
  • 1.
  • 1.1,111
  • 1k

像這樣的語法模式更易於閱讀、編寫和維護,並且看起來更像是 BNF,而不是一些人討厭的典型的行嘈雜的正則表達式。

注意 {{…}} 此處顯示的語法僅適用於由 XRegExp.build 創建的正則表達式 .命名子模式可以作為字符串或正則表達式對象提供(字符串傳遞給 XRegExp 構造函數)。提供的模式自動包裝在 (?:…) 因此它們可以被量化為一個單元,並且不會以意想不到的方式乾擾周圍的模式。前導 ^ 和尾隨未轉義的 $ 如果兩者都存在,則從子模式中剝離,這允許嵌入獨立有用的錨定模式。可以通過 XRegExp.build 提供標誌 的可選第三個(flags ) 爭論。提供的子模式使用的本機標誌被忽略以支持 flags 爭論。外部模式和提供的子模式中的反向引用會自動重新編號,以便在更大的組合模式中正常工作。語法 ({{name}}) 通過 (?<name>{{name}}) 作為命名捕獲的簡寫 . {{…}} 語法可以用反斜杠轉義。

稍微嘗試一下上面的細節,我想你會發現 XRegExp.build 可以直觀地工作,並且可以處理你扔給它的任何邊緣情況。

隨意分享您如何更改上述正則表達式。並確保在 GitHub 上查看精美的新 XRegExp v2.0 及其升級插件。


Tutorial JavaScript 教程
  1. ⚡ 10 個 Vim + VSCode 技巧將提高您的工作效率

  2. 反向開關?

  3. 快速解決方案:獲取元素上的鼠標位置,而不考慮定位

  4. 使用 Google Libraries API 加載 jQuery

  5. JavaScript 基礎 – 了解基本 JavaScript 數據類型 Pt.2

  6. 頁面加載時如何運行函數?

  7. 為 React Native 提供更好的陰影生成器📱

  1. 獲取選定文本的父元素

  2. Vue 組件 FTW - Toasted

  3. 5 個 jQuery Mobile Gallery 插件

  4. Charts for Charity:用 100% 的收益捐贈,為 JSCharting 支付你想要的錢!

  5. 刪除按鈕刪除所有的孩子,而不是只有一個有鍵

  6. 構建 WordPress 驅動的前端:簡介和設置

  7. Chrome-Extension:遍歷所有標籤?

  1. 程序員可以從說唱歌手那裡學到什麼

  2. 我忘了 el.outerHTML 所以我做了這個

  3. 正在考慮對您的全棧應用程序實施身份驗證?從這裡開始

  4. 從 CSV 創建 MERN 應用程序