iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
Modern Web

從零開始的JS學習之路系列 第 28

[Day28] 正規表達式 Regular Expression

  • 分享至 

  • xImage
  •  

這幾天寫 String methods 的時候,在句法裡發現(regexp)這個詞,查了一下原來是 Regular Expression 的縮寫,也就是正規表示式(或稱正則表達式、規則運算式)。
wiki 解釋

過去使用 indesign 排版的經驗,覺得語法似曾相識,原來 grep 就是正規表達式的一種。下圖為用 indesign 排版,字母與數字遇到中文字的情況,段落 1 是不留空白,段落 2 會自動加空白的舉例。

段落 2 的 grep 設定如下圖,在 indesign 可以直接打指令或用圖形化介面選取需要的功能。

回到正題,在 JavaScript 裡的正規表達式

正規表達式是用於匹配字串中字元組合的模式。--MDN

很饒舌但好像沒有更精簡的說法,簡單的說就是尋找字串裡面有沒有符合你設定的正規表達式,而在 JavaScript 中,正規表達式也是物件的一種。
正規表達式有兩種寫法:

  1. 正規表達式字面值(regular expression literal)
let re = /ab+c/; 
  1. 呼叫 RegExp 物件的建構函式
let re = new RegExp('ab+c');

RegExp.test()

RegExp 的這個方法,他可以檢查字串裡是否有匹配的字元組合,並且回傳 true 或 false。

基本的使用方式,就是將要搜尋的字串寫進 / 內直接檢查,如下例:

/abc/.test("abc"); // true

那剛剛上面舉例的 /ab+c/ 是什麼意思?regexp 有許多特殊字元可以搭配使用,+ 是重複 1 次或多次的意思,* 是重複 0 次或多次,來看測試結果。

/ab+c/.test("ac") // false
/ab+c/.test("abc") // true,一次
/ab+c/.test("abbbbbc") // true,多次

/ab*c/.test("ac") // true,0 次
/ab*c/.test("abc") // true
/ab*c/.test("abbbbbc") // true

除了特殊字元,還有很多代表的符號列如一些較常用的:
x|y 符合 x 或 y,用 | 分隔字符,可以像這樣 w|x|y|z,一直或或或或或下去。
\d 符合數字 0-9
\s 符合空白
\w 符合數字跟字母與底線[A-Za-z0-9_]

參考資料

MDN-正規表達式
wiki-正規表示式
前端藏寶圖系列 第 6 篇 深不可測的海 - Regular Expression


上一篇
[Day27] String methods 字串操作方法(2)
下一篇
[Day29] 正規表達式 - 中英空白生成器實作
系列文
從零開始的JS學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 12:11:40

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

我要留言

立即登入留言