js中的正規表示式(1)

前言

對於正則,著稱火星文字,見名知意主要它晦澀難懂,一直以來,看到它總是怕怕的,在平時,也只是簡單的用用,其主要是靠搜,還有就是厚著臉皮求助各路大神了,遇到稍複雜些的正則,便無從下手了,令人頭疼,即使寫完了,過幾月在回頭看時,發現又看不懂那些符號是什麼意思了,終歸結底,還是自己使用得太少,認識得太淺,正則是一個非常強大能完成搜尋和替換的文字工具,本文為初學者學習筆記心得,適用小白,對於正則,我也一直在學習當中,雖然很是枯燥,但是出去混遲早是要還的,歡迎路過的老師多提意見和指正

使用場景

正則最常見的是用在表單驗證上,比如要註冊一個網站的賬號,申請註冊郵箱,填寫收貨人資訊等,需要填寫使用者資訊,比如:姓名,地止,手機號,郵箱,出生日期等,在將這些表單資料資訊提交到伺服器處理之前,我們使用javascript程式檢查表單以確認使用者輸入的資訊,並且是否符合某些條件要求的,當然正則的用處遠不止在表單上,比如:

你正在搜尋一個檔案,這個檔案裡包含suibichuanji(不區分大小寫),你並不想要把包含著其他的字母給找出來,比如什麼hello,boy,handsome(搜尋檔案關鍵字,排除其他字元)
建立了一張使用者表單的web頁面,用來收集使用者資訊,web頁面中包含了一個郵件地止,你需要檢查使用者給出的電子郵件是否正確的語法格式(驗證文字格式的正確性)
正在編輯一段原始碼並且要把所有的name都替換成myName駝峰式命名
一份計算機檔案系統中所有檔案的清單,想要把檔名裡包含fileName的檔案列舉出來
想要在檔案裡搜尋某個特定的文字,但是你只想要把出現在特定位置的字元(比如每行的開頭或是每條語句的結尾)找出來
用一種應用伺服器動態的生成一個web網頁以顯示從某個資料庫裡檢索出來的文字,在那些文字里可能包含著一些url地止字串,你希望那些url地止最終生成的頁面是可以點選的
…

正則最強大的兩個功能就是:

搜尋:用於查詢特定的資訊(文字)
替換:查詢到後進行替換等操作

一般來說,不用正則處理字元操作而想要達到同樣的目的,無非想到的就是不斷的迴圈遍歷所要操作的字元,在迴圈體裡面用if語句來進行判斷,那麼就不得不用一些特殊的標記來標識找到了什麼,沒有找到什麼,還需要檢測空白字元和特殊字元等,實現過程非常的繁瑣,然而如果使用正則,就會好很多,比如下面:
將一個字串轉化成駝峰的方法
常規方法:

/*
*
* 將一個字串轉換為駝峰命名
*
* @function test
* @param {String} str
* @return {Array}
*   1.功能函式的編寫，函式的呼叫，傳參
*   2.js中的內建物件,切割:split(),切割完後得用一個變數給儲存起來
*   3.for迴圈的遍歷,遍歷查詢  
*   4.找到對應的字串,第0個轉化為大寫,轉化為大寫的函式,toUpperCase()在加上字串的拼接，在進行擷取(substring())      
*   5. 把字串給拼接起來(join())           
*                    
*/
var str = `border-top-color`;
console.log(str);  // border-top-color
function test(str){
    var arr = str.split(`-`);  // spilt切割,border,top,color
    console.log(arr);          // [border,top,color]
    for(var i = 1;i<arr.length;i++){  // 迴圈遍歷陣列
    arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substring(1);  
        console.log(arr[i]);    // [border,Top,Color]
    } 
  return arr.join(``); // 字串給加起來
}
console.log(test(str)); // borderTopColor複製程式碼

如下圖所示

利用正規表示式將一字串轉換為駝峰式命名

var str = `border-top-color`;
function test(str){
  var re = /-(w)/g;  // w匹配所有的字母和數字字元以及下劃線_
     return str.replace(re,function($0,$1){ // 第一個引數re表示正則,第二個回撥函式,對該字串處理方式,圓括號內的形參數列示正規表示式的子選項
      return $1.toUpperCase();    // 轉大寫
    });
   }
console.log(test(str));  // borderTopColor複製程式碼

如下圖所示:

兩者對比:
相同點:都是為達到同一個目的,將一個字串轉換為駝峰命名
不同點:普通正常方法,得利用迴圈以及js中內建物件提供的字串(split,substring,join等)方法對所要操作的字串進行操作,而正則少去了複雜的迴圈遍歷,處理的結果比較快,但是前者比較好理解,而後者難以閱讀和理解
小結:上面的示例只是為了說明,使用了正則可以避免過多的利用迴圈對字串的操作,往往迴圈次數多了,就意味程式碼邏輯變得複雜,但凡用正則實現起來複雜的程式,即普通程式導向的方法的邏輯要複雜得多,正則是為了解放它而生的,進行搜素查詢結合內建物件提供的方法可以快速匹配,實現想要的功能,然而它並不那麼簡單,往往是一些特殊符號的組合令正規表示式難以閱讀和理解,但不可否認,它的確很強大

什麼是正規表示式?

正規表示式:用來匹配和處理文字的字元模式的物件,在Ecmascript中RegExp類表示正規表示式,是正規表示式語言建立的,是一種為解決以上等問題的工具而造就的一門規則,它有特殊的語法和指令,String和RegExp都定義了使用正規表示式進行強大的模式匹配和文字檢索與替換的函式
用途:解決以上等問題,主要是用於驗證客戶端的輸入的資料,當使用者填寫完表單後執行某些操作(比如點選提交按鈕),表單的資料就會傳送到伺服器端,在伺服器端php,java等後端語言,會進一步的做處理,進行驗證和反饋,因為在客戶端(瀏覽器)驗證,可以節約大量的伺服器端系統資源,避免頻繁的互動,延遲響應,提供更好的使用者體驗

如何建立正規表示式

採用new操作符:

var pattern = new RegExp("pattern");  // 第一個引數字串
var pattern = new RegExp("pattern",`ig`); // 第二引數可選模式引數,模式修飾符,對字串某些限制
console.log(Object.prototype.toString.call(pattern));//檢查型別"[object RegExp]"
console.log(new RegExp("pattern"));  // 等價於/pattern/
console.log(new RegExp("pattern",`ig`));//等價於 /pattern/gi,其中ig順序任意複製程式碼

字面量表示式方式

var pattern = /pattern/;      // 用兩個反斜槓,中間任意字元
var pattern = /pattern/ig;    // 第二個斜槓後加一個或者多個模式修飾符,這裡忽略大小寫,全域性匹配複製程式碼

模式修飾符的可選引數

引數	含義
i	忽略大小寫(ignore)
g	全域性匹配(global)
m	多行匹配(multiline)

RegExp物件與String提供的方法

test():一個用來測試在給定字串裡是否存在一個匹配的正規表示式的方法,返回布林值,如果存在,則返回true,如果沒有,則返回false
exec():一個用來搜尋一個匹配的regExp方法,用於在字串中查詢指定正規表示式，如果 exec()方法執行成
功，則返回包含該查詢字串的相關資訊陣列,如果執行失敗,則返回null
match(pattern):一個用來匹配一個字串的string方法,返回pattern中的子串或者null
replace(patternReg,replaceReg):一個用來完成替換操作的String方法,用replaceReg替換patternReg
search(pattern):一個用來測試在某給定字串裡是否存在著一個匹配的String方法,返回字串中pattern的開始位置
split(pattern):一個用來把一個字串拆分為多個子串的String方法,返回字串按指定的pattern拆分成的陣列

模式修飾符i,g

絕大多數正規表示式引擎的預設行文只是返回第一個匹配的結果,如果想要把兩個或者更多個匹配的結果都找出來,通常返回為一個陣列或者是其他的專用格式,可以使用g修飾符,表示全域性匹配,該標誌將返回一個包含著所有匹配的結果陣列.例如:

var str = "my name is suibichuanji,my public numer is itclanCoder";// 待匹配物件
var pattern = /my/;// 後面無修飾符，書寫好正則規則,然後拿著要待匹配物件進行匹配
console.log(pattern.test(str));   // true複製程式碼

用全域性匹配修飾符

var str = "my name is suibichuanji,my public numer is itclanCoder";
var pattern = /my/g;
console.log(pattern.test(str));  // true複製程式碼

注意:預設行為只返回第一個匹配的結果,若匹配到了,就不會往後匹配了,具體示例驗證,可以線上正規表示式測試
正規表示式中是區分字母大小寫的,my與MY是兩個不同的字串,可以用修飾符i來強制匹配不區分大小寫
字母大小寫有區分

var str = "my name is suibichuanji,my public numer is itclanCoder";
var pattern = /MY/;              // 未使用任何修飾符
console.log(pattern.test(str));  // false複製程式碼

使用i修飾符,不區分大小寫匹配

var str = "my name is suibichuanji,my public numer is itclanCoder";
var pattern = /MY/i;             // 第二個斜槓後使用i修飾符,表示忽略大小寫
console.log(pattern.test(str));  // true複製程式碼

使用一條語句實現正則

console.log(/my/.test("my name is suibichuanji,my public numer is itclanCoder"));
console.log(/MY/i.test("my name is suibichuanji,my public numer is itclanCoder"));// 前面是正則規則.test()方法,圓括號內是要待匹配的物件與前面的規則進行匹配,其結果,要麼true,要麼false複製程式碼

test():該方法用於檢測一個字串是否匹配某個模式

語法:正則規則.test(待要檢測的字串),pattern.test(str);
引數:圓括號內的str表示你想要的檢測的字串物件
返回值:執行完與正則規則匹配後,如果字串str中含有與pattern匹配的文字的話,那麼返回true,否則返回false,具體示例,以上例子可得

exec():在字串中執行匹配搜尋返回結果陣列

語法:正則規則.exec(待要檢測的字串),pattern.exec(str)
引數:str是需要待檢測的字串,pattern是我們寫的正則規則
返回值:執行完與正則規則匹配後,若有匹配到,則會返回一個陣列,如果未找到匹配，則返回值為null,如下示例

var str = "welcome focus on itclanCoder public Number";
var pattern = /suibichuanji/ig;   // 忽略大小寫,並且全域性匹配
console.log(pattern.exec(str));   // null複製程式碼

使用exec()函式,當有匹配時,則返回一陣列

var str = "welcome focus on itclanCoder public Number";
var pattern = /itclanCoder/ig;
console.log(pattern.exec(str));//["itclanCoder", index: 17, input: "welcome focus on itclanCoder public"複製程式碼

使用match():一個用來匹配一個字串的string方法,返回pattern中的子串或者null

注意:使用match()的位置,前面是待要匹配的物件,而圓括號內是正規表示式
當匹配對時,結果返回待匹配的特定字元的子串,該方法類似於indexOf()或者lastIndexOf();但是它返回的是指定的值,而不是字串的位置

語法:待要檢測的字串物件.match(正則規則),str.match(pattern)
引數:pattern表示是正規表示式,可以是在pattern中檢索的字串,也可以是需要檢索的RegExp物件
返回:如果匹配到,則返回一成功的陣列,如果沒有找到任何的一個匹配,那麼它將返回的是null

var str = `"chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人"`;
console.log(str.match("chuanchuan"));// ["chuanchuan", index: 1, input: ""chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人""]複製程式碼

var pattern = /chuanchuan/ig; 
var str = `"chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人"`;
console.log(str.match(pattern)); // ["chuanchuan", "chuanchuan"]
var str = `"chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人"`;
console.log(str.match(/handsome/));// ["handsome", index: 15, input: ""chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人""]複製程式碼

當不匹配時,其結果返回null,同樣要注意圓括號內是正規表示式與test()和exec()方法不同

var pattern = /隨筆川跡/ig; 
var str = `"chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人"`;
console.log(str.match(pattern)); // null複製程式碼

使用search(pattern):返回字串中 pattern 開始位置

注意:search方法查詢到即返回,會忽略g修飾符全域性匹配,同時它也沒有RegExp物件的lastIndex的屬性,且總是從字串開始位置進行查詢,總是返回的是str匹配的第一個位置查到並返回第一個,若沒有匹配到,則返回-1

語法:待要檢測字串物件.search(pattern);str.search(pattern)
引數:pattern是正則規則表示式,str是要待檢測的字串物件
返回:str中第一個與RegExp(pattern)物件相匹配的子串的起始位置,如果沒有找到任何匹配的子串,則返回-1,若匹配到,則返回該子串的位置,示例程式碼如下

var pattern = /隨筆川跡/i; 
var str = "chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人";
console.log(str.search(pattern)); // -1複製程式碼

若匹配到,則返回的是該待匹配物件子字串的位置

var pattern = /川川/ig;   // 由於search方法查到就返回,無需g修飾符,查到返回第一個
var str = "chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人";
console.log(str.search(pattern)); // 37複製程式碼

使用replace(pattern,replacePattern)

使用replace方法替換匹配到的資料

語法:待檢測字串物件.replace(正則規則,要替換的文字或者功能函式),str.replace(pattern,fun);
引數:圓括號內第一個參數列示正則規則,第二個引數可以是字串也可以是函式,在 str中查詢與RegExp(pattern)相匹配的子字串,第二個引數值或者功能函式執行結果來替換這些子串,如果RegExp(pattern)具有全域性標誌g,那麼replace()方法將替換所有匹配的子串,否則,它只替換第一個匹配子串(也就是說預設只會找第一個子串進行返回,若想全域性替換,則要加g修飾符),replace()中的第二個引數,$字元具有特定的含義,它是從模式匹配得到的字串將用於替換待檢測字串文字,具體下節在做補充
返回:返回替換後的新字串,示例程式碼如下

var pattern = /chuanchuan/i; 
var str = "chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人";
console.log("未使用replace方法之前",str);
console.log("使用replace方法之後",str.replace(pattern,"隨筆川跡"));//未使用replace方法之前 chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人//使用replace方法之後 隨筆川跡 is handsome man,chuanchuan川川是一個全宇宙最帥的男人複製程式碼

注意:replace方法替換,也查到後並返回,預設返回第一個,如果想要全域性匹配替換,那麼對正則使用修飾符g全域性匹配,可達到全域性匹配替換

使用split()方法拆分成字串陣列

使用方法:待匹配物件.split(正則規則確定是以什麼樣的格式將該字串進行拆分,可選引數);
第一個參數列示以什麼樣的格式對該字串進行拆分,而第二個引數可選,若沒有則是對整個字串的進行拆分,若是有數字引數,則返回的子字串不會多於這個引數指定的陣列

語法:待匹配物件.split(第一個引數以什麼樣的形式將待匹配物件進行拆分必填項,可以是字串或者正則,第二個為可選引數,用指定拆分後陣列的長度,若無,則對待檢測的整個字串進行操作),str.split(pattern,2);
引數:pattern可以是字串也可以是正則規則,第二個引數可選,用於對待檢測字串切割後的陣列長度,返回的陣列不會超過該指定的長度

返回:一個字串陣列,該陣列通過在split()圓括號內第一個引數,指定的邊界處將字串str分割成子字串

var pattern = / /i;   // 中間是空格,空格也是字元,用來分割單詞之間的字元之一,意味著以空格的規則將字串進行拆分成陣列
var str = "chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人";
console.log("未使用split方法之前",str);
console.log("使用split方法之後",str.split(pattern)); //未使用split方法之前 chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人//使用split方法之後 (4) ["chuanchuan", "is", "handsome", "man,chuanchuan川川是一個全宇宙最帥的男人"]複製程式碼

split():圓括號後設定第二個引數,會指定返回字串的長度

var pattern = / /i;   
var str = "chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人";
console.log("未使用split方法之前",str); //未使用split方法之前 chuanchuan is handsome man,chuanchuan川川是一個全宇宙最帥的男人
console.log("使用split方法之後",str.split(pattern,2)); //使用split方法之後["chuanchuan", "is"]複製程式碼

可以使用Object.prototype.toString.call()進行準確的確定返回結果的具體型別
上述String與RegExp物件提供的方法語法很簡單,但是真正在使用的時候,他們之間的組合就非常強大了,要想靈活運用,其實驗證某個模式能不能獲得預期的匹配結果不是那麼困難,但是如果驗證它不會匹配到你不想要的東西就不簡單了,往往在使用時,有時會忘記他們當中的某一個,以至於卡殼,從而不得不向度娘伸手,好像除了多擼,沒有什麼別的好辦法了

小結:各個方法的差異比較

相同點:都是對待檢測字串進行操作,會返回一個指定的結果
不同點:正規表示式RegExp物件中提供的兩個test(),exec()方法的書寫格式與String()提供的match(),search(),replace(),split()有所不同,前者是:正則規則.test(待檢測字串物件),pattern.test(str),pattern.exec(str),而後者是:待檢測字串物件.match(正則規則),str.match(pattern),str.search(pattern),str.replace(pattern,替換的文字或功能函式),str.split(確定對待檢測字串以什麼樣的格式拆分,可選引數項指定切割後陣列長度);只要知道RegExp()中的兩個檢測方法與String()提供的四個的方法格式相反就可以了

特殊字元控制特定匹配模式

枯燥的內容來了,光靠字元右邊的釋義,是記不住的,也是理解不了的,平時但凡開啟那種滿屏的表格正則的博文,反正我是看不下去,因為沒有示例,我記不住也理解不了,一碼勝千言…
注意:若反斜線後跟元字元,則將失去特殊的含義,比如.就是表示一個點,反斜槓用來對字元進行轉義,
字元類:單個字元和數字
元字元號:

.:匹配除換行符以外的字元(也就是匹配任何單個字元,字母,數字,下劃線,甚至字元本身)
[a-z0-9]:匹配括號中的字符集中的任意字元等價於[abcd..z0123..9]
d:匹配任何一個數字字元,等價[0-9]或者[0123456789]
D:匹配任何一個非數字字元,等價[^0-9]
w:匹配任何一個字母數字字元(大小寫均可),或下劃線,等價[a-zA-Z0-9_]
W:任何一個非字母數字或非下劃線字元,等價於[^a-zA-Z0-9_]
字元類:錨字元
^:匹配字串的開頭(行首匹配),還有另外一個作用就是取非(反),將給定的字符集合排除在匹配操作以外,除了該字符集合裡的字元,其他字元都可以被匹配,注意,給定字符集的所有字元或字元區間,而不是僅僅限於緊跟在^字元後面的那一個字元或字元區間
$:匹配字串的結束(行尾匹配)
A:只有匹配字串開始處
:匹配單詞邊界,一個單詞的開始或者結尾,並且匹配且匹配一個位置,不匹配任何字元
B:不匹配一個單詞的邊界,匹配非單詞邊界,與相反,可以用來查詢前後都有多於的空格的連字元等,在正則裡,小寫與大寫,往往功能相反

點.元字元的使用

解釋:匹配除換行符以外的字元(也就是匹配任何單個字元,字母,數字,下劃線,甚至字元本身)
使用一個點符號,只匹配一個字元,使用test()測試

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(pattern.test(str)); //true複製程式碼

使用exec()測試結果

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(pattern.exec(str)); // ["sui", index: 0, input: "suibichuanji"]複製程式碼

使用match()方法,圓括號內是要待匹配的物件與前面的規則進行匹配,其結果,要麼true,要麼false

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(str.match(pattern));// ["sui", index: 0, input: "suibichuanji"]複製程式碼

使用search方法查詢到即返回,也就是說無需g修飾符全域性匹配,查到並返回第一個
若沒有匹配到,則返回-1

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(str.search(pattern));// 0複製程式碼

使用replace(pattern,replacePattern)
使用replace方法替換匹配到的資料

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(str.replace(pattern,"ab"));// abbichuanji複製程式碼

使用split()方法對指定的字串進行以指定的正則規則進行切割並返回陣列

var str = `suibichuanji`;
var pattern = /s.i/;
console.log(str.split(pattern)); // ["", "bichuanji"]複製程式碼

以上主要是熟悉一下String與RegExp提供的方法,他們真的很強大
[a-z0-9]
匹配括號中的字符集中的任意字元等價於[abcd..z0123..9]
[]:用來定義一個字符集合,在使用左[和]右中括號定義的字符集合裡,這兩個元字元之間的所有字符集合都是該集合的組成部分,該字符集合的匹配結果是能夠與該集合裡的任意一個成員相匹配
-:連字元,是一個特殊的元字元,它只能用在左中括號[和]右括號之間,[0123456789]等價於[0-9],[ABCDEF中間字母省略Zabcd中間字母省略z0123456789]等價於[A-Za-za-9]在字符集合以外的地方,-橫崗只是一個普通的字元,只能與-本身相匹配,所以,在正則裡,-字元不需要被轉義,注意:在定義一個字元區間的時候,一定要避免讓這個區間的尾字元小於它的首字元,(比如[4,0]);這種區間是無意義的,而且會讓整個模式匹配失效

var  str = "itclanCoder 2323535";
var pattern = /[a-z0-9]/; // 匹配區間裡面的任意一個字元,如有則返回第一個字元,若無則返回false，或者null
console.log(pattern.test(str));// true複製程式碼

若無字元匹配,使用test()或exec()返回false,或null
test()測試

var  str =  "ABBCC";
var pattern = /[a-z0-9]/;
console.log(pattern.test(str));// false複製程式碼

exec()測試

var  str =  "ABBCC";
var pattern = /[a-z0-9]/;
console.log(pattern.exec(str));//null複製程式碼

d字元
匹配任何一個數字字元,等價[0-9]或者[0123456789]
示例程式碼如下
test()方法測試如下

var str = "345893347852394";
var pattern = /d/;  // 檢測匹配數字
console.log(pattern.test(str));//因為str確實含有數字,只要待匹配的字串含有數字,就返回true複製程式碼

exec()測試結果

var str = "345893347852394";
var pattern = /d/;
console.log(pattern.exec(str));// ["3", index: 0, input: "345893347852394"]複製程式碼

[0-9]等價d

var str = "345893347852394";
var pattern = /[0-9]/;  // [0-9]使用字符集合區間[],並用連線符-橫崗
console.log(pattern.test(str));//true複製程式碼

當不匹配時,則返回false

var str = "abcdfeffsgsdgasd"; // 字串中並沒有包含數字
var pattern = /[0-9]/; 
console.log(pattern.test(str)); // 所要匹配的字串中並沒有包含數字,false
假若是要與此相反,則使用^
var str = "abcdfeffsgsdgasd"; // 字串中並沒有包含數字
var pattern = /[^0-9]/;       // 注意^應放在中括號裡面,它
console.log(pattern.test(str));  // true複製程式碼

D字元
匹配任何一個非數字字元,等價[^0-9]

var str = "absdjfsksdjg";
var parttern = /^D/; // 匹配任何一個非數字字元等價[^0-9]
console.log(pattern.test(str));// true複製程式碼

當不匹配時:

var str = "";        // 由於沒有字元
var parttern = /^0-9/;
console.log(pattern.test(str));//由於沒有字元,所以返回false,注意邏輯複製程式碼

w字元
匹配任何一個字母數字字元(大小寫均可),或下劃線,等價[a-zA-Z0-9_]

var str = "shjfuiewgns_235356345";
var pattern = /w/; // 匹配[a-zA-Z0-9_]中任意一字元即可
console.log(pattern.test(str)); // 因為匹配的字串有,所以結果true複製程式碼

當為空格或者沒有任何字元時,則為false

var str = " ";  // var str = "";
var pattern = /w/;
console.log(pattern.test(str)); //false複製程式碼

W字元
任何一個非字母數字或非下劃線字元,等價於[^a-zA-Z0-9_]

var str = " ";    // 空格
var pattern = /W/;
console.log(pattern.test(str));// true複製程式碼

^字元
匹配字串的開頭(行首匹配)

var str = "itclanCoder ";
var pattern = /^itclanCoder/; // 注意從開頭開始匹配,^後面跟著的字串全匹配
console.log(pattern.test(str));// 只要待匹配的字串有包含正則所匹配的規則,都返回true,若不滿足則返回false複製程式碼

不完全匹配時,則返回false

var str = "itclanCode -";
var pattern = /^itclanCoder/;
console.log(pattern.test(str));//false,由此^是對後面的整個字元都進行匹配限制複製程式碼

$字元
匹配字串的結束(行尾匹配)

var str = "itclanCoder";
var pattern = /itclanCoder$/;
console.log(pattern.test(str));//true複製程式碼

同上不匹配時

var str = "tclanCoder";
var pattern = /itclanCoder$/; // 從結尾處開始匹配,會與待匹配的字串向前查詢
console.log(pattern.test(str)); // 因為與規則的正則不完全匹配,所以返回false複製程式碼

^與$結合使用

var str = "itclanCoder";
var pattern = /^itclanCoder$/; // ^開頭是i開始匹配,結尾$開始匹配,若待檢測字串有一個與正規表示式不同,則返回false
console.log(pattern.test(str));// true複製程式碼

待檢測字元有一處或若干處不同時,則返回false

var str = "itclansdfdCoder";   // 待檢測字元物件
var pattern = /^itclanCoder$/;
console.log(pattern.test(str)); // false複製程式碼

A元字元
只有匹配字串開始處,示例程式碼如下

var str = "javascript is a very important skill";
var pattern = /A/;
console.log(pattern.test(str));// false

var str = "javascript is a very important skill";
var pattern = /A/;
console.log(pattern.exec(str));// null

var str = "Aavascript is a very important skill";
var pattern = /A/;
console.log(pattern.test(str)); // true

var str = "Aavascript is a very important skill";
var pattern = /A/;
console.log(pattern.exec(str));// ["A", index: 0, input: "Aavascript is a very important skill"]複製程式碼

:匹配單詞邊界,一個單詞的開始或者結尾,並且匹配且匹配一個位置,不匹配任何字元
示例程式碼如下
從末尾開始匹配

var  str = "codeincode";
var pattern = /code/;   //從末尾處,一個個往前匹配,若有則返回,若無返回null
console.log(pattern.exec(str));// ["code", index: 6, input: "codeincode"]複製程式碼

反例:無匹配到

var  str = "codeinnode";  
var pattern = /code/;// 從後往前逐個匹配，意味倒數第四個是n不是c所以沒有匹配到,其結果返回null
console.log(pattern.exec(str));//null複製程式碼

從頭開始匹配

var  str = "codeinnode";  
var pattern = /code/;
console.log(pattern.exec(str));// ["code", index: 0, input: "codeinnode"]複製程式碼

從頭開始匹配,當沒有時,有一個字元不匹配時,就會返回null

var  str = "coceinnode";  
var pattern = /code/;         // 從頭開始匹配
console.log(pattern.exec(str)); // 因為第三個字元是c不是d,與所要的正則規則不匹配,所以返回null複製程式碼

B:不匹配一個單詞的邊界,匹配非單詞邊界,與相反,可以用來查詢前後都有多於的空格的連字元,在正則裡,小寫與大寫,往往功能相反
示例程式碼如下:

var str = "javascript is very important skill  -  I love it";
var pattern = /B-B/; // 將匹配一個前後都不是單詞邊界的連字元
console.log(pattern.exec(str));// ["-", index: 36, input: "javascript is very important skill  -  I love it"]複製程式碼

總結:

限於篇幅,本節內容就學習到這裡了,正則是一個非常強大的文字匹配工具,用特殊的字元正著去匹配文字還好(其實也不簡單),往往需要逆向的去折騰它,就是不在你考慮範圍條件下也要考慮進去從而剔除一些程式上的漏洞,是比較難的,至於更多相關正則的學習分享,我將持續Go on!!

以下是本篇提點概要

正則的使用場景,兩個最強大的功能就是搜尋和替換
什麼是正規表示式,就是用一處理字串的文字的規則,來匹配和處理文字的字元模式的物件
如何建立正規表示式,一種是new操作符,另一種就是字面量表示方法
RegExp物件與String提供的方法,其中正則的兩個test(),exec()與字串String四個match(),search(),replace(),split()最為常用,區別他們的書寫規則
模式修飾符i,g,m
test(),exec(),match(),search(),replace(),split()方法的具體簡單使用
特殊字元控制特定匹配模式,元字元號,錨字元的使用,至於更多字元使用以後再繼續