【JS學習筆記】正規表達式(RegExp)

最後更新於 2021 年 9 月 20 日

  正規表達式用於確認字串是否符合所定義的規則。例如當你想確認用戶是否正確輸入郵箱,你可以定義規則為 \w+@+[a-zA-Z0-9.]+ 限定用戶輸入郵箱格式。

  正規表達式不是程式語言也不是軟體,只是一個邏輯式,多種程式語言都能支援,:JS、Perl、Python、Java、C/C++

建立一個正規表達式

有兩種方式可以建立正規表達式。

正規表達式字面值(regular expression literal)

包含兩個 / 字元來表示開始與結束。

例如:/[abc]/ 表示必須包含abc任一字元。

/abc/ 表示必須包含abc所有字元。

正規表達式字面值在 script 載入時會被編譯,當正規表達式為定值時,使用此方法可獲得較佳效能。

呼叫 RegExp 物件的建構函式

var re = new RegExp('ab+c');

使用建構子函數供即時編譯正則表達式,當模式會異動、事先未知匹配模式、或者您將從其他地方取得時,使用建構子函數將較為合適。

正規表達式結構

結構為:/比對規則/比對方式

regex = /abc/g

/abc/外加上 g 表示我們想要比對全部範圍的字串。

若在/abc/外加上 i 表示不限制大小寫。

正規表達式方法

我們可以使用test()方法來判斷字串是否符合正規表達式的規則。

test()方法會回傳true與false

console.log(/abc/.test('ab')) //false
console.log(/abc/.test('abc')) //true
console.log(/[abc]/.test('123')) //false
console.log(/[abc]/.test('after')) //true

/ABC/ 表示僅匹配包含 ABC 且順序相同的字串,如:My brother is learning ABC song.

要注意的地方是,大小寫是有區別的,假如規則為 /abc/,則上方的字串會回傳false。若有空格分開ab c 也不匹配。

console.log(/ABC/.test('My brother is learning ABC song.')) //true
console.log(/abc/.test('My brother is learning ABC song.')) //false

正則表達式中的語法

這邊只列出常用的語法,完整版可以參考:MDN

\反斜線放在非特殊符號前面,使非特殊符號不會被逐字譯出,代表特殊作用
例如:’b’ 如果沒有 ‘\’ 在前頭,功能是找出小寫 b;若改為 ‘\b’ 則代表的是邊界功能,block 用意。
^比對字串開頭(開始位置)。出現在字元集模式的字首中有不同的意思。
:/^A/ 代表匹配開頭為A的字串。
$比對字串結尾(結束位置)。:/B$/ 代表匹配結尾為B的字串。
*匹配前一字元 0 至多次。:/a*/,若字串為bbbbb、bbaaa都會回傳true。
+匹配前一字元至少 1 次,等同於 {1,}。
?匹配前一字元 0 至 1 次,等同於 {0,1}。
.表示任意單個字元,:/a.b/ ,若字串為 abb、akb 都會回傳true,但若是字串為acccccb則會回傳false。
x|y符合「x」或「y」。:/black | white/,若字串為 I like black shoes. 、 I like white shoes 、I like both black shoes and white shoes. 都會回傳 true,I like red shoes則回傳false。
\d比對數字符號。等價於 [0-9]。
\D比對非數字符號。等價於 [^0-9]。
\w比對「英文、數字或底線」。等價於 [A-Za-z0-9_]。
\W比對非「英文、數字或底線」的字元。等價於 [^A-Za-z0-9_]。
\s匹配任何空白字元,包括空格、定位字元、換頁符等等。等價於[\f\n\r\t\v]。
\S匹配任何非空白字元。等價於[^\f\n\r\t\v]。
[abc]字元集合。匹配所包含的任意一個字元。:[abc],則匹配包含abc任一字元的字串。
[a-z]字元範圍。匹配指定範圍內的任意字元。:[a-z],則匹配包含a~z任一字元的字串。
{n}規定符號確切發生的次數必須大於等於n,n為正整數。:/a{3}/,字串為aabbb 回傳false,為aaabb或aaaab都會回傳true。
{n,m}m和n均為非負整數,其中n<=m。最少匹配n次且最多匹配m次。
{n,}代表至少 n 次,:/a{3,}/ 若字串為 aaab 會回傳 true,為aabbb 會回傳 false。

範例

基本匹配

英文字母有大小寫之分↓

console.log(/ABC/.test('My brother is learning ABC song.')) //true
console.log(/abc/.test('My brother is learning ABC song.')) //false

?*+ 特殊字元

? => 0或1個 ; * => 0或多個 ;+ => 至少1個

console.log(/a?/.test('abbbb')) //true
console.log(/a?/.test('bbbbb')) //true
console.log(/a?/.test('abaaa')) //true
console.log(/a*/.test('bbbbb')) //true
console.log(/a*/.test('bbabb')) //true
console.log(/a*/.test('bbaaa')) //true
console.log(/a+/.test('bbbbb')) //false
console.log(/a+/.test('bbabb')) //true
console.log(/a+/.test('bbaaa')) //true

字元集合

[abc]匹配包含abc任一字元的字串,

[^abc]匹配非包含abc順序的字串,

^[abc]匹配開頭為abc任一字元的字串。

//[abc]
console.log(/[abc]/.test('123')) //false
console.log(/[abc]/.test('abc')) //true
console.log(/[abc]/.test('1a23')) //true
console.log(/[abc]/.test('123e')) //false
console.log(/[abc]/.test('a123')) //true
console.log(/^[abc]/.test('abc')) //true
console.log(/^[abc]/.test('1a23')) //false
//[^abc]
console.log(/[^abc]/.test('123')) //true
console.log(/[^abc]/.test('abc')) //false
console.log(/[^abc]/.test('1a23')) //true
console.log(/[^abc]/.test('123e')) //true
console.log(/[^abc]/.test('a123')) //true

字元範圍

[a-z] 匹配包含 a~z 任一字元的字串。

console.log(/[a-z]/.test('123')) //false
console.log(/[a-z]/.test('abc')) //true
console.log(/[a-z]/.test('1a23')) //true
console.log(/[a-z]/.test('123e')) //true
console.log(/[a-z]/.test('a123')) //true

\d \D 任意數字

\d 等價於[0-9],\D等價於[^0-9]。

// \d = [0-9]
console.log(/\d/.test('123')) //true
console.log(/\d/.test('abc')) //false
console.log(/\d/.test('1a23')) //true
console.log(/\d/.test('123e')) //true
console.log(/\d/.test('a123')) //true
// \D = [^0-9]
console.log(/\D/.test('123')) //false
console.log(/\D/.test('abc')) //true
console.log(/\D/.test('1a23')) //true
console.log(/\D/.test('123e')) //true
console.log(/\D/.test('a123')) //true

\w \W 任意字母數字及底線

\w = 匹配包含[A-Za-z0-9_]任意一個字元的字串,

\W = 匹配不包含[A-Za-z0-9_]任意一個字元的字串。

// \w = [A-Za-z0-9_]
console.log(/\w/.test('123')) //true
console.log(/\w/.test('abc')) //true
console.log(/\w/.test('1a23')) //true
console.log(/\w/.test('123E')) //true
console.log(/\w/.test('a123')) //true
console.log(/\w/.test('_')) //true
console.log(/\w/.test('^')) //false
// \W = [^A-Za-z0-9_]
console.log(/\W/.test('123')) //false
console.log(/\W/.test('abc')) //false
console.log(/\W/.test('1a23')) //false
console.log(/\W/.test('123E')) //false
console.log(/\W/.test('a123')) //false
console.log(/\W/.test('_')) //false
console.log(/\W/.test('^')) //true

重複次數

a{3}匹配包含3個或以上a的字串,

a{3,}匹配包含至少3個以上a的字串,

a.{5}c 匹配以a開頭以c結尾中間有5個任意字元的字串。

console.log(/a{3}/.test('aabbb')) //false
console.log(/a{3}/.test('aaabb')) //true
console.log(/a{3}/.test('aaaab')) //true
console.log(/a{3,}/.test('aaaab')) //true
console.log(/a{3,}/.test('abbab')) //false
console.log(/a.{5}c/.test('aqqytwc')) //true
console.log(/a.{5}c/.test('aq3y5wc')) //true
console.log(/a.{5}c/.test('aq3_5wc')) //true
console.log(/a.{5}c/.test('bq3_5wc')) //false
console.log(/a.{5}c/.test('aq3_5wb')) //false

綜合使用範例

上方舉了這麼多例子,那就把一些常用的規則混合在一起使用,來猜猜看輸出結果為何?

console.log(/[abc]/.test('a1_23')) //true
console.log(/[abc]\d/.test('a1_23')) //true
console.log(/[abc].\d/.test('a1_23')) //false
console.log(/[abc]..\d/.test('a1_23')) //true
console.log(/[abc]..\D/.test('a1_23')) //false
console.log(/[abc].+\d/.test('a1_23')) //true
console.log(/[abc].\w/.test('a1_23')) //true
console.log(/[abc].+\w/.test('a1_23')) //true
console.log(/[abc].\W/.test('a1_23^')) //false
console.log(/[abc].+\W/.test('a1_23^')) //true
console.log(/[a-z]|[0-9]/.test('#')) //false
console.log(/[a-z]|[0-9]/.test('#999')) //true
console.log(/[a-z]|[0-9]/.test('#aaa')) //true
console.log(/[a-z]|[0-9]/.test('#a0a')) //true
console.log(/\w+@+[a-zA-Z0-9.]+/.test('abcd_123@gmail.com')) //true

正規表達式的其他方法

match()

回傳比對後符合的結果陣列,若無符合對象,則回傳 null。

:若不在/\w/後加上 g ,則僅會匹配到字串第一個符合的字元,加上g可匹配全部字串。

let Str = "HelloWorld"
let RegExp = /\w/g
console.log(Str.match(RegExp));
//["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"]

search()

回傳搜尋第一個比對後符合結果的位置,如果沒有任何符合結果,就回傳 -1

let Str = "HelloWorld"
let RegExp = /\w/g
console.log(Str.search(RegExp));
//0
let Str = "HelloWorld"
let RegExp = /\d/g
console.log(Str.search(RegExp));
//-1
let Str = "Hello3World"
let RegExp = /\d/g
console.log(Str.search(RegExp));
//5

replace()

替換比對後符合的值。接收兩個參數,第一個參數爲正規表達式,第二個參數爲欲替換的值。

let Str = "HelloWorld"
let RegExp = /\d/
let RegExp2 = /\w/
let RegExp3 = /\w/g
console.log(Str.replace(RegExp, 1)); //HelloWorld
console.log(Str.replace(RegExp2, 1)); //1elloWorld
console.log(Str.replace(RegExp3, 1)); //1111111111

在最後,推薦一個網站給各位:Regular Expression 101

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論