這篇看似很無聊，
但看完你不會後悔的

 

以下文章都簡稱Regex, 然後用js做範例

 

Regex ＝ Regular Expression縮寫，中文是正規表達式
他不是一種程式語言，
是以一組特定字元符號描述字串樣式規則的記述語法(誒是不是不懂XD)
而且幾乎通用在任何語言裡(Javascript, php, ruby, python…)

 

其實我也是工作了好幾年之後，
才第一次知道Regex是什麼東西，
Regex是一門博大精深的學問，小妹我也只會簡單的，
但簡單的Regex就能解決許多專案中的問題
所以就想來分享給大家

http://regexone.com/

初學者可以玩玩看這個網站，
玩過一次之後 對Regex就可以有一定認識，
不過因為都是英文，所以我還是來整理一下

 

註： 字元: 單一字,如’a’
字串: 一串字如’apple’

 

[abc]  → 抓單一個字元: a, b, or c
[^abc]  → 抓任何單一字元除了 a, b, or c
[a-z]  → 抓任何小寫a-z之間的字元
[a-zA-Z]  → 抓任何小寫a-z,大寫A-Z之間字元

 

See the Pen Regex by hannahpun (@hannahpun) on CodePen.

\d  → 任何數字字元
\D  → 任何不是數字字元
\w   → 任何字串+底線，其實等於[a-z\dA-Z_]
\W  → 跟\w相反
\s  → 空白鍵
\S  → 任何不是空白鍵字元
.  → 任何字串
\.   → .這個符號

 

^ → 字串開頭位置

$ → 字串結尾位置

 

(…) → 抓()裡面的字串

a|b  → a 或 b, 它可以是一串字串
\b  → 在邊界的字元, ex hello.pdf, h跟p都是邊界字元
a?  → 抓0個或1個的a , ex 我想抓a跟(a), /(?a/)?
a*  → 抓0以上的a, ex 抓hello全部, (\w*)
a+  → 抓1以上的a

 

a{3}  → 抓3個a
a{3,}   → 抓3個以上a
a{3,6}  → 抓3-6個之間的a

 

好，是不是已頭昏了，
讓我們來玩有趣一點的東西

現在有一個字串，讓我們來抓電話號碼跟email

See the Pen Regex phone by hannahpun (@hannahpun) on CodePen.

email:  ([\w\-]+@[\w\.]+)

[\w\-] → 抓任何單一字元跟-  // h,a,n,n,a,h
[\w\-]+ → 抓成字串 // hannah
([\w\-]+@[\w\.]+) → 把email整個包起來抓

 

phone: \(?\d{3}\)?[\s\-]\d{3}[\-\s]\d{4}

\d{3} → 3個數字 // 111
\(?\d{3}\)? →  3個數字可以被()包起來也可以不要 // 111 or (111)
\(?\d{3}\)?[\s\-] →  3個數字後可能會是-或空格隔開 // 111-, 111
\(?\d{3}\)?[\s\-]\d{3} → 再接3個數字 // 111-222
\(?\d{3}\)?[\s\-]\d{3}[\-\s] → 後面可能會是-或空格隔開 // 111-222-, 111-222
\(?\d{3}\)?[\s\-]\d{3}[\-\s]\d{4} →  最後再接4個數字 // 111-222-3333

 

不但如此，你還可以運用在你的sublime裡
例如，今天你要把網頁所有a tag href 裡面東西換成#
你的程式碼裡面可能有
<a href=“register.html”>  <a href=“contact.php”>  <a href=“privacy”>…
這時候用Find and Replace是行不通的，因為每個href的值都不同
Regex就派上用場了

只要簡單打上  <a href=”(\w+.\w+)”
就可以找到所有 a href了

 

p.s 記得紅色框框那個要按下去才能用Regex