js中的正則表達(dá)式(1)

image

前言

對(duì)于正則,著稱火星文字,見(jiàn)名知意主要它晦澀難懂,一直以來(lái),看到它總是怕怕的,在平時(shí),也只是簡(jiǎn)單的用用,其主要是靠搜,還有就是厚著臉皮求助各路大神了,遇到稍復(fù)雜些的正則,便無(wú)從下手了,令人頭疼,即使寫(xiě)完了,過(guò)幾月在回頭看時(shí),發(fā)現(xiàn)又看不懂那些符號(hào)是什么意思了,終歸結(jié)底,還是自己使用得太少,認(rèn)識(shí)得太淺,正則是一個(gè)非常強(qiáng)大能完成搜索和替換的文本工具,本文為初學(xué)者學(xué)習(xí)筆記心得,適用小白,對(duì)于正則,我也一直在學(xué)習(xí)當(dāng)中,雖然很是枯燥,但是出去混遲早是要還的,歡迎路過(guò)的老師多提意見(jiàn)和指正

使用場(chǎng)景

正則最常見(jiàn)的是用在表單驗(yàn)證上,比如要注冊(cè)一個(gè)網(wǎng)站的賬號(hào),申請(qǐng)注冊(cè)郵箱,填寫(xiě)收貨人信息等,需要填寫(xiě)用戶信息,比如:姓名,地止,手機(jī)號(hào),郵箱,出生日期等,在將這些表單數(shù)據(jù)信息提交到服務(wù)器處理之前,我們使用javascript程序檢查表單以確認(rèn)用戶輸入的信息,并且是否符合某些條件要求的,當(dāng)然正則的用處遠(yuǎn)不止在表單上,比如:

  • 你正在搜索一個(gè)文件,這個(gè)文件里包含suibichuanji(不區(qū)分大小寫(xiě)),你并不想要把包含著其他的字母給找出來(lái),比如什么hello,boy,handsome(搜索文件關(guān)鍵字,排除其他字符)
  • 創(chuàng)建了一張用戶表單的web頁(yè)面,用來(lái)收集用戶信息,web頁(yè)面中包含了一個(gè)郵件地止,你需要檢查用戶給出的電子郵件是否正確的語(yǔ)法格式(驗(yàn)證文本格式的正確性)
  • 正在編輯一段源碼并且要把所有的name都替換成myName駝峰式命名
  • 一份計(jì)算機(jī)文件系統(tǒng)中所有文件的清單,想要把文件名里包含fileName的文件列舉出來(lái)
  • 想要在文件里搜索某個(gè)特定的文本,但是你只想要把出現(xiàn)在特定位置的字符(比如每行的開(kāi)頭或是每條語(yǔ)句的結(jié)尾)找出來(lái)
  • 用一種應(yīng)用服務(wù)器動(dòng)態(tài)的生成一個(gè)web網(wǎng)頁(yè)以顯示從某個(gè)數(shù)據(jù)庫(kù)里檢索出來(lái)的文本,在那些文本里可能包含著一些url地止字符串,你希望那些url地止最終生成的頁(yè)面是可以點(diǎn)擊的
  • ...

正則最強(qiáng)大的兩個(gè)功能就是:

  • 搜索:用于查找特定的信息(文本)
  • 替換:查找到后進(jìn)行替換等操作

一般來(lái)說(shuō),不用正則處理字符操作而想要達(dá)到同樣的目的,無(wú)非想到的就是不斷的循環(huán)遍歷所要操作的字符,在循環(huán)體里面用if語(yǔ)句來(lái)進(jìn)行判斷,那么就不得不用一些特殊的標(biāo)記來(lái)標(biāo)識(shí)找到了什么,沒(méi)有找到什么,還需要檢測(cè)空白字符和特殊字符等,實(shí)現(xiàn)過(guò)程非常的繁瑣,然而如果使用正則,就會(huì)好很多,比如下面:
將一個(gè)字符串轉(zhuǎn)化成駝峰的方法
常規(guī)方法:

/*
*
* 將一個(gè)字符串轉(zhuǎn)換為駝峰命名
*
* @function test
* @param {String} str
* @return {Array}
*   1.功能函數(shù)的編寫(xiě),函數(shù)的調(diào)用,傳參
*   2.js中的內(nèi)置對(duì)象,切割:split(),切割完后得用一個(gè)變量給存儲(chǔ)起來(lái)
*   3.for循環(huán)的遍歷,遍歷查找  
*   4.找到對(duì)應(yīng)的字符串,第0個(gè)轉(zhuǎn)化為大寫(xiě),轉(zhuǎn)化為大寫(xiě)的函數(shù),toUpperCase()在加上字符串的拼接棉胀,在進(jìn)行截取(substring())      
*   5. 把字符串給拼接起來(lái)(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++){  // 循環(huán)遍歷數(shù)組
    arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substring(1);  
        console.log(arr[i]);    // [border,Top,Color]
    } 
  return arr.join(''); // 字符串給加起來(lái)
}
console.log(test(str)); // borderTopColor

如下圖所示

普通方法,將一字符串轉(zhuǎn)換為駝峰式命名

利用正則表達(dá)式將一字符串轉(zhuǎn)換為駝峰式命名

var str = 'border-top-color';
function test(str){
  var re = /-(\w)/g;  // \w匹配所有的字母和數(shù)字字符以及下劃線_
     return str.replace(re,function($0,$1){ // 第一個(gè)參數(shù)re表示正則,第二個(gè)回調(diào)函數(shù),對(duì)該字符串處理方式,圓括號(hào)內(nèi)的形參數(shù)表示正則表達(dá)式的子選項(xiàng)
      return $1.toUpperCase();    // 轉(zhuǎn)大寫(xiě)
    });
   }
console.log(test(str));  // borderTopColor

如下圖所示:

利用正則表達(dá)式處理,將一字符串轉(zhuǎn)換為駝峰式命名

兩者對(duì)比:
相同點(diǎn):都是為達(dá)到同一個(gè)目的,將一個(gè)字符串轉(zhuǎn)換為駝峰命名
不同點(diǎn):普通正常方法,得利用循環(huán)以及js中內(nèi)置對(duì)象提供的字符串(split,substring,join等)方法對(duì)所要操作的字符串進(jìn)行操作,而正則少去了復(fù)雜的循環(huán)遍歷,處理的結(jié)果比較快,但是前者比較好理解,而后者難以閱讀和理解
小結(jié):上面的示例只是為了說(shuō)明,使用了正則可以避免過(guò)多的利用循環(huán)對(duì)字符串的操作,往往循環(huán)次數(shù)多了,就意味代碼邏輯變得復(fù)雜,但凡用正則實(shí)現(xiàn)起來(lái)復(fù)雜的程序,即普通面向過(guò)程的方法的邏輯要復(fù)雜得多,正則是為了解放它而生的,進(jìn)行搜素查找結(jié)合內(nèi)置對(duì)象提供的方法可以快速匹配,實(shí)現(xiàn)想要的功能,然而它并不那么簡(jiǎn)單,往往是一些特殊符號(hào)的組合令正則表達(dá)式難以閱讀和理解,但不可否認(rèn),它的確很強(qiáng)大

什么是正則表達(dá)式?

正則表達(dá)式:用來(lái)匹配和處理文本的字符模式的對(duì)象,在Ecmascript中RegExp類表示正則表達(dá)式,是正則表達(dá)式語(yǔ)言創(chuàng)建的,是一種為解決以上等問(wèn)題的工具而造就的一門(mén)規(guī)則,它有特殊的語(yǔ)法和指令,String和RegExp都定義了使用正則表達(dá)式進(jìn)行強(qiáng)大的模式匹配和文本檢索與替換的函數(shù)
用途:解決以上等問(wèn)題,主要是用于驗(yàn)證客戶端的輸入的數(shù)據(jù),當(dāng)用戶填寫(xiě)完表單后執(zhí)行某些操作(比如點(diǎn)擊提交按鈕),表單的數(shù)據(jù)就會(huì)發(fā)送到服務(wù)器端,在服務(wù)器端php,java等后端語(yǔ)言,會(huì)進(jìn)一步的做處理,進(jìn)行驗(yàn)證和反饋,因?yàn)樵诳蛻舳?瀏覽器)驗(yàn)證,可以節(jié)約大量的服務(wù)器端系統(tǒng)資源,避免頻繁的交互,延遲響應(yīng),提供更好的用戶體驗(yàn)

如何創(chuàng)建正則表達(dá)式

  • 采用new操作符:
var pattern = new RegExp("pattern");  // 第一個(gè)參數(shù)字符串
var pattern = new RegExp("pattern",'ig'); // 第二參數(shù)可選模式參數(shù),模式修飾符,對(duì)字符串某些限制
console.log(Object.prototype.toString.call(pattern));//檢查類型"[object RegExp]"
console.log(new RegExp("pattern"));  // 等價(jià)于/pattern/
console.log(new RegExp("pattern",'ig'));//等價(jià)于 /pattern/gi,其中ig順序任意
  • 字面量表達(dá)式方式
var pattern = /pattern/;      // 用兩個(gè)反斜杠,中間任意字符
var pattern = /pattern/ig;    // 第二個(gè)斜杠后加一個(gè)或者多個(gè)模式修飾符,這里忽略大小寫(xiě),全局匹配

模式修飾符的可選參數(shù)

參數(shù) 含義
i 忽略大小寫(xiě)(ignore)
g 全局匹配(global)
m 多行匹配(multiline)

RegExp對(duì)象與String提供的方法

  • test():一個(gè)用來(lái)測(cè)試在給定字符串里是否存在一個(gè)匹配的正則表達(dá)式的方法,返回布爾值,如果存在,則返回true,如果沒(méi)有,則返回false
  • exec():一個(gè)用來(lái)搜索一個(gè)匹配的regExp方法,用于在字符串中查找指定正則表達(dá)式,如果 exec()方法執(zhí)行成
    功厦凤,則返回包含該查找字符串的相關(guān)信息數(shù)組,如果執(zhí)行失敗,則返回null
  • match(pattern):一個(gè)用來(lái)匹配一個(gè)字符串的string方法,返回pattern中的子串或者null
  • replace(patternReg,replaceReg):一個(gè)用來(lái)完成替換操作的String方法,用replaceReg替換patternReg
  • search(pattern):一個(gè)用來(lái)測(cè)試在某給定字符串里是否存在著一個(gè)匹配的String方法,返回字符串中pattern的開(kāi)始位置
  • split(pattern):一個(gè)用來(lái)把一個(gè)字符串拆分為多個(gè)子串的String方法,返回字符串按指定的pattern拆分成的數(shù)組

模式修飾符i,g

絕大多數(shù)正則表達(dá)式引擎的默認(rèn)行文只是返回第一個(gè)匹配的結(jié)果,如果想要把兩個(gè)或者更多個(gè)匹配的結(jié)果都找出來(lái),通常返回為一個(gè)數(shù)組或者是其他的專用格式,可以使用g修飾符,表示全局匹配,該標(biāo)志將返回一個(gè)包含著所有匹配的結(jié)果數(shù)組.例如:

var str = "my name is suibichuanji,my public numer is itclanCoder";// 待匹配對(duì)象
var pattern = /my/;// 后面無(wú)修飾符惋啃,書(shū)寫(xiě)好正則規(guī)則,然后拿著要待匹配對(duì)象進(jìn)行匹配
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

注意:默認(rèn)行為只返回第一個(gè)匹配的結(jié)果,若匹配到了,就不會(huì)往后匹配了,具體示例驗(yàn)證,可以在線正則表達(dá)式測(cè)試
正則表達(dá)式中是區(qū)分字母大小寫(xiě)的,my與MY是兩個(gè)不同的字符串,可以用修飾符i來(lái)強(qiáng)制匹配不區(qū)分大小寫(xiě)
字母大小寫(xiě)有區(qū)分

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

使用i修飾符,不區(qū)分大小寫(xiě)匹配

var str = "my name is suibichuanji,my public numer is itclanCoder";
var pattern = /MY/i;             // 第二個(gè)斜杠后使用i修飾符,表示忽略大小寫(xiě)
console.log(pattern.test(str));  // true

使用一條語(yǔ)句實(shí)現(xiàn)正則

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"));// 前面是正則規(guī)則.test()方法,圓括號(hào)內(nèi)是要待匹配的對(duì)象與前面的規(guī)則進(jìn)行匹配,其結(jié)果,要么true,要么false

test():該方法用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式

  • 語(yǔ)法:正則規(guī)則.test(待要檢測(cè)的字符串),pattern.test(str);
  • 參數(shù):圓括號(hào)內(nèi)的str表示你想要的檢測(cè)的字符串對(duì)象
  • 返回值:執(zhí)行完與正則規(guī)則匹配后,如果字符串str中含有與pattern匹配的文本的話,那么返回true,否則返回false,具體示例,以上例子可得

exec():在字符串中執(zhí)行匹配搜索返回結(jié)果數(shù)組

  • 語(yǔ)法:正則規(guī)則.exec(待要檢測(cè)的字符串),pattern.exec(str)
  • 參數(shù):str是需要待檢測(cè)的字符串,pattern是我們寫(xiě)的正則規(guī)則
  • 返回值:執(zhí)行完與正則規(guī)則匹配后,若有匹配到,則會(huì)返回一個(gè)數(shù)組,如果未找到匹配,則返回值為null,如下示例
var str = "welcome focus on itclanCoder public Number";
var pattern = /suibichuanji/ig;   // 忽略大小寫(xiě),并且全局匹配
console.log(pattern.exec(str));   // null

使用exec()函數(shù),當(dāng)有匹配時(shí),則返回一數(shù)組

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():一個(gè)用來(lái)匹配一個(gè)字符串的string方法,返回pattern中的子串或者null

注意:使用match()的位置,前面是待要匹配的對(duì)象,而圓括號(hào)內(nèi)是正則表達(dá)式
當(dāng)匹配對(duì)時(shí),結(jié)果返回待匹配的特定字符的子串,該方法類似于indexOf()或者lastIndexOf();但是它返回的是指定的值,而不是字符串的位置

  • 語(yǔ)法:待要檢測(cè)的字符串對(duì)象.match(正則規(guī)則),str.match(pattern)
  • 參數(shù):pattern表示是正則表達(dá)式,可以是在pattern中檢索的字符串,也可以是需要檢索的RegExp對(duì)象
  • 返回:如果匹配到,則返回一成功的數(shù)組,如果沒(méi)有找到任何的一個(gè)匹配,那么它將返回的是null
var str = '"chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人"';
console.log(str.match("chuanchuan"));// ["chuanchuan", index: 1, input: ""chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人""]
var pattern = /chuanchuan/ig; 
var str = '"chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人"';
console.log(str.match(pattern)); // ["chuanchuan", "chuanchuan"]
var str = '"chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人"';
console.log(str.match(/handsome/));// ["handsome", index: 15, input: ""chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人""]

當(dāng)不匹配時(shí),其結(jié)果返回null,同樣要注意圓括號(hào)內(nèi)是正則表達(dá)式與test()和exec()方法不同

var pattern = /隨筆川跡/ig; 
var str = '"chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人"';
console.log(str.match(pattern)); // null

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

注意:search方法查找到即返回,會(huì)忽略g修飾符全局匹配,同時(shí)它也沒(méi)有RegExp對(duì)象的lastIndex的屬性,且總是從字符串開(kāi)始位置進(jìn)行查找,總是返回的是str匹配的第一個(gè)位置查到并返回第一個(gè),若沒(méi)有匹配到,則返回-1

  • 語(yǔ)法:待要檢測(cè)字符串對(duì)象.search(pattern);str.search(pattern)
  • 參數(shù):pattern是正則規(guī)則表達(dá)式,str是要待檢測(cè)的字符串對(duì)象
  • 返回:str中第一個(gè)與RegExp(pattern)對(duì)象相匹配的子串的起始位置,如果沒(méi)有找到任何匹配的子串,則返回-1,若匹配到,則返回該子串的位置,示例代碼如下
var pattern = /隨筆川跡/i; 
var str = "chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人";
console.log(str.search(pattern)); // -1

若匹配到,則返回的是該待匹配對(duì)象子字符串的位置

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

使用replace(pattern,replacePattern)

使用replace方法替換匹配到的數(shù)據(jù)

  • 語(yǔ)法:待檢測(cè)字符串對(duì)象.replace(正則規(guī)則,要替換的文本或者功能函數(shù)),str.replace(pattern,fun);
  • 參數(shù):圓括號(hào)內(nèi)第一個(gè)參數(shù)表示正則規(guī)則,第二個(gè)參數(shù)可以是字符串也可以是函數(shù),在 str中查找與RegExp(pattern)相匹配的子字符串,第二個(gè)參數(shù)值或者功能函數(shù)執(zhí)行結(jié)果來(lái)替換這些子串,如果RegExp(pattern)具有全局標(biāo)志g,那么replace()方法將替換所有匹配的子串,否則,它只替換第一個(gè)匹配子串(也就是說(shuō)默認(rèn)只會(huì)找第一個(gè)子串進(jìn)行返回,若想全局替換,則要加g修飾符),replace()中的第二個(gè)參數(shù),$字符具有特定的含義,它是從模式匹配得到的字符串將用于替換待檢測(cè)字符串文本,具體下節(jié)在做補(bǔ)充
  • 返回:返回替換后的新字符串,示例代碼如下
var pattern = /chuanchuan/i; 
var str = "chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人";
console.log("未使用replace方法之前",str);
console.log("使用replace方法之后",str.replace(pattern,"隨筆川跡"));//未使用replace方法之前 chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人//使用replace方法之后 隨筆川跡 is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人

注意:replace方法替換,也查到后并返回,默認(rèn)返回第一個(gè),如果想要全局匹配替換,那么對(duì)正則使用修飾符g全局匹配,可達(dá)到全局匹配替換

使用split()方法拆分成字符串?dāng)?shù)組

使用方法:待匹配對(duì)象.split(正則規(guī)則確定是以什么樣的格式將該字符串進(jìn)行拆分,可選參數(shù));
第一個(gè)參數(shù)表示以什么樣的格式對(duì)該字符串進(jìn)行拆分,而第二個(gè)參數(shù)可選,若沒(méi)有則是對(duì)整個(gè)字符串的進(jìn)行拆分,若是有數(shù)字參數(shù),則返回的子字符串不會(huì)多于這個(gè)參數(shù)指定的數(shù)組

  • 語(yǔ)法:待匹配對(duì)象.split(第一個(gè)參數(shù)以什么樣的形式將待匹配對(duì)象進(jìn)行拆分必填項(xiàng),可以是字符串或者正則,第二個(gè)為可選參數(shù),用指定拆分后數(shù)組的長(zhǎng)度,若無(wú),則對(duì)待檢測(cè)的整個(gè)字符串進(jìn)行操作),str.split(pattern,2);
  • 參數(shù):pattern可以是字符串也可以是正則規(guī)則,第二個(gè)參數(shù)可選,用于對(duì)待檢測(cè)字符串切割后的數(shù)組長(zhǎng)度,返回的數(shù)組不會(huì)超過(guò)該指定的長(zhǎng)度
  • 返回:一個(gè)字符串?dāng)?shù)組,該數(shù)組通過(guò)在split()圓括號(hào)內(nèi)第一個(gè)參數(shù),指定的邊界處將字符串str分割成子字符串
var pattern = / /i;   // 中間是空格,空格也是字符,用來(lái)分割單詞之間的字符之一,意味著以空格的規(guī)則將字符串進(jìn)行拆分成數(shù)組
var str = "chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人";
console.log("未使用split方法之前",str);
console.log("使用split方法之后",str.split(pattern)); //未使用split方法之前 chuanchuan is handsome man,chuanchuan川川是一個(gè)全宇宙最帥的男人//使用split方法之后 (4) ["chuanchuan", "is", "handsome", "man,chuanchuan川川是一個(gè)全宇宙最帥的男人"]

split():圓括號(hào)后設(shè)置第二個(gè)參數(shù),會(huì)指定返回字符串的長(zhǎng)度

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

可以使用Object.prototype.toString.call()進(jìn)行準(zhǔn)確的確定返回結(jié)果的具體類型
上述String與RegExp對(duì)象提供的方法語(yǔ)法很簡(jiǎn)單,但是真正在使用的時(shí)候,他們之間的組合就非常強(qiáng)大了,要想靈活運(yùn)用,其實(shí)驗(yàn)證某個(gè)模式能不能獲得預(yù)期的匹配結(jié)果不是那么困難,但是如果驗(yàn)證它不會(huì)匹配到你不想要的東西就不簡(jiǎn)單了,往往在使用時(shí),有時(shí)會(huì)忘記他們當(dāng)中的某一個(gè),以至于卡殼,從而不得不向度娘伸手,好像除了多擼,沒(méi)有什么別的好辦法了

小結(jié):各個(gè)方法的差異比較

  • 相同點(diǎn):都是對(duì)待檢測(cè)字符串進(jìn)行操作,會(huì)返回一個(gè)指定的結(jié)果
  • 不同點(diǎn):正則表達(dá)式RegExp對(duì)象中提供的兩個(gè)test(),exec()方法的書(shū)寫(xiě)格式與String()提供的match(),search(),replace(),split()有所不同,前者是:正則規(guī)則.test(待檢測(cè)字符串對(duì)象),pattern.test(str),pattern.exec(str),而后者是:待檢測(cè)字符串對(duì)象.match(正則規(guī)則),str.match(pattern),str.search(pattern),str.replace(pattern,替換的文本或功能函數(shù)),str.split(確定對(duì)待檢測(cè)字符串以什么樣的格式拆分,可選參數(shù)項(xiàng)指定切割后數(shù)組長(zhǎng)度);只要知道RegExp()中的兩個(gè)檢測(cè)方法String()提供的四個(gè)的方法格式相反就可以了

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

枯燥的內(nèi)容來(lái)了,光靠字符右邊的釋義,是記不住的,也是理解不了的,平時(shí)但凡打開(kāi)那種滿屏的表格正則的博文,反正我是看不下去,因?yàn)闆](méi)有示例,我記不住也理解不了,一碼勝千言...
注意:若反斜線后跟元字符,則將失去特殊的含義,比如\.就是表示一個(gè)點(diǎn),反斜杠用來(lái)對(duì)字符進(jìn)行轉(zhuǎn)義,
字符類:單個(gè)字符和數(shù)字
元字符號(hào):

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

點(diǎn).元字符的使用
解釋:匹配除換行符以外的字符(也就是匹配任何單個(gè)字符,字母,數(shù)字,下劃線,甚至字符本身)
使用一個(gè)點(diǎn)符號(hào),只匹配一個(gè)字符,使用test()測(cè)試

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(pattern.test(str)); //true

使用exec()測(cè)試結(jié)果

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(pattern.exec(str)); // ["sui", index: 0, input: "suibichuanji"]

使用match()方法,圓括號(hào)內(nèi)是要待匹配的對(duì)象與前面的規(guī)則進(jìn)行匹配,其結(jié)果,要么true,要么false

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(str.match(pattern));// ["sui", index: 0, input: "suibichuanji"]

使用search方法查找到即返回,也就是說(shuō)無(wú)需g修飾符全局匹配,查到并返回第一個(gè)
若沒(méi)有匹配到,則返回-1

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(str.search(pattern));// 0

使用replace(pattern,replacePattern)
使用replace方法替換匹配到的數(shù)據(jù)

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(str.replace(pattern,"ab"));// abbichuanji

使用split()方法對(duì)指定的字符串進(jìn)行以指定的正則規(guī)則進(jìn)行切割并返回?cái)?shù)組

var str = 'suibichuanji';
var pattern = /s.i/;
console.log(str.split(pattern)); // ["", "bichuanji"]

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

var  str = "itclanCoder 2323535";
var pattern = /[a-z0-9]/; // 匹配區(qū)間里面的任意一個(gè)字符,如有則返回第一個(gè)字符,若無(wú)則返回false毯辅,或者null
console.log(pattern.test(str));// true

若無(wú)字符匹配,使用test()或exec()返回false,或null
test()測(cè)試

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

exec()測(cè)試

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

\d字符
匹配任何一個(gè)數(shù)字字符,等價(jià)[0-9]或者[0123456789]
示例代碼如下
test()方法測(cè)試如下

var str = "345893347852394";
var pattern = /\d/;  // 檢測(cè)匹配數(shù)字
console.log(pattern.test(str));//因?yàn)閟tr確實(shí)含有數(shù)字,只要待匹配的字符串含有數(shù)字,就返回true

exec()測(cè)試結(jié)果

var str = "345893347852394";
var pattern = /\d/;
console.log(pattern.exec(str));// ["3", index: 0, input: "345893347852394"]

[0-9]等價(jià)\d

var str = "345893347852394";
var pattern = /[0-9]/;  // [0-9]使用字符集合區(qū)間[],并用連接符-橫崗
console.log(pattern.test(str));//true

當(dāng)不匹配時(shí),則返回false

var str = "abcdfeffsgsdgasd"; // 字符串中并沒(méi)有包含數(shù)字
var pattern = /[0-9]/; 
console.log(pattern.test(str)); // 所要匹配的字符串中并沒(méi)有包含數(shù)字,false
假若是要與此相反,則使用^
var str = "abcdfeffsgsdgasd"; // 字符串中并沒(méi)有包含數(shù)字
var pattern = /[^0-9]/;       // 注意^應(yīng)放在中括號(hào)里面,它
console.log(pattern.test(str));  // true

\D字符
匹配任何一個(gè)非數(shù)字字符,等價(jià)[^0-9]

var str = "absdjfsksdjg";
var parttern = /^\D/; // 匹配任何一個(gè)非數(shù)字字符等價(jià)[^0-9]
console.log(pattern.test(str));// true

當(dāng)不匹配時(shí):

var str = "";        // 由于沒(méi)有字符
var parttern = /^0-9/;
console.log(pattern.test(str));//由于沒(méi)有字符,所以返回false,注意邏輯

\w字符
匹配任何一個(gè)字母數(shù)字字符(大小寫(xiě)均可),或下劃線,等價(jià)[a-zA-Z0-9_]

var str = "shjfuiewgns_235356345";
var pattern = /\w/; // 匹配[a-zA-Z0-9_]中任意一字符即可
console.log(pattern.test(str)); // 因?yàn)槠ヅ涞淖址?所以結(jié)果true

當(dāng)為空格或者沒(méi)有任何字符時(shí),則為false

var str = " ";  // var str = "";
var pattern = /\w/;
console.log(pattern.test(str)); //false

\W字符
任何一個(gè)非字母數(shù)字或非下劃線字符,等價(jià)于[^a-zA-Z0-9_]

var str = " ";    // 空格
var pattern = /\W/;
console.log(pattern.test(str));// true

^字符
匹配字符串的開(kāi)頭(行首匹配)

var str = "itclanCoder ";
var pattern = /^itclanCoder/; // 注意從開(kāi)頭開(kāi)始匹配,^后面跟著的字符串全匹配
console.log(pattern.test(str));// 只要待匹配的字符串有包含正則所匹配的規(guī)則,都返回true,若不滿足則返回false

不完全匹配時(shí),則返回false

var str = "itclanCode -";
var pattern = /^itclanCoder/;
console.log(pattern.test(str));//false,由此^是對(duì)后面的整個(gè)字符都進(jìn)行匹配限制

$字符
匹配字符串的結(jié)束(行尾匹配)

var str = "itclanCoder";
var pattern = /itclanCoder$/;
console.log(pattern.test(str));//true

同上不匹配時(shí)

var str = "tclanCoder";
var pattern = /itclanCoder$/; // 從結(jié)尾處開(kāi)始匹配,會(huì)與待匹配的字符串向前查找
console.log(pattern.test(str)); // 因?yàn)榕c規(guī)則的正則不完全匹配,所以返回false

^與$結(jié)合使用

var str = "itclanCoder";
var pattern = /^itclanCoder$/; // ^開(kāi)頭是i開(kāi)始匹配,結(jié)尾$開(kāi)始匹配,若待檢測(cè)字符串有一個(gè)與正則表達(dá)式不同,則返回false
console.log(pattern.test(str));// true

待檢測(cè)字符有一處或若干處不同時(shí),則返回false

var str = "itclansdfdCoder";   // 待檢測(cè)字符對(duì)象
var pattern = /^itclanCoder$/;
console.log(pattern.test(str)); // false

\A元字符
只有匹配字符串開(kāi)始處,示例代碼如下

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"]

\b:匹配單詞邊界,一個(gè)單詞的開(kāi)始或者結(jié)尾,并且匹配且匹配一個(gè)位置,不匹配任何字符
示例代碼如下
從末尾開(kāi)始匹配

var  str = "codeincode";
var pattern = /code\b/;   //從末尾處,一個(gè)個(gè)往前匹配,若有則返回,若無(wú)返回null
console.log(pattern.exec(str));// ["code", index: 6, input: "codeincode"]

反例:無(wú)匹配到

var  str = "codeinnode";  
var pattern = /code\b/;// 從后往前逐個(gè)匹配,意味倒數(shù)第四個(gè)是n不是c所以沒(méi)有匹配到,其結(jié)果返回null
console.log(pattern.exec(str));//null

從頭開(kāi)始匹配

var  str = "codeinnode";  
var pattern = /\bcode/;
console.log(pattern.exec(str));// ["code", index: 0, input: "codeinnode"]

從頭開(kāi)始匹配,當(dāng)沒(méi)有時(shí),有一個(gè)字符不匹配時(shí),就會(huì)返回null

var  str = "coceinnode";  
var pattern = /\bcode/;         // 從頭開(kāi)始匹配
console.log(pattern.exec(str)); // 因?yàn)榈谌齻€(gè)字符是c不是d,與所要的正則規(guī)則不匹配,所以返回null

\B:不匹配一個(gè)單詞的邊界,匹配非單詞邊界,與\b相反,可以用來(lái)查找前后都有多于的空格的連字符,在正則里,小寫(xiě)與大寫(xiě),往往功能相反
示例代碼如下:

var str = "javascript is very important skill  -  I love it";
var pattern = /\B-\B/; // 將匹配一個(gè)前后都不是單詞邊界的連字符
console.log(pattern.exec(str));// ["-", index: 36, input: "javascript is very important skill  -  I love it"]

總結(jié):

限于篇幅,本節(jié)內(nèi)容就學(xué)習(xí)到這里了,正則是一個(gè)非常強(qiáng)大的文本匹配工具,用特殊的字符正著去匹配文本還好(其實(shí)也不簡(jiǎn)單),往往需要逆向的去折騰它,就是不在你考慮范圍條件下也要考慮進(jìn)去從而剔除一些程序上的漏洞,是比較難的,至于更多相關(guān)正則的學(xué)習(xí)分享,我將持續(xù)Go on!!

以下是本篇提點(diǎn)概要

  • 正則的使用場(chǎng)景,兩個(gè)最強(qiáng)大的功能就是搜索和替換
  • 什么是正則表達(dá)式,就是用一處理字符串的文本的規(guī)則,來(lái)匹配和處理文本的字符模式的對(duì)象
  • 如何創(chuàng)建正則表達(dá)式,一種是new操作符,另一種就是字面量表示方法
  • RegExp對(duì)象與String提供的方法,其中正則的兩個(gè)test(),exec()與字符串String四個(gè)match(),search(),replace(),split()最為常用,區(qū)別他們的書(shū)寫(xiě)規(guī)則
  • 模式修飾符i,g,m
  • test(),exec(),match(),search(),replace(),split()方法的具體簡(jiǎn)單使用
  • 特殊字符控制特定匹配模式,元字符號(hào),錨字符的使用,至于更多字符使用以后再繼續(xù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末仔蝌,一起剝皮案震驚了整個(gè)濱河市砸逊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掌逛,老刑警劉巖师逸,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異豆混,居然都是意外死亡篓像,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)皿伺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)员辩,“玉大人,你說(shuō)我怎么就攤上這事鸵鸥〉旎” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵妒穴,是天一觀的道長(zhǎng)宋税。 經(jīng)常有香客問(wèn)我,道長(zhǎng)讼油,這世上最難降的妖魔是什么杰赛? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮矮台,結(jié)果婚禮上乏屯,老公的妹妹穿的比我還像新娘。我一直安慰自己瘦赫,他們只是感情好辰晕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著确虱,像睡著了一般含友。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蝉娜,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天唱较,我揣著相機(jī)與錄音,去河邊找鬼召川。 笑死,一個(gè)胖子當(dāng)著我的面吹牛胸遇,可吹牛的內(nèi)容都是我干的荧呐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼倍阐!你這毒婦竟也來(lái)了概疆?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤峰搪,失蹤者是張志新(化名)和其女友劉穎岔冀,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體概耻,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡使套,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鞠柄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侦高。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖厌杜,靈堂內(nèi)的尸體忽然破棺而出奉呛,到底是詐尸還是另有隱情,我是刑警寧澤夯尽,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布瞧壮,位于F島的核電站,受9級(jí)特大地震影響匙握,放射性物質(zhì)發(fā)生泄漏馁痴。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一肺孤、第九天 我趴在偏房一處隱蔽的房頂上張望罗晕。 院中可真熱鬧,春花似錦赠堵、人聲如沸小渊。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)酬屉。三九已至,卻和暖如春揍愁,著一層夾襖步出監(jiān)牢的瞬間呐萨,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工莽囤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谬擦,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓朽缎,卻偏偏與公主長(zhǎng)得像惨远,于是被迫代替她去往敵國(guó)和親谜悟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容