2012年10月30日

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

A+
相信正規表示式對很多學習 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. 一些正規表示式的常用例子可參考「這個網站」,包含了 email 、網址判定等等。

3. 「正規表示式圖解


Javascript 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。