JavaScript: 正規表達式 RegExp 寫法

JavaScript 中的正規表達式 Regular Expression (RegExp) 是 Perl 5 正規表達式的子集,除了少數的功能沒有支援外非常接近。

跟 JavaScript 的物件、陣列等一樣,比起用建構式的法來說

var pattern = new RegExp('JavaScript');

一般狀況用字面值來建立更好

var pattern = /JavaScript/;

使用上數字與字母皆匹配自己字元,其他標點符號有些有特殊意義如果要匹配自己必須加上 反斜線  \,包括: ^ & . * + ? ! : | \ / ( ) [ ] { }

字元類別 Character Classes

字元類別匹配任何包含於內的字元,可以用中括號來表示

/[java]/       // 匹配 j、a、v、a 字元
/[a-z]/        // 加一個連字號 - 表示匹配之間所有的字元,所以匹配 a 到 z
/[a-zA-Z0-9]/  // 匹配 a 到 z、A 到 Z、 0 到 9
/[^java]/      // ^ 表示否定,所以匹配 j、a、v、a 以外的字元

還有一些特定的字元類別

.     // 除了 newline 跟行終止以外的所有字元
\w    // 所有 ASCII 文字字元,等於 [a-zA-Z0-9]
\W    // 所有非 ASCII 文字字元,等於 [^a-zA-Z0-9]
\s    // 任何 Unicode 空白字元
\S    // 任何非 Unicode 空白字元
\d    // 任何 ASCII 數字,等於 [0-9]
\D    // 任何非 ASCII 數字,等於 [^0-9]
[\b]  // 匹配倒退

重複次數 repetition

在特定重複次數或是一定範圍的次數時,例如:要匹配 100 個數字時,重複 100次的 \d 看起來不是個好辦法,這時用重複次數表示的語法都非常有用。

{n}    // 匹配前一個東西 n 個
{n, }  // 匹配前一個東西 n 個以上
{n, m} // 匹配前一個東西 n 到 m 個之間
+      // 匹配前一個東西 1 個以上,等於{1, }
*      // 匹配前一個東西 0 個以上,{0, }
?      // 匹配前一個東西 0 或 1 個,{0, 1}

非貪進重複 nongreedy repetition

對重複次數加一個問號表示非貪進重複,從前面比對過來,達到重複條件就直接停止繼續比對重複項目,例如:對 aabb/ab+/ 比對會得到 ab 而不是 abb

??
+?
*?
{5, 10}? // 重複字元或字元組合加上 ?

擇一匹配 alternatives

其中有一個條件符合就匹配,例如 /ab|cd/,有 abcd 的都符合

|  // or 運算子,匹配左邊或右邊

分組 grouping

就像是加減乘除時使用的括號,括起來就是同一個單位要一起算,
例如 /(ab|cd){3}/,匹配有三個 abcd
(?:) 則是有點特殊的括號,不會建立編號給後面介紹的參考使用

()    // 分組並記住字元留作後面參考
(?:)  // 只分組但不記住字元

參考 referring to

可以參考前面分組的字元,以左括號的出現順序來編號(可能會有巢狀的狀況),例如:/(['"])[^'"]\1/\1就會匹配第一個括號裡面的東西/(['"])

\n  // 參考左邊數來第 n 個 不為 (?:) 的 括號

正規運算式錨點 regular-expression anchors

下面這些錨點符號可以決定匹配必須在特定的位置。

^     // 在字串開頭,或m旗標狀態下每行開頭
$     // 在字串結尾,或m旗標狀態下每行結尾
\b    // 在非空白跟空白字元的邊界
\B    // 不在非空白跟空白字元的邊界
(?=p) // 後面必須是p,但p不會回傳
(?!p) // 後面不能是p

旗標 flags

指定比對規則,寫在第二個  /  外,例如: /java/gi,就是要找出全部不分大小寫的 java

i  // 不區分大小寫
g  // 找出所有的,否則只找一個
m  // 多行比對, ^ 比對每行開頭,$ 比對每行結尾

應用

知道如何撰寫正規表達式後,接下來就必須使用字串方法 String Method 或是正規表達式方法 RegExp Method 來做應用
(可以參考下一篇:JavaScript: 正規表達式 RegExp 應用

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s