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

P.S. 我們的每個動作在最下方都會有即時提示，"Generated regular expression" 會產生當下的正規表示式；"Textual meaning of regular expression" 會顯示 ... 服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2012年10月30日 正規表示式線上自動產生器(以Javascript舉例) WayneFu 電腦-網頁設計-Javascript筆記 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 相信正規表示式對很多學習js的人而言是頭痛的一塊，而我也不例外。

各種參數的定義已經夠難記了，還有各種符號及括號要分辨、還有需要使用反斜線的字元要注意，就算這次記住了，等下次要用時大概也差不多忘了。

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

以下提供兩個操作此工具來產生正規表示式的實例，相信對上手有很大的幫助。

使用這個工具另外的好處是，自己操作的範例看多了之後，一些常用的參數自然而然就能記起來了。

一、刪除HTML標籤 1.處理字串規則：一開始先用簡單的例子，「最新回應更新版」所修正的一個bug跟刪除超連結有關，我使用的方法為「將留言字串中所有的HTML標籤全部刪除」。

要達成此任務需要將從左箭頭""之間的字串刪除，如此就能完全去除所有的HTML標籤。

而使用正規表示式來處理大概是以下的步驟：   (1)設定開頭尋找""字元 接下來請看使用此線上工具的步驟。

2.操作步驟： (1)設定開頭尋找""，可以按下最右邊的Addfiled，再填入另一個字元">"，此為"或"(or)這個功能的操作方法。

C：這一欄設定重複的次數，由於""之間的所有字元，重複的次數很重要，必須選"Anynumberoftimesuntilnextgroup(non-greedy)"，代表會比對字串直到找到">"為止。

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

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

(3)結尾尋找">"字元：畫面自動產生Group3後，請按上圖A～D步驟操作── A：請小心，仍然必須選"followedby"。

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

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

C：同步驟(1) D：完成所有步驟，到"Generatedregularexpression"領取此任務的正規表示式── /<.>/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：此任務在網址字串中只需比對一次參數就好，因此不需勾選"Findallmatches"；而此任務會用到英文字母"s"，因此勾選"Case-insensitive"。

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

(2)接續為兩個數字：畫面自動產生Group2後，請按上圖A～D步驟操作── A：按照預設值 B：本步驟為接續兩個數字，因此選擇"anydigit0-9"。

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

其實在本例中，選"2ormoretimes"結果也一樣，或是選"Between2and4times"(2~4位數)是最嚴謹的。

在圖中我用的方式不嚴謹，不過是最短的寫法。

當然是建議使用嚴謹的寫法，幫助自己釐清邏輯。

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

(3)接續為任何數字及文字、任意位數：畫面自動產生Group3後，請按上圖A～D步驟操作── A：按照預設值 B：若是採嚴謹的方式，操作步驟比較多，必須先用一個field選擇任何數字、再按Addfield選擇任何字母。

圖中我選擇"anycharacter"代表任何字元，這是偷懶的作法，因為網址的字元不複雜，在本任務中對結果不影響。

實作上建議還是以嚴謹的作法為主，才不會常常要抓bug。

C：重複的位數同前例，選擇"Anynumberoftimesuntilnextgroup(non-greedy)"。

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

(4)結尾尋找"/"字元：畫面自動產生Group4後，請按上圖A～D步驟操作── A：同前例採預設值 B：同步驟(1)，填入"/"即可。

C：同步驟(1) D：完成所有步驟，到"Generatedregularexpression"領取此任務的正規表示式── /\/s\d{2}.*?\//i 三、正規表示式相關工具 最後提供一些相關輔助工具供參考── 1.線上驗證網站：完成以上的練習後，可以利用「這個網頁」提供的線上驗證功能，試試各種字串看能否符合自己寫的正規表示式。

2.「正規表示式圖解」 Javascript相關筆記： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-網頁設計-Javascript筆記 WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 沒有留言: 張貼留言注意事項：◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (18) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (6) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (6) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (6) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (8) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (7) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP