正則基礎知識

創建正則表達式

1.使用new來創建

 var exp = new RegExp('box' , 'gi' );

  

g	全局匹配
i	忽略大小寫
m	多行匹配

  

2.使用字面量

var exp =/box/gi;

  

直接用2個 / ;

在倆個斜杠后加上模式修飾符;

倆種創建方式比較:

1.使用字面量方式創建用的更加廣泛;

2.當要匹配的內容是變量時,只能使用new來創建.

正則表達式的測試

1.test( )

正則表達式對象.test(字符串)

參數:要匹配的字符串

返回值:匹配成功返回true,失敗返回false

例1:
var exp = /Box/i;
var str = 'box' ;
alert(exp.test(str));
=>   true     忽略大小寫 ;

  

例2:
var exp = /abc/g;
var str = 'abcab';
var res = exp.test(str);
console.log(res);
console.log(exp.test(str));
console.log(exp.test(str));
=>   true       //從第一個開始匹配,匹配到了abc 返回true;   
=>   false      //由于開啟了全局匹配,所以從上次匹配之后的位置開始匹配(也就是從第二個a開始);   若沒有g 則每次都會從頭開始匹配
=>   true       //由于上次匹配是false并且已經將字符串str查找完了,所以又從頭開始匹配

  

注:

? 開啟了全局匹配g后,正則表達式內部有一個lastIndex的屬性,用以記錄下次開始查找的下標,保證其每次從lastIndex的位置開始查找

例3:
var exp = /abc/g;                   //同一正則表達式匹配不同字符串
var str1 = 'abc';
var str2 = 'abcab';
console.log(exp.test(str1));
console.log(exp.test(str2));
=>   true;              //從str1的0位開始匹配,匹配到了abc,返回true,  此時lastIndex為3
=>   false;             //從str2中lastIndex的位置開始匹配,也就是從第二個a開始

  

例4:
var exp1 = /abc/g;                  //不同正則表達式匹配同一字符串
var exp2 = /abc/g;
var str = 'abc';
console.log(exp1.test(str));
console.log(exp2.test(str));
=>   true;              //從str1的0位開始匹配,匹配到了abc,返回true
=>   true;              //從str1的0位開始匹配,返回true

  

2.exec( )

exec(字符串):該方法為專門為捕獲組而設計的

參數:要匹配的字符串

返回值:返回的是一個數組。如果不匹配則返回null

關于返回值數組的說明:

它確實是Array的實例。

但是這個數組有兩個額外的屬性:index和 input

index:表示匹配的字符串在源字符串中的索引

input:表示匹配的源字符串。

數組的第一項是與整個模式匹配的字符串,其他項是與模式中捕獲組匹配的字符串

如果沒有捕獲組,則數組中只有第一項。關于捕獲組的概念以后再說

例1:var exp = /abc/gi;var str = "aaabcccdabcAbcAdaBc";var strNew = "";while (strNew=exp.exec(str)){           //使用while循環,將所有匹配到字符串輸出來console.log(strNew[0])              //由于返回的是一個帶有很多屬性的數組,所以我們只要數組中的字符串,也就是索引為0.}

  

正則表達式的規則

字符類:單個字母數字下劃線
.                                   //匹配除換行符外的任意字符(當點放在[]中是,沒有特殊意義)
var exp = /\d/g;                    // [0-9]
var exp = /\D/g;                    //[^0-9]
var exp = /\w/g;                    //[a-zA-Z0-9_];
var exp = /\W/g;                    //[^a-zA-Z0-9_];

  

字符類:空白字符
\0                             匹配null 字符
\b                             匹配退格字符
\n                             匹配換行符
\r                             匹配回車字符
\t                             匹配制表符
\s                             匹配空白字符、空格、制表符和換行符
\S                             匹配非空白字符

  

單詞邊界
\b
示例
/\bcat\b/  匹配到cat這個單詞

  

/B 非單詞邊界

  

元字符/元符號                    匹配情況
^                             行首匹配
$                             行尾匹配

  

字符類:重復字符
元字符/元符號                                匹配情況
?  例如(x?)                            匹配0個或1 個x
*  例如(x*)                            匹配0個或任意多個x
+  例如(x+)                            匹配至少一個x
(xyz)+                                     匹配至少一個(xyz)
{m,n} 例如x{m,n}  n>=次數>=m            匹配最少m個、最多n個x
{n}                                        匹配前一項n次     
{n,}                                    匹配前一項n次,或者多次

  

1.[ ]

匹配[ ]內的任意一個字符

var exp = /[abc]/gi;                // []內代表匹配其中的一個字符: a 或 b 或 c
var exp = /[a-zA-Z0-9_$]/g;         //匹配26個大小寫字母,0-9數字,下劃線_  美元符$ 中的任意一個;
var exp = /[^a-zA-Z]/g              //匹配任意不在括號中的字符集中的字符;
[ ]也可以配合? * + {} 來使用; 如[a-z]+ 匹配至少一個[a-z]范圍內的任意一個;

  

2. ^

倆種用法:

1.放在[ ] 內 表示非

var exp = /[^a-zA-Z]/g              //匹配任意不在括號中的字符集中的字符;

2.放在[ ] 外,表示行首匹配

var exp = /^\d/g;                   //規定行首必須是數字     
var str = '123qq';                  
console.log(exp.test(str));         //行首為數字1,返回true;  
console.log(exp.lastIndex);         //此時lastIndex 為1
console.log(exp.test(str));         //從下標為1的位置開始匹配,雖然下標為1的位置是數字,但卻不是行首,返回false;

  

3. $

表示行尾匹配,用法與^ 相近

^ 和 $ 合用

var exp = /^\d\d$/g;                //規定行首和行尾必須是數字
var str = '12';
var str2 = '123';console.log(exp.test(str));     // trueconsole.log(exp.lastIndex);     // 2console.log(exp.test(str));     //falseconsole.log(exp.lastIndex);     //0console.log(exp.test(str));     //trueconsole.log(exp.test(str2));    //false     //exp中規定了行首行尾為數字,中間無內容

  

4. .

匹配除換行符外的任意字符(當點放在[ ]中是,沒有特殊意義)

var exp = /./g;
var str = 'a';
console.log(exp.test(str));
=>    true

  若想匹配它本身.

var exp = /\./g;

  

5. |

擇一匹配(管道符號) 表示或

var exp = /a|b/g;
var str = 'a';
console.log(exp.test(str));
=>    true

  數量詞的匹配:默認都是貪婪匹配

6. ?

匹配0個或者1個

7. *

匹配0個或者多個

var exp = /a*/g;
var str = 'aaaaa';console.log(exp.test(str));         //trueconsole.log(exp.test(str));         //true

  

8. +

匹配1個或多個

var exp = /a+/g;
var str = 'aaaaa';console.log(exp.test(str));         //trueconsole.log(exp.test(str));         //false

  

9. {n}

匹配n個,只能是n個

10. {n,}

匹配至少n個

11. {n,m}

匹配至少n個,最多m個

基本的正則表達式驗證

寫一個正在表達式,判斷手機號是否合法
var exp = /1[34578]\d{9}$/g;
var str = '13979318939';console.log(exp.test(str));
=> true
寫一個正在表達式,判斷郵箱是否合法
var exp = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi;
var str = '133_d@cn.com.cn';console.log(exp.exec(str)[0]);
=>  133_d@cn.com.cn   
寫一個正則表達式,判斷圖片的地址是否合法
var exp = /^(http|https):\/\/.+\.(jpg|jpeg|gif|png)$/gi;
var str = 'http://3323498dsfledf.png';console.log(exp.exec(str)[0]);
=>  http://3323498dsfledf.png
寫一個正則表達式,爬取一堆字符串中的所有圖片地址
var exp = /http:\/\/[^:]+\.(jpg|jpeg|gif|png)/gi;
寫一個正則表達式,將字符串中的重復去掉
var exp = /(.)\1+/gi;
var str = "aabbccdd";   console.log(str.replace(exp,'$1'));
=>  abc

  

分組
其中分組體現在:所有以(和)元字符所包含的正則表達式被分為一組,每一個分組都是一個子表達式,它也是構成高級正則表達式的基礎。如果只是使用簡單的(regex)匹配語法本質上和不分組是一樣的,如果要發揮它強大的作用,往往要結合回溯引用的方式。var str = '123-mm';
var strReg = str.replace(/(\d+)-([A-Za-z]+)/g,'$2');
console.log(strReg)//mm  上面那段$2這個就是表示正則第二組個匹配到的內容

  

?

方法

1.search( )
str.search(exp);檢索與正則表達式相匹配的第一個匹配項的索引。返回值: 索引 ,沒有返回-1;

  注:search( )不支持全局,每次調用總是從0開始查找.加不加g都一樣

2.match( )
str.match(exp);把滿足正則表達式的所有字符串一起返回返回值: 數組 ,沒有返回null;var str = "abc134ABC244co9";console.log(str.match(/\d+/gi));            //獲取str中的所有數字的數組
=>  ["134","244","9"]

  注:如果想獲取所有的滿足的,應該使用全局g,使用全局的時候,分組的信息則拿不到

3.replace( )
str.replace(exp,newStr);將正則表達式替換返回值: 替換之后的字符串var str = "123aaa244";console.log(str.replace(/\d/gi,""));        //將str中的數字全部去掉
=>  aaa     寫一個正則表達式,將字符串中的重復去掉
var exp = /(.)\1+/gi;
var str = "aabbccdd";   console.log(str.replace(exp,'$1'));
=>  abc  

  

4.split( )
str.split(exp,length);length:可選參,切出來的數組的最大長度使用split 拆分成字符串數組返回替換之后的字符串var str = "102dsfe00dfefsf55";
var exp = /\D+/gi;                              //用所有非數字來切割console.log(str.split(exp));    
=>  ["102","00","55"]

 https://www.cnblogs.com/moqing/archive/2016/07/13/5665126.html

?

?

/*** @description:萬能判斷* @param {type}* value/判斷的焦點* type:   1/false(默認undefind也是false) 2/與焦點比對類型(小寫)* @return:1/焦點類型(小寫)                2/boolean*/
function checkType(value, type) {const prototypeString = Object.prototype.toString.call(value)const typeString = prototypeString.replace(/\S*\s|]/gi, '').toLowerCase()return type ? type == typeString : typeString
}
export default checkType

?

  

匹配出現a或者b組合一起至少3次以上/(a|b){3,}/,匹配aaa,bbb,aab,baa,bba,bab等等

  

?

?

?

正則表達式------捕獲性分組,非捕獲性分組,前瞻,后瞻捕獲性分組
javascript中捕獲性分組是以小括號()來實現,捕獲性分組工作模式()會把每個分組里匹配的值保存起來。比如利用捕獲性分組把 hello world 互換成 world hello:方法一:通過exec函數var str = 'hello world';            //首先創建好字符串
var pattern = /([a-z]+)\s([a-z]+)/; //先通過正則匹配這個字符串,用分組模式來獲取這兩個單詞
var arr = pattern.exec(str); // exec方法返回的是一個數組,包含匹配到的字符串以及分組(也稱子串)里的值console.log(arr); //['hello world','hello','world']  
console.log(arr[0]); //'hello world' 匹配到的字符串
console.log(arr[1]); //'hello' 第一個分組([a-z]+)的值
console.log(arr[2]); //'world' 第二個分組([a-z]+)的值//這時候兩個分組的值都得到了,接下來用字符串拼接法實現互換
var n_str = arr[2]+' '+arr[1];
console.log(n_str) //world hello方法二:通過屬性$1-9var str = 'hello world';            
var pattern = /([a-z]+)\s([a-z]+)/; 
pattern.test(str); //這個地方必須運行正則匹配一次,方式不限,可以是test()、exec()、以及String的正則方式console.log(RegExp.$1) //'hello' 第一個分組([a-z]+)的值
console.log(RegExp.$2) //'world' 第二個分組([a-z]+)的值var n_str = RegExp.$2+' '+RegExp.$1;
console.log(n_str) //world hello方法三:通過String的replace()var str = 'hello world'; 
var pattern = /([a-z]+)\s([a-z]+)/; 
var n_str = str.replace(pattern,"$2 $1"); //這里的$1、$2與方法二里的RegExp.$1、RegExp.$2作用是相同的。
console.log(n_str) //world hello非捕獲性分組:(?:)
非捕獲性分組工作模式下分組(?:)會作為匹配校驗,并出現在匹配結果字符里面,但不作為子匹配返回。比如利用非捕獲性分組獲取字符串000aaa111,而且只返回一個值為aaa111的數組://先看用捕獲性分組匹配會返回什么
var str1 = '000aaa111';             
var pattern = /([a-z]+)(\d+)/; //捕獲性分組匹配
var arr = pattern.exec(str1);  
console.log(arr) //['aaa111','aaa','111']   結果子串也獲取到了,這并不是我們想要的結果//非捕獲性分組
var str2 = '000aaa111';
var pattern2 = /(?:[a-z]+)(?:\d+)/; //非捕獲性分組匹配
var arr2 = pattern.exec(str2);  
console.log(arr2) //['aaa111']  結果正確  前瞻:(?=)和(?!)
前瞻分為正向前瞻和反(負)向前瞻,正向前瞻(?=表達式)表示后面要有什么,反向前瞻(?!表達式)表示后面不能有什么。前瞻分組會作為匹配校驗,但不出現在匹配結果字符里面,而且不作為子匹配返回。正向前瞻匹配一批圖片格式:
//正向前瞻,匹配.jpg后綴文件名
var str = '123.jpg,456.gif,abc.jpg';
var partern = /\w+(?=\.jpg)/g; //正向前瞻匹配
console.log(str.match(partern)); //['123', 'abc']   返回結果正確,沒有匹配456.gif反向前瞻匹配一批字母加數字:
//反向前瞻,匹配3個及以上的a,而且后面不能有000的字符
var str = 'aaa000 aaaa111 aaaaaaa222';
var partern = /a{3,}(?!000)/g; //反向前瞻匹配
console.log(str.match(partern)); //['aaaa', 'aaaaaaa']   返回結果正確,沒有匹配aaa000前瞻,可以放在位置不固定,可前匹配和后匹配,如:/(?=.jpg)\w+/g;后顧:(?<=)和(?<!) —JavaScript不支持
后顧分為正向后顧和反(負)向后顧,正向后顧(?<=表達式)表示前面要有什么,反向后顧(?<!表達式)表示前面不能有什么。
/正向后顧
(?<=abc) //前面需要有abc//反向后顧
(?<!abc) //前面不能有abc名詞解釋:前瞻 = 先行斷言
(?=) 正向前瞻 = 正向零寬先行斷言
(?!) 反向前瞻 = 負向前瞻 = 負向零寬先行斷言后顧 = 后發斷言
(?<=) 正向后顧 = 正向零寬后發斷言
(?<!) 反向后顧 = 負向后顧 = 負向零寬后發斷言備注,總結
可以通過多個前瞻組合一塊控制,字符串里邊必須包含指定字符。
示例:
(?=.[0-9].)(?=.[A-Z].)(?=.[a-z].).{6,20} 可以匹配包含大寫字母,小寫字母,數字

  

轉載于:https://www.cnblogs.com/smzd/p/8798805.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249906.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249906.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249906.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

詳解 vue-cli 的打包配置文件代碼

一、前言 對于webpack基礎不好&#xff0c;node指令不通的童鞋。估計對自己搭建Vue、react腳手架是相當頭疼的&#xff0c;有種無從下手的感覺。然而&#xff0c;從頭看這2塊&#xff0c;耗時太長&#xff0c;而且說實話得練才行&#xff0c;不練練手看不明白。那大多數人就采…

室內定位(一)

轉自&#xff1a;http://www.cnblogs.com/rubbninja/ 各種室內定位方法 具體的室內無線定位技術可以這樣來分類&#xff1a; 無線設備&#xff1a;WIFI、藍牙、ZigBee、RFID、UWB、LED、紅外線、超聲波、麥克風等定位信息&#xff1a;主要是RSS&#xff08;接收信號強度&#x…

不同瀏覽器css引入外部字體的方式

/*** 字體后綴和瀏覽器有關&#xff0c;如下所示* .TTF或.OTF&#xff0c;適用于Firefox 3.5、Safari、Opera * .EOT&#xff0c;適用于Internet Explorer 4.0 * .SVG&#xff0c;適用于Chrome、IPhone * 比如:*/ font-face {font-family: MyFont;/*定義字體名稱*/src: url(fon…

Promise實踐

var doSomething function() { return new Promise((resolve, reject) > { resolve(返回值); }); };let doSomethingElse function() { return 新的值; }doSomething().then(function () { return doSomethingElse(); }).then(resp > { console.warn(resp); console.wa…

JsonBuilder初出茅廬

互聯網這股東風不久前刮到了甘涼國&#xff0c;國王老甘獨具慧眼&#xff0c;想趕緊趁著東風未停大力發展移動互聯網&#xff0c;因為他篤信布斯雷的理論&#xff1a;“站在風口上&#xff0c;豬都能飛起來”。無奈地方偏僻落后&#xff0c;國內無可用之才啊。老甘一籌莫展的低…

vue-cli 打包部署

1、一般打包 &#xff1a;直接 npm run build。&#xff08;webpack的文件&#xff0c;根據不同的命令&#xff0c;執行不同的代碼的&#xff09; 注&#xff1a;這種打包的靜態文件&#xff0c;只能放在web服務器中的根目錄下才能運行。 2、在服務器中 非根目錄下 運行的 打包…

EXCEL怎么打20位以上的數字?

EXCEL怎么打20位以上的數字&#xff1f; 轉載于:https://www.cnblogs.com/macT/p/10208794.html

vue render函數

Vue中的Render渲染函數 VUE一般使用template來創建HTML&#xff0c;然后在有的時候&#xff0c;我們需要使用javascript來創建html&#xff0c;這時候我們需要使用render函數。比如如下我想要實現如下html&#xff1a; <div id"container"><h1><a hre…

Nexus介紹

轉自&#xff1a;https://www.cnblogs.com/wincai/p/5599282.html 開始在使用Maven時&#xff0c;總是會聽到nexus這個詞&#xff0c;一會兒maven&#xff0c;一會兒nexus&#xff0c;當時很是困惑&#xff0c;nexus是什么呢&#xff0c;為什么它總是和maven一起被提到呢&#…

vue-cli 打包

一項目打包 1 打包的配置在 build/webpack.base.conf.js文件下 常量config在vue/config/index.js 文件下配置&#xff0c;__dirname是定義在項目的全局變量&#xff0c;是當前文件所在項目的文件夾的絕對路徑。 2 需要修改vue/config/index.js 文件下的將build對象下的assets…

乘風破浪:LeetCode真題_010_Regular Expression Matching

乘風破浪&#xff1a;LeetCode真題_010_Regular Expression Matching 一、前言 關于正則表達式我們使用得非常多&#xff0c;但是如果讓我們自己寫一個&#xff0c;卻是有非常大的困難的&#xff0c;我們可能想到狀態機&#xff0c;確定&#xff0c;非確定狀態機確實是一種解決…

python——獲取數據類型

在python中&#xff0c;可使用type()和isinstance()內置函數獲取數據類型 如&#xff1a; &#xff08;1&#xff09;type()的使用方法&#xff1a;    >>> a 230 >>> type(a) <class str> >>> a 230 …

vue項目工程中npm run dev 到底做了什么

npm install 安裝了webpack框架中package.json中所需要的依賴 2.安裝完成之后&#xff0c;需要啟動整個項目運行&#xff0c;npm run 其實執行了package.json中的script腳本&#xff0c;npm run dev的執行如下 3.底層相當執行webpack-dev-server --inline --progress --confi…

JavaScript回顧與學習——條件語句

一、if...else // if elsevar age 16;if(0 < age && age < 6){console.log("兒童");}else if(6 < age && age < 14){console.log("少年");}else if(14 < age && age < 35){console.log("青年");}els…

bat等大公司常考java多線程面試題

1、說說進程,線程,協程之間的區別 簡而言之,進程是程序運行和資源分配的基本單位,一個程序至少有一個進程,一個進程至少有一個線程.進程在執行過程中擁有獨立的內存單元,而多個線程共享內存資源,減少切換次數,從而效率更高.線程是進程的一個實體,是cpu調度和分派的基本單位,是比…

webpack.config.js和package.json

webpack.config.js 是webpakc的配置文件&#xff0c;webpack是當今很火的一個打包工具 使用webpack.config.js在你的項目里 可以對你的項目進行模塊化打包&#xff0c;并且也可使組件按需加載&#xff0c;還可將圖片變成base64格式減少網絡請求。 而package.json 是指你項目的…

七牛云圖片加載優化

?imageView2/2/w/80https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2 ?imageView2/1/w/80/h/80會裁剪 ?imageView2/3/w/80/h/80不會裁剪 轉載于:https://www.cnblogs.com/smzd/p/9025393.html

org.apache.maven.archiver.mavenarchiver.getmanifest怎么解決

原因就是你的maven的配置文件不是最新的 1.help ->Install New Software -> add ->https://otto.takari.io/content/sites/m2e.extras/m2eclipse-mavenarchiver/0.17.2/N/LATEST 或者&#xff08;更新于2018年4月18日17:07:53&#xff09; http://repo1.maven.org/mav…

npm中package.json詳解

通常我們使用npm init命令來創建一個npm程序時&#xff0c;會自動生成一個package.json文件。package.json文件會描述這個NPM包的所有相關信息&#xff0c;包括作者、簡介、包依賴、構建等信息&#xff0c;格式是嚴格的JSON格式。 常用命令 npm i --save packageName 安裝依賴…

offset系列,client系列,scroll系列回顧

一 scroll系列屬性 ——滾動1 scrollHeight/scrollWidth 標簽內部實際內容的高度/寬度ele.scrollHeight 有兩種情況&#xff0c;當內容超出盒子范圍后&#xff0c;返回的是內容的高度&#xff0c;包括padding&#xff0c;從頂部內側到內容的最外部分。當內容不超出盒子范圍…