iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

30天前端網頁技術超入門介紹系列 第 16

Day16. 正規表達式

  • 分享至 

  • xImage
  •  

正規表達式從這個名詞來看應該是看不出他想表達甚麼啦...不過讀者應該也有思考過表單驗證時的手機、信箱、信用卡等要怎麼去判斷吧?正規表達式就是可以拿來處理這些事情的東西。

其他用途的話我目前還不太清楚,不過上述是比較常見的情況~

宣告正規表達式有兩個方法

  1. 用變數去宣告
    var reg = /^[09]{2}[0-9]{8}$/;

  2. 用建構式去宣告
    var reg = new RegExp('^[09]{2}[0-9]{8}$');

宣告還看得懂...不過後面那串到底是什麼鬼?

後面那串就是正規表達式的本體,以變數宣告的話需要將表達式寫在 / / 符號內中;而建構式的話則是將表達式寫在 ' ' 內中。

符號基本解說

^ 符號作為開頭使用,表示正規表達式要以此為起始。
$ 符號作為結尾使用,表示正規表達式要以此結束點。
[] 符號為文字與數字格式,只代表一個字元。
- 符號為 xx 到 xx 的範圍,與上面的 [] 符號相輔相成。[A-Z] 的話就代表可以輸入 A~Z 之間(包含A、Z)的任何字。
. 符號表示單一個字元。
{} 符號表是後面能有幾位數。常跟 [] 搭配,這樣可以變成多個字元。
| 符號表示「或」的意思。
*符號表示後面可以有與前一字元相同0至多個字元的意思。
+ 符號表示後面可以有與前一字元相同1至多個字元的意思。
\有特殊用途,在下面實際操作可以看一下。

以上應該算比較常用到的,再其他的我就沒嘗試過了。

簡單實際操作

使用 .test() 來查看是否為 true。e.g. 正規表達式.test(輸入的值)

/a/ 表示輸入的字元中要有 a 這個字元。

/^a/ 表示開頭要以 a 開頭,所以 /Aaa/ 會為 false。

/^ab/ 會找出 ab 開頭。

/ab$/ 會找出 ab 結尾。

/[0-9a-z]/ 會找出包含0~9以及 a~z 的格式,但不包含 A~Z。

/[09]/ 只會找出有有包含09的格式。

/a./ 會找出 a 後面有字元的格式。

/.a/ 會找出 a 前面有字元的格式。

/[a-z0-9]{8}/ 會找出有有8個字元的格式。

/a|b/ 找出包含 a 或 b 的格式。

/a*/ 會找出有0~多個有 a 的格式,但因為0個也為 true,所以 /bbbbbbb/ 也為 true。

/a+/ 會找出有1~多個有 a 的格式,因為一定要一個,所以 /bbbbbbb/ 會變 false。

/\d/ 代表 [0-9] 的意思,因為有些驗證格式比較嚴謹,需要很長串的英數混合,一直打 [0-9] 也很麻煩...

/\w/ 代表 [0-9a-zA-Z_] 的意思。理由大概同上。

以上是基礎介紹,主要是讓不熟悉正規表達式的人可以多少理解一下。至少不會看到正規表達式就怕怕的...我以前看到就直接放棄= =

教學就到這邊了,對於要怎麼寫出驗證表單內容,手機、身分證...純英數驗證看完應該就能自行悟出了。不過 email 等等一堆英數特殊符號混合的我一律請教 Google 大神。
可以參考這位的 email 寫法 > [Javascript] Regular Expression – Email 表單驗證


好了,以上就是簡單的正規表達式介紹,也許有人覺得上面那串根本小兒科。不過先熟悉、不害怕在學習上是件重要的事情。
明天我想想要來幹嘛,也許照著清單走也說不定?!


上一篇
Day15. JavaScript 日期、時間處理
下一篇
Day17. JavaScript 陣列的處理 - 取得陣列內不重複資料、刪除陣列中指定值、判斷是否有符合的字串
系列文
30天前端網頁技術超入門介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言