正規表示式線上自動產生器(以Javascript舉例)

相信正規表示式對很多學習 js 的人而言是頭痛的一塊，而我也不例外。各種參數的定義已經夠難記了，還有各種符號及括號要分辨、還有需要使用反斜線的字元要注意，就算這次記住了，等下次要用時大概也差不多忘了。

直到最近發現國外有高手寫了個正規表示式的「線上自動產生器」，總算讓我不再苦惱，趕快把這個工具的使用方法記錄起來，方便以後查詢。

以下提供兩個操作此工具來產生正規表示式的實例，相信對上手有很大的幫助。使用這個工具另外的好處是，自己操作的範例看多了之後，一些常用的參數自然而然就能記起來了。


一、刪除 HTML 標籤

1. 處理字串規則：一開始先用簡單的例子，「最新回應更新版」所修正的一個 bug 跟刪除超連結有關，我使用的方法為「將留言字串中所有的 HTML 標籤全部刪除」。要達成此任務需要將從左箭頭 "<" 一直到右箭頭 ">" 之間的字串刪除，如此就能完全去除所有的 HTML 標籤。而使用正規表示式來處理大概是以下的步驟：

  (1) 設定開頭尋找 "<" 字元
  (2) 接續為任何字元、任意位數
  (3) 結尾尋找為 ">" 字元

接下來請看使用此線上工具的步驟。


2. 操作步驟：

(1) 設定開頭尋找 "<" 字元：進入「線上自動產生器」 網站後，請看下圖並依照以下 A～E 步驟操作──


A：在 Group1 的第一個下拉選項，預設值 "Match a string which contains" 代表「要比對的目標字串裡，任何一處符合正規表示式的條件，都會篩選出來」，本任務選預設值即可；另一個常用的選項 "Match a string which starts with" 代表「要比對的目標字串，從開頭的字元起就要符合正規表示式的條件，才會篩選出來」。

B：接著 field 1 填入開頭字元 "<" (右邊選擇預設值 "Free Text")，右邊欄位的選項下個例子再談。

而如果有多種可能性時，例如尋找開頭字元可能是 "<" 也可能是 ">"，可以按下最右邊的 Add filed，再填入另一個字元 ">"，此為 "或"(or) 這個功能的操作方法。

C：這一欄設定重複的次數，由於 "<" 只會比對一次，因此請選第一個選項，預設值為 1 次；若超過 1 次則直接填入次數即可。

D：設定正規表示式的參數，由於此任務需要在留言字串中找出 "所有" 的 HTML 標籤，因此勾選 "Find all matches"，不勾選表示找到第一個符合的字串後即停止；另外一個常用的選項 "Case-insensitive" 代表不區分英文大小寫，由於此任務的正規表示式完全沒用到英文字母，所以不需勾選。

E：第一個步驟完成後，按下 "Add group"，設定下個步驟。

P.S. 我們的每個動作在最下方都會有即時提示，"Generated regular expression" 會產生當下的正規表示式；"Textual meaning of regular expression" 會顯示代表的意義。



(2) 接續為任何字元、任意位數：畫面自動產生 Group 2 後，請按上圖 A～D 步驟操作──

A：按照預設值 "followed by" 即可

B：此欄位必須選擇所有字元，在下拉選單中找到 "any character" 並選取即可；在下拉選單中還可看到許多常用的選項，例如英文字母可選 "any letter a-z"、英文小寫可選 "any lowercase letter a-z"、數字可選 "any digit 0-9" 等等。

C：本任務要選擇 "<" 與 ">" 之間的所有字元，重複的次數很重要，必須選 "Any number of times until next group (non-greedy)"，代表會比對字串直到找到 ">" 為止。

如果不小心選了 "Any number of times (greedy)"，那代表就算找到了 ">" 也不會停止，會一直找到最後一個 ">" 才為止，這樣選出來的字串就亂七八糟了。

D：完成後再按下 "Add group"，設定最後一個步驟。



(3) 結尾尋找 ">" 字元：畫面自動產生 Group 3 後，請按上圖 A～D 步驟操作──

A：請小心，仍然必須選 "followed by"。雖然正規表示式的結尾是 ">" 字元，但不能選 "ending in"，這代表「要比對的目標字串，最後必須以 ">" 結尾才符合正規表示式的條件」，這樣在本任務會篩選不出結果的。

B：同步驟 (1)，填入 ">" 即可。

C：同步驟 (1)

D：完成所有步驟，到 "Generated regular expression" 領取此任務的正規表示式──

/<.*?>/g


二、修改 PICASA、Blogger 圖檔的真實尺寸

1. 圖檔網址原理：第二個例子稍微進階一點，「最新回應更新版」所新增的一個功能為，將頭像圖案的真實尺寸改小。修改 PICASA、Blogger 圖檔網址的原理在「熱門文章＋任意尺寸縮圖」有詳述。以我的頭像網址為例：

http://lh6.googleusercontent.com/-7j1nFs9KS6o/AAAAAAAAAAI/AAAAAAAAE2E/ENH-_XGu7tw/s250/photo.jpg
網址裡面的參數 "s250" 後面的數字 "250" 代表頭像寬度的 px 值，改變圖檔真實尺寸的關鍵就是更改 "250" 這個數值。

2. 處理字串規則：由於每個人上傳的 Blogger 帳號頭像圖檔大小不一、形狀也不同，圖片網址參數可能會是 "s1600"、"s72"、"s500-c" 等各種可能性。另外，如果處裡正規表示式從 "s" 字母開頭，怕會改到網址其他部分有含 "s" 字母的字串，因此我用以下步驟來設定正規表示式，來含括各種可能性：

  (1) 設定開頭尋找 "/s" 字串
  (2) 接續為兩個數字(最少會有兩位數，最多四位數，不太可能只有個位數)
  (3) 接續為任何數字及文字、任意位數
  (4) 結尾尋找 "/" 字元

如果頭像寬度要改為 35px，那麼就是將正規表示式的內容置換為 "/s35/" 這樣的字串即可。


3. 操作步驟：


(1) 設定開頭尋找 "/s" 字串：請看上圖並依照 A～E 步驟操作──

A：採預設值

B：填入開頭字元 "/s"

C：選 1 次

D：此任務在網址字串中只需比對一次參數就好，因此不需勾選 "Find all matches"；而此任務會用到英文字母 "s"，因此勾選 "Case-insensitive"。

E：按下 "Add group"，設定下個步驟。


(2) 接續為兩個數字：畫面自動產生 Group 2 後，請按上圖 A～D 步驟操作──

A：按照預設值

B：本步驟為接續兩個數字，因此選擇 "any digit 0-9"。

C：兩位數就必須填入 "2" 次。

其實在本例中，選 "2 or more times" 結果也一樣，或是選 "Between 2 and 4 times"(2~4位數) 是最嚴謹的。在圖中我用的方式不嚴謹，不過是最短的寫法。當然是建議使用嚴謹的寫法，幫助自己釐清邏輯。

D：按下 "Add group"，設定下一個步驟。


(3) 接續為任何數字及文字、任意位數：畫面自動產生 Group 3 後，請按上圖 A～D 步驟操作──

A：按照預設值

B：若是採嚴謹的方式，操作步驟比較多，必須先用一個 field 選擇任何數字、再按 Add field 選擇任何字母。圖中我選擇 "any character" 代表任何字元，這是偷懶的作法，因為網址的字元不複雜，在本任務中對結果不影響。實作上建議還是以嚴謹的作法為主，才不會常常要抓 bug。

C：重複的位數同前例，選擇 "Any number of times until next group (non-greedy)"。

D：按下 "Add group"，設定下一個步驟。


(4) 結尾尋找 "/" 字元：畫面自動產生 Group 4 後，請按上圖 A～D 步驟操作──

A：同前例採預設值

B：同步驟 (1)，填入 "/" 即可。

C：同步驟 (1)

D：完成所有步驟，到 "Generated regular expression" 領取此任務的正規表示式──

/\/s\d{2}.*?\//i

三、正規表示式相關工具

最後提供一些相關輔助工具供參考──

1. 線上驗證網站：完成以上的練習後，可以利用「這個網頁」提供的線上驗證功能，試試各種字串看能否符合自己寫的正規表示式。

2. 「正規表示式圖解」

Javascript 相關筆記：