前端寶庫

前端技術分享平台

0%

[筆記]_正規表達式

正規表達式 (Regulay Expression)

  • Regular Expression 是一套規則模式(pattern),
    可以用來做文字的搜尋、比對、萃取、替代、轉換等等,在許多的程式語言中都支援,
    簡稱 Regex, RegexpRE
  • Regular Expression 是在 UNIX 世界中發展出來的字串比對技巧,
    基本概念是用一套簡單 (但功能強大) 的符號來比對字串,
    並可對符合比對條件的字串進行修改或其他運算。

  • Regex 可以實用的情境大致有幾種:

    1. 尋找匹配的字串
    2. 取代匹配的字串
    3. 驗證使用者輸入資料的欄位
    4. 擷取某段想要的資訊

撰寫正規表達式

  • pattern 代表正規表達式的字串,區分大小寫。
  • flag 則是比對的方式。
  • 可透過下列兩種方式創建正規表達式:
    • 使用 RegExp 物件的建構子函式
      新增一個 RegExp 物件:
      當模式會異動、事先未知匹配模式、或者從其他地方取得時,使用 建構子函數 較為合適。
      var rules = new RegExp('pattern', 'flag');
    • 使用 正規表達式實字
      用兩個 // 包住條件:
      當正規表達式為定值時,使用此方法可獲得較佳效能。
      const rules = /pattern/flag;

修飾符 (flag)

說明
i 不區分大小寫。
m 使用多行模式,
使 ^$ 會比對每一行的開頭與結尾,而不是輸入字串的開頭和結尾。
s 使用單行模式,
使 句點. 會比對每個字元,而不是換行符號 \n 以外的每個字元。
g 使用全域比對模式,
g flag 會保留lastIndex的狀態,讓下一次再匹配時,可以從lastIndex的位置開始找起。
x 將模式中的空白忽略。
A 強制以目標字符串開頭匹配。
U 禁止貪婪匹配,只匹配最近的一個字符串。 (不重複匹配)
gi 全域比對並忽略大小寫。

RegExp 物件方法

方法 說明 語法格式
exec 搜尋比對,符合傳回Array;不符合傳回 null。 regexObj.exec(str)
test 搜尋比對,符合傳回true;不符合傳回false。 regexObj.test(str)

字串物件方法

方法 說明 語法格式
match 搜尋比對,如果符合的狀況正規表達式
包含g符號,則傳回所有相符的字串;
不包含g則傳回Array,
無符合傳回null。
str.match(regexp)
search 搜尋比對,
符合傳回第一個相符的索引 (index),
不符合傳回 -1。
str.search(regexp)
replace 取代字串,
如果符合傳回一個新字串,不影響原字串。
str.replace(regexp, newstr)
split 分割字串,
如果符合傳回分割後的Array,不影響原字串。
str.split(regexp)

特殊字元

符號 匹配說明
\ 反斜線,跳脫特殊字元。
. 任意字元。
$ 字元結尾。
^ 字元開頭
| 同程式常見的 OR 邏輯

常用字元

字元 匹配說明 等效正規表達式
\d 數字。 [0-9]
\w 數字、字母、底線。 [a-zA-Z0-9_]
\s 空白字元、tab、換頁、換行。 [\r\t\n\f]
\b 英文單詞邊界。
反義字元 匹配說明 等效正規表達式
\D 非 數字。 [^0-9][^\d]
\W 非 數字、字母、底線。 [^a-zA-Z0-9_][^\w]
\S 非 空白字元、tab、換頁、換行。 [^\r\t\n\f][^\s]
\B 非 英文單詞邊界。 [^\b]
其他字元 匹配說明
\0 查找 NULL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找製表符(tab鍵)。
\v 查找垂直製表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的Unicode字符。

量詞

符號 匹配說明 等效正規表達式
n* 0次以上。 n{0,}
n+ 至少1次以上。 n{1,}
n? 0次或1次。 n{0,1}
n{x} x次 的 n。
n{x,} 至少x次以上 的 n。
n{,y} 最多y次 的 n。
n{x,y} 至少x次以上,最多y次 的 n。

對於量詞,Regex的匹配預設採取貪婪模式(盡可能多匹配)。
?接在量詞後方,表示盡可能匹配短結果。

const match = /<.+?>/.exec('<em>Hello World</em>');
console.log(match[0]); // <em>

方括號 []

比對方括號裡面的任一字元,可以用範圍匹配

符號 匹配說明
[] 方括號,比對方括號裡面的任一字元,可以用範圍匹配: [A-Z]、[a-z]、[0-9]
[^][!] ^代表「反」,比對方括號裡面以外的任一字元

群組 ()

符號 匹配說明
(x) 比對x,並將符合的部分存入一個變數(自動命名的變數)
(?<name>x) 比對x,並將符合的部分存入name變數
(?:x) 比對x,但不存入結果陣列
x(?=y) x之後必須接y
x(?!y) x之後不能接y
(?<=y)x x前面必須接y
(?<!y)x x前面不能接y

回溯 (Backreference)

用來引用群組的內容。
使用反斜線加上數字。e.g.: \1 (代表第一個群組)

const regex = /(\d+)a\1b/
regex.test('1a1b') // true
regex.test('1a2b') // false

替換

與群組()一起使用。

符號 匹配說明
$number${number} number 表示匹配的群組 (capturing group),群組編號從 1 開始 $1。
$ 後面接著的所有數字都會被解讀為屬於 number 群組,
可以用 ${number} 語法,例如用 ${1}1 就不會被解讀為第 11 個群組,而是第 1 個。
${name} 用來引用 Named Capturing Group 的值。
$$ 用來跳脫 (escape) $ 的特殊意義,表示 $ 字元。
$& 用來引用整個匹配的字串。
$` 用來引用匹配字串的前面的所有字 (before match)。
$’ 用來引用匹配字串的後面的所有字 (after match)。
$+ 用來引用匹配的最後一個群組。
$_ 用來引用整個輸入的字串。

常用實例

表達式
Email ^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$
URL網址 ^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$
IP位址 ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
手機號碼 ^09\d{8}$
身份證字號 ^[A-Z]{1}[1-2]{1}[0-9]{8}$
HTML Tag ^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$
副檔名 (\w+)\.(jpg|gif)$