iT邦幫忙

0

正規式 - 微介紹

Ares 2019-05-31 17:31:232912 瀏覽
  • 分享至 

  • xImage
  •  

建立正規式

正規式也可以叫做正則表達式,在 JavaScript 中可以使用兩個 /new RegExp 來建立,且其型別為物件

const ares = /a+87/
const ares = new RegExp('a+87')

typeof /a+87/
// object

如需要測試也可使用regex101

使用時機

正規式常常會用在搜尋取代兩個地方,讓我們看看如何使用

搜尋

使用 test 方法可以檢視是否有符合字串,會回傳 true 或是 false

const ares = "Hello everybody, I am a loner."

/friend/.test(ares)
// false

取代

JavaScript 中取代我們會使用 replace 方法,這時候就可以使用正規式

const ares = "Hello everybody, I am a loner."

ares.replace(/loner/, "loser")
// "Hello everybody, I am a loser."

開始使用

除了單純使用字元來過濾以外,正規式還有許多功能語法,這裡列出大部分的語法~

符號類

  • \
    正規式有需多預設的功能符號,如需單純輸出符號則需加上反斜線
    例如: \^ 表示匹配 ^ 符號
  • |
    表示多個條件,例如: /aa|cc/ 匹配 aabbcc 中的 aa 或 cc
  • ^
    1.表示開頭需匹配的字串,例如: /^abc/ 表示字串開頭須為 abc
    2.如寫在 [] 內則為排除字串,例如: /[^abc]/ 表示排除所有 abc 開頭字串
  • $
    ^ 相反,表示字尾須匹配的字串,須加在字元後方
    例如: /abc$/ 表示匹配所有 abc 結尾的字串
  • *
    表示匹配前一字 0 到多次,例如: /bo*/ 匹配 booed 中的 boo
  • +
    表示匹配前一字 1 到多次,例如: /bo+/ 不會匹配 brooded 中的任何字元
  • ?
    表示匹配前一字 0 到 1 次,例如: /bo?/ 匹配 booed 中的 bo
  • .
    匹配換行符號以外所有字元

功能類

  • []
    限制搜尋的範圍,另外可使用 - 來指定一個範圍
    例如: /[a-z]/ 表示匹配 a 到 z 的所有字元
  • {n, m}
    規定符號確切發生的次數為 n ~ m 次,n、m 為正整數,m 若不填則無上限
    例如: /a{0, 2}/ 表示匹配 a 出現 0~2 次的字串

群組類

  • ()
    將小括號內的東西當成一個群組,可重複使用,依照順序為 1~n
    例如: /(foo)(bar)\1\2/ 可匹配 foobarfoobar\1 = foo、\2 = bar
    使用 replace 取代字串則需使用 $ 符號
const abc3 = "foobarfoobar"
abc3.replace(/(foo)(bar)\1\2/, '$1')
// "foo"
  • (?:y)
    (),但是不會記憶群組
  • x(?=y)
    尋找符合 x 的字元,且字元後面須接 y ,不會記憶群組
  • x(?!y)
    尋找符合 x 的字元,且字元後面不是 y ,不會記憶群組

反斜線英文類

這類有些有大小寫,大小寫匹配的字元都是互補的

  • \w
    等同於 [A-Za-z0-9_]
  • \W
    等同於 [A-Za-z0-9_] 以外的字元

  • \s
    匹配任何空白,包括空格、製表符、換頁符、換行符,例如: /\s\w*/ 匹配 foo bar 中的 bar
  • \S
    匹配任何不是空白的字元,例如: /\S\w*/ 匹配 foo bar 中的 foo

  • \d
    匹配任何數字,等同於 [0-9]
  • \D
    匹配任何非數字,等同於 [^0-9]

  • \b
    所有匹配且在邊界的字元,例如: /\bm/ 匹配 moon 中的 m
  • \B
    所有匹配且不在邊界的字元,例如: /\B../ 匹配 noonday 中的 oo

  • \r
    匹配 Enter 符號
  • \n
    匹配換行符號
  • \t
    匹配 tab 符號
  • \xhh\uhhhh
    使用 Unicode 編碼或是 ASCII 編碼,例如: /[\x21]//[\u4E00-\u9FA5]/

參數

參數會寫在 / 後方

// 單個參數
const ares = /a+87/g
const ares = new RegExp('a+87', 'g')

// 多個參數
const ares = /a+87/gi
const ares = new RegExp('a+87', 'gi')

再來介紹參數的種類,目前 JavaScript 不只這三種,但是這三個最常用的~

  • g:global,範圍為全域,不加此參數只會找到第一個
  • i:insensitive,不區分大小寫
  • m:muliti line,可匹配多行,主要應用於 ^$ 符號
// 加上 \n 會換行
const abc1 = "abc123\nabc123\nabc123"
const abc2 = "abc123abc123abc123"

// g
abc2.replace(/a/, "b")
// "bbc123abc123abc123"
abc2.replace(/a/g, "b")
// "bbc123bbc123bbc123"

// i
abc2.replace(/A/gi, "b")
// "bbc123bbc123bbc123"

// m
abc1.replace(/^A/gim, "b")
// "bbc123\nbbc123\nbbc123"

以上就是正規式的簡易介紹,試著用正規式來做一些事情吧!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言