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

RegexPal:重新發明了基於 Web 的正則表達式測試

是的,我知道,還有許多其他 JavaScript 正則表達式測試器可用。為什麼我還要創造另一個? RegexPal 為此類基於 Web 的應用程序帶來了幾項新功能,在我(有偏見的)看來,它比目前可用的其他應用程序更易於使用且對學習正則表達式更有幫助。此外,對於我經常使用的數據類型,大多數其他此類工具都非常慢。當顯示 10 個匹配項時,它們可能看起來很快,但是 100、1000 或 5000 個呢?嘗試在您最喜歡的現有基於 Web 的工具中生成 5,000 個匹配項(這很容易使用任何字符模式,例如點),並查看您的瀏覽器是否會恢復(懷疑)。同樣的任務用 RegexPal 不到半秒,更重要的是,結果會在您輸入時覆蓋文本。

目前,RegexPal 缺乏功能,但這裡有一些亮點:

  • 實時正則表達式語法突出顯示,具有前後上下文感知功能。
  • 使用交替樣式快速匹配突出顯示。
  • 反向匹配(匹配正則表達式不匹配的任何文本)。

我不確定何時會添加其他功能,但我正在考慮很多事情。如果你有什麼想看的,請告訴我。

需要注意的幾點:

  • 我用於可滾動富文本編輯的方法(我在其他地方沒有見過)速度很快,但有點問題。 Firefox 2 和 IE7 的問題最少,但它或多或少也適用於其他瀏覽器。
  • 語法突出顯示通常將導致跨瀏覽器不一致的極端情況問題標記為錯誤,即使它們是瀏覽器錯誤或 ECMA-262 v3 中缺少行為文檔的結果。
  • 跨平台/瀏覽器有不同形式的換行符。例如,Firefox 使用 \n 即使在幾乎所有程序都使用 \r\n 的 Windows 上 .這可能會影響某些正則表達式的結果。

至少對我來說,RegexPal 玩起來很有趣,它的即時反饋有助於讓學習正則表達式變得容易。我鼓勵你自己去玩它並發現它的結果,但是對於好奇的人,我會繼續漫無目的......

正則表達式語法解析(語法高亮所需要的)有點複雜,因為涉及到大量的前後上下文感知問題。以模式 \10 為例 .什麼意思?

  • 反向引用 10,如果不在字符類中,並且在該點之前打開至少 10 個捕獲組。
  • 反向引用 1,後跟文字“0”,如果不在字符類中並且在該點之前打開 1 到 9 個捕獲組。
  • 八進製字符索引 10(十進制 8),如果在字符類中,或者在該點之前沒有打開捕獲組。
  • 三個文字字符“\”、“1”和“0”,如果前面有一個未轉義的“\”字符。
  • 在其他幾種情況下的標記不完整。

另一個例子是“-”字符。在字符類之外它總是一個字面連字符,但在字符類內部……

  • 它在標記之間創建一個範圍,如果:
    • 類中有前後標記,或者它前面有一個標記,並且是未封閉字符類中的最後一個字符(注意事項後跟)。
  • 這是一個文字字符,如果:
    • 它是類中的第一個或最後一個字符。
    • 前面有一個未轉義的“\”。
    • 它遵循一個標記,該標記是范圍的結束索引。
    • 它跟在創建範圍的連字符之後。
  • 如果出現以下情況,則為錯誤:
    • 它以反向字符索引順序在標記之間創建一個範圍(例如,z-a , @-! , \uFFFF-\b , 或 \127-\cB )。
    • 否則它會創建一個範圍,但它後面或前面有一個表示多個字符索引的標記(例如,\d )。事實上,在某些情況下,瀏覽器認為這意味著連字符應被視為文字,但瀏覽器錯誤導致處理不一致,因此 RegexPal 將其標記為範圍錯誤。

這裡還有一些不是錯誤但被標記為錯誤的東西:

  • 空的頂級替換,除了在模式的末尾,在突出顯示匹配項時會忽略此類替換,以便在用戶正在構建正則表達式時創建不那麼令人驚訝的體驗。空的頂級交替被標記為錯誤,因為它在該點有效地截斷了正則表達式(因為它將始終匹配)。如果真的需要零長度的頂級更改,還有其他簡單的方法可以更明確地做到這一點。
  • 環視量詞(例如,(?!x)+ 中的加號 )。對於某些正則表達式庫(例如 PCRE),這將是一個實際錯誤,儘管在大多數 Web 瀏覽器中並非如此,但此類構造沒有任何價值。因此,RegexPal 將此類量詞標記為錯誤,因為它們幾乎可以肯定是用戶錯誤。
  • \c 當後面沒有 A–Z 時,\x 當後面沒有兩個十六進製字符和 \u 當後面沒有四個十六進製字符時。儘管這些不會導致大多數瀏覽器拋出錯誤,但它們的跨瀏覽器處理方式不一致,因此被標記為錯誤。即使不存在跨瀏覽器問題,它們也幾乎肯定是用戶錯誤。

感謝 osteele.com 的簡短快速參考的文本,以及來自 JGsoft 的 RegexBuddy 對 RegexPal 的許多功能的啟發。 RegexPal 這個名字在某種程度上是對 RegexBuddy 的致敬,但也是因為它同時包含“regex”和“regexp”而被選中。


Tutorial JavaScript 教程
  1. 如何在 JavaScript 對象文字中使用變量作為鍵?

  2. npm 8 有什麼新功能?

  3. NotionOps - 第 1 部分:演示和項目設置

  4. NPM 和使用 Node 作為命令行工具

  5. Microsoft Edge 中的屏幕截圖

  6. Babel 不編譯供應商夾頭

  7. 高級 TypeScript 練習 - 答案 5

  1. 為什麼 Immer.js 是在 React 中加強不可變性的絕佳選擇

  2. highcharts 將多個值傳遞給工具提示

  3. 多次點擊提交後如何只提交一次表單?

  4. Redux Cool New 2021 工具包

  5. React 項目想法,以及如何發明自己的想法

  6. 配置 Webpack 和 React 第 2 部分 - 🗒 初始源代碼。

  7. Esbuild,令人難以置信的快速 💨 和有前途的打包工具 📈!

  1. 動態常見問題解答頁面 - 可訪問性和漸進增強的課程

  2. Taikos 接近選擇器

  3. 作為開發人員最值得聆聽的 10 個播客

  4. 回歸基礎——純函數