正則表達式基礎知識

ECMAScript 3 開始支持正則表達式,其語法和 Perl 語法很類似,一個完整的正則表達式結構如下:

var expression = / pattern / flags ;

其中,模式(pattern)部分可以是任何簡單或複雜的正則表達式,可以包含字符類、限定符、分組、向前查找以及反向引用。

每個正則表達式都可帶有一或多個標誌(flags),用以標明正則表達式的行為,正則表達式支持下列 3 個標誌:

g: 表示全局(global)模式,即模式將被應用於所有字符串,而非在發現第一個匹配項時立即停止;
i : 表示不區分大小寫(case-insensitive)模式,即在確定匹配項時忽略模式與字符串的大小寫;
m:表示多行(multiline)模式,即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項。

如果多個標誌同時使用時,則寫成:gmi

正則表達式的創建有兩種方式: new RegExp(expression) 和 直接字面量。

正則表達式基礎知識

exp1 exp2 是兩個完全等價的正則表達式,

需要注意的是,傳遞給 RegExp 構造函數的兩個參數都是字符串,不能把正則表達式字面量傳遞給 RegExp 構造函數。

與其他語言中的正則表達式類似,模式中使用的所有元字符都必須轉義。

正則表達式中的元字符包括:

( [ { \ ^ $ | ) ? * + .] }

這些元字符在正則表達式中都有一或多種特殊用途,因此如果想要匹配字符串中包含的這些字符,就必須對它們進行轉義。

正則表達式基礎知識

由於 RegExp 構造函數的模式參數是字符串,所以在某些情況下要對字符進行雙重轉義。

所有元字符都必須雙重轉義,那些已經轉義過的字符也是如此。

正則表達式基礎知識


() [] {} 的區別

【1】() 的作用是提取匹配的字符串。

表達式中有幾個()就會得到幾個相應的匹配字符串。

比如 (\s+) 表示連續空格的字符串。

【2】[] 是定義匹配的字符範圍。

比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和數字。

【3】{} 一般用來表示匹配的長度。

 \d{3} 表示匹配三個數字。
\d{1,3} 表示匹配1~3個數字。
\d{3,} 表示匹配3個以上數字。

^ 與 $

【1】^ 匹配一個字符串的開頭,比如 (^a) 就是匹配以字母a開頭的字符串

【2】

$ 匹配一個字符串的結尾,比如 (b$) 就是匹配以字母b結尾的字符串

【3】^ 還有另個一個作用就是取反,比如[^xyz] 表示匹配的字符串不包含xyz

注意問題:

 如果 ^ 出現在[ ] 中一般表示取反,而出現在其他地方則是匹配字符串的開頭。

^$ 配合可以有效匹配完整字符串:

正則表達式基礎知識


\d \s \w .

【1】\d 匹配一個非負整數, 等價於 [0-9]

【2】\s 匹配一個空白字符

【3】\w 匹配一個英文字母或數字,等價於[0-9a-zA-Z]

【4】. 匹配除換行符以外的任意字符,等價於[^\n]


* + ?

【1】* 表示匹配前面元素0次或多次,比如 (\s*) 就是匹配0個或多個空格

【2】+ 表示匹配前面元素1次或多次,比如

(\d+) 就是匹配由至少1個整數組成的字符串

【3】? 表示匹配前面元素0次或1次,相當於{0,1} ,比如(\w?) 就是匹配最多由1個字母或數字組成的字符串


$1 與 \1

$1-$9 存放著正則表達式中最近的9個正則表達式的提取的結果,

這些結果按照子匹配的出現順序依次排列。

基本語法是:RegExp.$n ,這些屬性是靜態的,除了replace中的第二個參數可以省略 RegExp 之外,其他地方使用都要加上 RegExp

正則表達式基礎知識

\1 表示後向引用,是指在正則表達式中,從左往右數,第1個()中的內容,以此類推,

\2表示第2個(),

\0表示整個表達式。

正則表達式基礎知識

兩者的區別是:\n 只能用在表達式中,而 $n 只能用在表達式之外的地方。  


test 與 match

前面的大都是JS正則表達式的語法。

test則是用來檢測字符串是否匹配某一個正則表達式

如果匹配就會返回true, 反之則返回false

正則表達式基礎知識

match是獲取正則匹配到的結果,以數組的形式返回

正則表達式基礎知識


replace

replace 本身是JavaScript字符串對象的一個方法,它允許接收兩個參數:

replace([RegExp|String], [String|Function]) 

參數1:可以是一個普通的字符串或是一個正則表達式

參數2:可以是一個普通的字符串或是一個回調函數

如果第1個參數是 RegExp,JS會先提取RegExp匹配出的結果,然後用第2個參數逐一替換匹配出的結果

如果第2個參數是回調函數,每匹配到一個結果就回調一次,每次回調都會傳遞以下參數:

result: 本次匹配到的結果
$1,...$9: 正則表達式中有幾個(),就會傳遞幾個參數,$1~$9分別代表本次匹配中每個()提取的結果,最多9個
offset: 記錄本次匹配的開始位置
source: 接受匹配的原始字符串

經典案例

【1】實現字符串的 trim 函數,去除字符串兩邊的空格。

正則表達式基礎知識

^\s+ 表示以空格開頭的連續空白字符,

\s+$ 表示以空格結尾的連續空白字符,加上() 就是將匹配到的結果提取出來,

由於是 | 的關係,因此這個表達式最多會match到兩個結果集,然後執行兩次替換:

正則表達式基礎知識


【2】提取瀏覽器 url 中的參數名和參數值,生成一個key/value 的對象。

正則表達式基礎知識

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一個完整key/value,

形如 xxxx=xxx, 每當匹配到一個這樣的結果時就執行回調,並傳遞匹配到的 key 和 value,對應到$1和$2 。


【3】擴展 typeof,包含引用類型的具體類型。

正則表達式基礎知識

$1 是正則表達式中第一個() 中匹配的內容。

注意問題:

replace 的第二個參數只能是字符串或函數,這裡的 $1 需要放在引號中。

【4】在字符串指定位置插入新字符串。

正則表達式基礎知識

offset=2 時,正則表達式為:(^.{3}) .表示除\n之外的任意字符,{3} 表示匹配前三個連續字符,加()就會將匹配到的結果提取出來,然後通過replace將匹配到的結果替換為新的字符串,形如:結果=結果+str


【5】將手機號 12988886666 轉化成 129****6666 。

正則表達式基礎知識

(\d{3}\d{4}\d{4}) 可以匹配完整的手機號,並分別提取前 3 位、4-7 位和 8-11位,

"$1****$3" 是將第 2 個匹配結果用****代替並組成新的字符串,然後替換完整的手機號。


【6】實現HTML編碼,將< / > " & ` 等字符進行轉義,避免 XSS 攻擊 。

正則表達式基礎知識


分享到:


相關文章: