正規表示式 (Regular Expression)

-

正規表示式 (Regular Expression)能為你檢查是否為全英文字串！ 很專業！

正規表示式 (Regular Expression)能為你檢查是否為指定結構字串！ 很貼心！

正規表示式 (Regular Expression)能為你找出複雜性組成字串！ 很厲害！

What is it?

Regular Expression 又稱正規表達式、正規表示法、規則運算式、常規表示法。是一門電腦科學，是用來比對字串是不是有符合正確的格式。

語法簡單，功能強大，最重要的是！幾乎已知的語言都有支援他。包誇了各大編譯器皆有支援。

開始之前

讓我們擁有一個實用的線上工具 regex101。

您可以在 TEST STRING 的地方輸入 focus，在於 REGULAR EXPRESS 的地方輸入 focus 或其中一字元都行(注意大小寫)。是否被選起來了呢！


下面的教學皆可直接扔進線上工具內使用哦！

  • 注意: 正規表示法使用時前後須由 / 包起來(/a/)，但該工具 REGULAR EXPRESS 中輸入時不用。

語法

字元

a: a字元
.: 所有可能的字元(字母、數字或符號)。
RegExp 說明 範例
/a/ 含有字元 a a , ab , ba , bbacc
/./ 任意單一字元 a , ab , ba , bbccc , 哈囉
/a./ 含有字元 a 且後面接任意單一字元 a1 , ab , a囉

次數

*: 比對前一個字串 0 次或是多次。
?: 比對前一個字串或是不比對。
+: + 跟 * 類似，差別在於它至少要與前一個字比對一次或以上。

{n,m}: 指定出現次數，n 為最小次數 m 為最大次數。
{2}: 2 次。
{2,}: 2 次以上。
{2,5}: 2 到 5 次。
RegExp 說明 範例
/ba*c/ bc 字元中間，a 字元出現 0 次或是多次。 bc , bac , baaac
/ba?c/ bc 字元中間，a 字元出現 0 次或一次。 bc , bac
/ba+c/ bc 字元中間，a 字元出現 0 次或一次。 bac , baaac
/ba{2}c/ bc 字元中間，a 字元出現 2 次。 baac
/ba{2,}c/ bc 字元中間，a 字元出現 2 次以上。 baac , baaac
/ba{2,5}c/ bc 字元中間，a 字元出現 2 - 5 次。 baac , baaaaac

條件

^: 字串開頭。
$: 字串結尾。
|: 前字串或者後字串。
\: 跳脫特殊字元。 若要比對正規表示式內部特殊字元(*?+{}[] 等...)，需用反斜線來跳脫這些特殊字元。
RegExp 說明 範例
/\^ab/ ab 開頭字串。 ab , abc
/ab$/ ab 結尾字串。 ab , cab
/acc bcc/ acc 字串或 bcc 字串。 aacc , abcc
/a\*/ a*字串。 a* , aa* , a*a

多字元篩選

[ ] : [] 內所包含字元。
[^] : 不存在 [] 內的任何字元。
[-] : 連號字元(0-9 a-z A-Z)。
RegExp 說明 範例
/[abc]/ abc 任一字串。 abc , ade , bde , cde
/[\^abc]/ 非 abc 任一字串。 def , ggg , ddd
/[0-9]/ 數字 0 - 9 0123456789 , a0b , 9a8n

  • 在 [ ] 後面接上 {n}，則會取得 [] 中指定數量組合(不分順序)。

    EX: [abc]{2} : `ab` , `cb` , 'ac'

特殊字元

\d: 任何數字字元，等同 [0-9]
\D: 任何非數字字元，等同 [^0-9]
\w: 任何數字字母底線，等同 [A-Za-z0-9_]
\W: 任何非數字字母底線，等同 [^A-Za-z0-9_]
\s: 任何空白字元(空白,換行,tab)，等同 [ \f\n\r\t\v]
\S: 任何非空白字元(空白,換行,tab)，等同 [^ \f\n\r\t\v]

實例

西元生日: 四個數字開頭 - 兩個數字 - 兩個數字結尾
RegExp:  /^\d{4}-\d{2}-\d{2}$/

身分證字號: 英文字母開頭(大寫) 九個數字
RegExp:  /^[A-Z]\d{9}$/

手機號碼: 國碼開頭(09) 八個數字
RegExp:  /^09\d{8}$/

同場加映

Regex matching line not containing the string
不包含指定的字元！

RegExp: ^((?!YoYo).)*$
  • [ ] Hello YoYo!
  • [x] Hello Hank!

保留差異字元取代

  • 筆者覺得這個超重要，大家一定要會。

在正規表示式中被 () 所選起來的參數可以被保留至變數中。
保留變數會由 $1 $2 $3 所使用。

# 一段句子中，若只替換問候語而保留人名。
Hello, YoYo!
Hello, Hank!

搜尋 RegExp:  /Hello, (.*)!/
取代 RegExp:  /Shit, $1!/

# 輸出結果
Shit, YoYo!
Shit, Hank!

什麼？ 你問我這有什麼用？
筆者遇到的問題是，因為語言版本的關係。要將程式內的變數使用 {} 替換為 [];

Ex:
$str{0};
$str{1};
$str{2};
$str{3};

$str{'name'};
$str{'email'};

總不可能要我一個一個去替換吧！！
這邊考考各位，要怎麼一組替代語法將 $str{} 替換成 $str[] ！
筆者的答案在下方哦 ※1。

結語

Regular Expression 是非常好用的工具，且應用範圍很廣。編譯器對專案全區域搜尋、各程式語言內部使用設置是資料庫應用都可以做出很好的工作效率。

這篇只是筆者對基本 Regular Expression 的介紹。
大家能在利用網路資源，進行更深入的學習。

※1:

搜尋 RegExp:  \$str\{([^\}]*)\}
取代 RegExp:  \$str\[$1\]
​


留言

張貼留言

這個網誌中的熱門文章

PHP OO 基礎教學

-
PHP OO 基礎教學 此篇教學只是物件導向的基礎與實作，內容只包含類別與物件的操作，讓不熟悉類別的人可以初識物件導向的好處，並且了解物件與類別的特性與關係。 認識物件導向 Object Oriented: 物件導向是一種寫程式的方式，他傾向讓開發者將類似或有關聯性的工作或屬性組織到 類別(class) 裡面。進而讓程式遵循 不重複原則 don’t repeat yourself (DRY) ，且更容易維護。 “Object-oriented programming is a style of coding that allows developers to group similar tasks into classes.” 一、 認識物件(Object)與類別(Class) - Understanding Objects and Classes 首先，先來了解 物件(Object) 與 類別(Class) 的功能及用途。 類別(Class)，可以比喻為一棟建築的設計藍圖，清楚的定義了建築的結構及形狀。 物件(Object)，可以比喻為一棟真的房子， 物件是類別的實例化 。 而 資料(Data) 就是房子所需要的材料(如 鋼筋、電線、混泥土)若沒有依照 設計藍圖(類別Class) 來組裝，那材料就僅僅是一堆材料。 但當 材料(資料Data) 依照 設計藍圖(類別Class) 來實作後，那這些 材料(資料Data) 就會變成一個有組織且有用的 房子(物件Object) 類別定義了結構以及行為，並且用這些東西打造物件。當多個物件都是由同一個類別產生出來時，每個物件都是一個獨立的個體，且不相依賴的。 二、建立類別 Class 建立類別的語法很簡單，使用 class 來定義一個類別，然後在類別名稱後面再加上 大括號{} <?php class MyClass { // 類別的屬性與方法要在大括號裡面宣告。 // Class properties and methods go here } 建立類別後，可以使用 new 關鍵字來實例化類別，並存到一個變數上。 $obj = new MyClass(); 使用 var_dump 來查看物件內容。 var_d...
閱讀完整內容

HTML JS 動態顯示 input file 選取內容

-
使用 HTML 取得本地檔案 <input type="file" id="testFile" /> File API  可以從  File  物件中讀取  FileList  ， FileList  內包含使用者所選取的檔案。 如果使用者只選擇一個檔案，那麼我們只需要考慮第一個檔案物件。 使用 DOM 獲取選擇的檔案 HTML: <input type="file" id="testFile" /> JS: var file = document.getElementById('testFile').files[0]; 使用  JQUERY  獲取選擇的檔案 HTML: <input type="file" id="testFile" /> JS: var file = $('#testFile').get(0).files[0]; 使用 change event 獲取選擇的檔案 HTML: <input type="file" id="testFile" onchange="selectFile(this.files)" /> JS: function selectFile(files) { var file = files[0]; } 獲得選取的檔案資訊 上述的例子顯示獲取在檔案清單裡所有檔案物件的方法。 File  提供三個包含檔案重要訊息的屬性。 name : 唯讀的檔案名稱，並未包含檔案路徑。 size : 為 64 位元的整數，用以表示檔案的 byte 的長度。 type : 為唯讀字串。表示檔案的 MIME-type 。若是無法取得檔案的 Mime-type ，則其值會是一個空字串 “”。 使用 FileReader 讀取文件內容 讀取文字 HTML: <input type="file" onchange="selectTextFile(this.files)" /> <p id="showText">...
閱讀完整內容

Vue.Js 介紹[1]

-
Vue.Js 是什麼? Vue(讀音 vjuː，類似 view )，是一套構建用戶界面的 漸進式框架 (The progressive framework)。與其他大型框架不同的是，Vue被設計為可由底向上逐漸應用。Vue的核心只關注圖層，不僅易於上手，還便於與第三方套件項目整合。 另一方面，當與現代化工具鍊結合使用時Vue能對html進行高度渲染，也完全能為復染的單頁應用提供驅動。 如果你剛開始學習前端開發(html、CSS、JavaScript)，將框架作為學習的第一步可能不會是個好主意。 建議掌握好基礎知識在進行較複雜的框架應用學習。 起步 首先須建立一個可執行頁面檔案並載入vue.js。 基本php檔案 教學開發筆者使用CDN Vue.Js做線上載入動作。 相關網址可至 CDN Vue.Js 自行挑選及使用。 <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> </head> <body> </body> </html> 聲明式渲染 Vue.js的核心採用簡潔的模板語法來將數據渲染進DOM的系統。 先建立相關初始介面。 div: <div id="app"> {{ message }} </div> script: var app = new vue({ el: '#app' data: { message: 'Hello Vue!' } }); 組合起來大概長這樣: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script...
閱讀完整內容