动态

详情 返回 返回

寫給前端的正則表達式入門 - 动态 详情

1. 概覽

JavaScript 中,使用 // 即可創建一個正則表達式對象,當然也可以使用 new RegExp()

常用的跟正則相關的方法有 matchtestreplace
其中 matchreplace 都是字符串上的方法, test 是正則對象上的方法。

下面看具體的圖示:

1.png

2. 匹配單字符

  1. /reg/ 可以直接匹配具體的字符串 reg
  2. /[arzy]/ 中的中括號[] 則代表匹配 arzy 中的任意單個字符
  3. /[f-h]/ 中的中槓 - 代表匹配字母表順序中 fh 中的任意單個字符
  4. /[1-3]/ 則代表匹配數字 1 到 3

2.png

3. 正則選項

正則對象的後面也可以跟選項,JavaScript 中常用的選項有:

  1. i - 代表忽略大小寫
  2. m - 代表多行匹配
  3. g - 代表全局匹配(可以匹配多次)

3.png

4. 邊界匹配

  1. ^ - 代表匹配字符串的開頭
  2. $ - 代表匹配字符串的結尾

4.png

5. 字符匹配

  1. . - 可以匹配除了換行符外的任意字符
  2. \d - 可以匹配任意數字
  3. \D - 可以匹配任意數字
  4. \s - 匹配任意空白字符
  5. \S - 匹配任意空白字符
  6. \n - 匹配換行
  7. \w - 它其實就等同於 [A-Za-z0-9_],即匹配字母數字下劃線

5.png

6. 量詞匹配

  1. * - 匹配 0 次或多次
  2. + - 匹配 1 次或多次
  3. ? - 匹配 0 次或 1 次
  4. {3} - 匹配 3 次
  5. {2,4} - 匹配 2、3 或 4 次
  6. {2,} - 匹配 2 次或多次

6.png

7. 分組

() 小括號在正則中代表分組,一般在 match 方法中用來返回全匹配加上多個分組結果,如果使用了 g 選項,則只返回全匹配。

在小括號中你可以使用管道符號 |,它代表

7.png

8. 特殊字符

匹配特殊符號的時候需要加反斜槓 \

JS 中的特殊字符有 ^ $ \ . * + ? () [] {} |

所以如果你需要匹配星號 *,就需要這樣寫:

\*

8.png

9. 取非匹配

匹配除了某個字符的任意字符,需要在中括號[] 中使用 ^

至此 ^ 具有兩個含義:

  1. 如果用於正則表達式的開頭,代表匹配字符串的開頭
  2. 如果用於中括號 [] 內部,則代表匹配非此字符

9.png

10. 完

上面只是介紹了正則表達式中的基本用法,在日常開發中基本就夠用了。更深入的用法比如 貪婪和懶惰零寬斷言捕獲 ,感興趣的小夥伴可以自行學習~

正則很強大,但是也不能濫用。如果你寫出了一個很複雜的只有你能看懂的正則,更好的做法是不使用正則去實現它~

參考鏈接

  • 原文鏈接
  • Intro to Regex for Web Developers

歡迎關注我的公眾號:碼力全開(codingonfire)

關注並回復 副業, 獲取技術人的副業秘籍

codingonfire.jpg

user avatar juanerma 头像 kk_470661 头像 shanejix 头像 3sworld 头像
点赞 4 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.