DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript高級程序設計(第3版)學習筆記12 js正則表達式
JavaScript高級程序設計(第3版)學習筆記12 js正則表達式
編輯:JavaScript基礎知識     
需要指出的是,這裡只是總結了正則表達式的常用的且比較簡單的語法,而不是全部語法,在我看來,掌握了這些常用語法,已經足夠應對日常應用了。正則表達式不只是應用在ECMAScript中,在JAVA、.Net、Unix等也有相應應用,這篇文章則是以ECMAScript中的正則表達式為基礎總結的。

一、正則表達式基礎

1、普通字符:字母、數字、下劃線、漢字以及所有沒有特殊意義的字符,如ABC123。在匹配時,匹配與之相同的字符。

2、特殊字符:(需要時,使用反斜槓“\”進行轉義)

字符 含義 字符 含義 字符 含義 字符 含義 \a 響鈴符 = \x07 ^ 匹配字符串的開始位置 \b 匹配單詞的開始或結束 {n} 匹配n次 \f 換頁符 = \x0C $ 匹配字符串的結束位置 \B 匹配不是單詞開始和結束的位置 {n,} 匹配至少n次 \n 換行符 = \x0A () 標記一個子表達式的開始和結束 \d 匹配數字 {n,m} 匹配n到m次 \r 回車符 = \x0D [] 自定義字符組合匹配 \D 匹配任意不是數字的字符 [0-9] 匹配0到9中任意一個數字 \t 制表符 = \x09 {} 修飾匹配次數的符號 \s 匹配任意空白字符 [f-m] 匹配f到m中任意一個字母 \v 垂直制表符 = \x0B . 匹配除換行符外的字符 \S 匹配任意非空白字符     \e ESC符 = \x1B ? 匹配0或1次 \w 匹配字母或數字或下劃線或漢字     \xXX 使用兩位十六進制表示形式,可與該編號的字符匹配 + 匹配1或多次 \W 匹配任意不是字母、數字、下劃線和漢字的字符     \uXXXX 用四位十六進制表示形式,可與該編號的字符匹配 * 匹配0或多次 [^x] 匹配除x外的所有字符     \x{XXXXXX} 使用任意位十六進制表示形式,可與該編號的字符匹配 | 左右兩邊表達式之間“或”關系 [^aeiou] 匹配除aeiou外的所有字符    

上面列舉的這些特殊字符,可以大致的分為: 

(1)不便書寫字符:如響鈴符(\a)、換頁符(\f)、換行符(\n)、回車符(\r)、制表符(\t)、ESC符(\e)

(2)十六進制字符:如兩位(\x02)、四位(\x012B)、任意位(\x{A34D1})

(3)表示位置字符:如字符串開始(^)、字符串結束($)、單詞開始和結束(\b)、單詞中間(\B)

(4)表示次數字符:如0或1次(?)、1或多次(+)、0或多次(*)、n次({n})、至少n次({n,})、n到m次({n,m})

(5)修飾字符:如修飾次數({})、自定義組合匹配([])、子表達式(())

(6)反義字符:

  (A)通過大小寫反義:如\b和\B、\d和\D、\s和\S、\w和\W

  (B)通過[^]反義:如[^x]、[^aeiou]

  (C)其它特例:如\n和.也構成反義

(7)范圍字符:如數字范圍([0-9])、字母范圍([f-m])

(8)邏輯字符:如表示或(|)

3、轉義

(1)使用反斜槓“\”轉義單個字符

(2)使用“\Q...\E”轉義,將表達式中間出現的字符全部作為普通字符

(3)使用“\U...\E”轉義,將表達式中間出現的字符全部作為普通字符,並且將小寫字母轉換成大寫匹配

(4)使用“\L...\E”轉義,將表達式中間出現的字符全部作為普通字符,並且將大寫字母轉換為小寫匹配

4、貪婪模式與懶惰模式

   如果正則表達式中含有次數字符時,一般情況下,會盡可能匹配更多的字符,比如用l*n來匹配linjisong的話,會匹配linjison,而不是 lin,這種模式也就是正則表達式的貪婪模式;相對應的,可以通過添加字符“?”來設置為懶惰模式,也即盡可能匹配更少字符。如*?表示重復0次或多次, 但盡可能少重復。

5、分組和反向引用

(1)用小括號(())將表達式包含,可以使得表達式作為一個整體來處理,從而達到分組的目的。

(2)默認情況下,每個分組會自動獲取一個組號,按照左括號的順序,從1向後編號。

(3)引擎在處理時,會將小括號內部表達式匹配的內容保存下來,以方便在匹配過程中或匹配結束後進一步處理,可以使用反斜槓和組號來引用這個內容,如\1表示第一個分組匹配的文本。

(4)也可以自定義組名,語法是(?<name>exp),這個時候反向引用時,還可以使用\k<name>。

(5)也可以不保存匹配內容,也不分配組號,語法是(?:exp)。

(6)小括號有一些其他特殊語法,這裡列舉幾種,不再深入討論:

分類 代碼/語法 說明 捕獲 (exp) 匹配exp,並捕獲文本到自動命名的組裡 (?<name>exp) 匹配exp,並捕獲文本到名稱為name的組裡,也可以寫成(?'name'exp) (?:exp) 匹配exp,不捕獲匹配的文本,也不給此分組分配組號 零寬斷言 (?=exp) 匹配exp前面的位置 (?<=exp) 匹配exp後面的位置 (?!exp) 匹配後面跟的不是exp的位置 (?<!exp) 匹配前面不是exp的位置 注釋 (?#comment) 這種類型的分組不對正則表達式的處理產生任何影響,用於提供注釋讓人閱讀

到此,對於理解常用的正則表達式已經足夠了,若想繼續學習正則表達式的,可以參考正則表達式30分鐘入門教程。下面再熟悉一下Javascript中的正則表達式實現。

二、Javascript中的正則表達式對象RegExp

1、創建正則表達式

(1)使用字面量:語法 var exp = /pattern/flags;

  A、pattern是任何正則表達式

  B、flags有三種:g表示全局模式、i表示忽略大小寫、m表示多行模式

(2)使用RegExp內置構造函數:語法 var exp = new RegExp(pattern, flags);

  A、使用構造函數時,pattern和flags都是字符串形式,所以對於轉義字符需要雙重轉義,例如:

字面量 構造函數 /\[bc\]at/ "\\[bc\\]at" /\.at/ "\\.at" /name\/age/ "name\\/age" /\d.\d{1,2}/ "\\d.\\d{1,2}" /\w\\helllo\\123/ "\\w\\\\hello\\\\123"

說明:ECMAScript 3使用字面量時會共享一個RegExp實例,使用new RegExp(pattern,flags)會為每個正則表達式創建一個實例;ECMAScript 5規定每次都創建新實例。

2、實例屬性

(1)global:布爾值,表示是否設置了g標志。

(2)ignoreCase:布爾值,表示是否設置了i標志。

(3)multiline:布爾值,表示是否設置了m標志。

(4)lastIndex:整數,表示開始搜索下一次匹配項的字符位置,從0算起。

(5)source:字符串,表示按照字面量形式創建的字符串模式,即便實例使用構造函數創建,存儲的也是字面量形式的字符串模式。

3、實例方法

(1)exec()方法

  A、一個參數,即要應用模式的字符串,返回第一個匹配項信息的數組,沒有匹配時返回null。

  B、返回的數組是Array實例,但還額外有input和index屬性,分別表示應用正則表達式的字符串和匹配項在字符串中的位置。

  C、匹配時,在返回的數組中,第1項是與整個模式匹配的字符串,其他項是與模式中的分組匹配的字符串(如果沒有分組,則返回數組只有1項)。

  D、對於exec(),即使設置了g,每次返回的也是一個匹配項,不同的是,設置了g,多次調用exec的開始搜索位置不同,沒有設置g,每次都從開始搜索。

(2)test()方法

  接受一個字符串參數,匹配返回true,不匹配返回false。

三、實例分析

下面看一個出自PhoneGap源碼中用於格式化的正則表達式

復制代碼 代碼如下:
var pattern = /(.*?)%(.)(.*)/;
var str = 'lin%%jisong';
var match = pattern.exec(str);
console.info(match.join(','));//lin%%jisong,lin,%,jisong

var pattern2 = /(.*)%(.)(.*)/;
var match2 = pattern2.exec(str);
console.info(match2.join(','));//lin%%jisong,lin%,j,isong


分析:這裡pattern和pattern2都包含三個分組,第2、3個分組相同,第2個分組(.)匹配任意一個非換行字符,第3個分組(.*)盡可能多(貪婪模式)的匹配任意非換行字符,pattern中的第1個分組(.*?)盡可能少(懶惰模式)的匹配任意非換行字符,而pattern2中的第1個分組(.*)則是盡可能多(貪婪模式)的匹配任意非換行字符了。因此在保證整個模式匹配成功(從而需要保留一個%字符用於匹配正則表達式中的%)的前提下,pattern中第1個分組匹配成了lin,而pattern2中第1個分組匹配成了lin%,分析到這裡上例中的輸出也就不難理解了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved