js之正則表達式使用 正則的方法

1.正則表達式組成

正則表達式是由普通字符（例如字符 a 到 z）以及特殊字符（稱爲元字符）組成的文字模式。正則表達式作爲一個模板，將某個字符模式與所搜索的字符串進行匹配

即：

正則表達式 = 普通字符 + 特殊字符

2.匹配符

字符匹配符用於匹配某個或某些字符

2.1 字符簇

在正則表達式中，通過一對方括號括起來的內容，我們就稱之爲“字符簇”，其表示的是一個範圍，但是實際匹配時，只能匹配固定的某個字符。

注意：
字符簇是匹配範圍內的某一個字符

2.1.1 字符簇 <==> 匹配內容

字符簇	代表意義
[a-z]	匹配小寫字母從a-z中的任一字符
[A-Z]	匹配大寫字母從A-Z中的任一字符
[0-9]	匹配數字從0-9任一字符
[0-9a-z]	匹配數字從0-9或小寫字母從a-z任一字符
[0-9a-zA-Z]	匹配數字從0-9，小寫字母從a-z或者是大寫字母從A-Z的任一字符
[0-9a-zA-Z_]	匹配包括下劃線的任何單詞字符

2.1.2 特殊符號 ^ ( 內容取反 )

在字符簇中存在一個特殊符號 ^（脫字節），脫字節在字符簇代表取反的含義

字符簇	代表意義
[^a-z]	匹配除小寫字母從a-z以外的任一字符
[^0-9]	匹配除數字從0-9以外的任一字符
[^abcd]	匹配除abcd以外的任一字符

2.1.3 特殊字符

在正則表達式中還有一類特殊字符:

特殊字符	對應字符簇
\d	匹配一個數字字符，用字符簇表示[0-9]
\D	匹配一個非數字字符，也可以使用字符簇[0-9]或[^\d]來表示
\w	匹配包括下劃線的任何單詞字符，用字符簇[0-9a-zA-Z_]
\W	匹配任何非單詞字符，[^0-9a-zA-Z_]或[^\w]
\s	匹配任何空白字符，空格、製表符、換行符都可以通過\s匹配
\S	匹配任何非空白字符，[^\s]
.	匹配除 " \n " 之外的任何單個字符

如：

//匹配cd的任一字符
var str = 'abcdefg'
var reg = /[cd]/gi
console.log(str.match(reg))   //["c", "d"]

//匹配任何任何單詞字符
var str = 'abcfefg_$@'
var reg = /\w/gi
console.log(str.match(reg)) //["a", "b", "c", "f", "e", "f", "g", "_"]

//匹配符號 @
var str = 'abcfefg_$@123'
var reg = /@/gi
console.log(str.match(reg))  //["@"]

//匹配所有空白字符 
var str = 'abcfef g_$@'
var reg = /\s/gi
console.log(str.match(reg))   //[" "]

3.限定符

限定符可以指定正則表達式的一個給定組件必須要出現多少次才能滿足匹配。

*：匹配前面的子表達式零次或多次，0到多，可以使用{0,}代替

+：匹配前面的子表達式一次或多次，1到多，可以使用{1,}代替

?：匹配前面的子表達式零次或一次，0或1，可以使用{0,1}代替

{n}：匹配確定的 n 次，如{18}，連續匹配18次

{n,}：至少匹配n 次，如{1,}，代表最少匹配1次

{n,m}：最少匹配 n 次且最多匹配 m 次，如{1,7}代表最少匹配1最多匹配7次

示例：

//匹配 連續4位數字
var str = 'z1234xc12345v'
var reg = /\d{4}/gi
console.log(str.match(reg))  //["1234", "1234"]

//匹配 至少連續2位 數字
var str = 'z12xc123v'
var reg = /\d{2,}/gi
console.log(str.match(reg))  //["12", "123"]

4.貪婪匹配 & 非貪婪匹配

能匹配多的就不匹配少的情況，就稱之爲“貪婪匹配原則”

能匹配少的就不匹配多的，“非貪婪匹配原則”
在正則表達式我們也可以在限定符的後面添加一個問號（？）

{3,5}? // 原來是默認貪婪匹配，匹配5個；現在加了 ？ ，非貪婪匹配模式，匹配到3個即可

示例：

//匹配{2,3}  貪婪模式，即匹配最多位
var str = 'z123xc1234v'
var reg = /\d{2,3}/gi
console.log(str.match(reg)) //["123", "123"]

//匹配{2,3}  非貪婪模式，即匹配最少位
var str = 'z12xc123v'
var reg = /\d{2,3}?/gi
console.log(str.match(reg)) // ["12", "12"]

5.定位符

定位符可以將一個正則表達式固定在一行的開始或結束。也可以創建只在單詞內或只在單詞的開始或結尾處出現的正則表達式。

“ 小括號就是括號內看成一個整體 ,中括號就是匹配括號內的其中一個”

^ ：匹配輸入字符串的開始位置（以***開始）

$ ： 匹配輸入字符串的結束位置（以***結束）

\b ： 匹配一個單詞邊界（字符串開頭、結尾、空格、逗號、點號等符號）

\B ： 匹配非單詞邊界

示例：

//驗證手機格式
var str = '15212345678'
var reg = /^1[3456789]\d{9}$/gi   
//全局匹配不區分大小寫  以1開頭 + 第二位是[3456789]中的一位 + 連續9位數字結束

//或者
// var reg = /^1(3|4|5|6|7|8|9)\d{9}$/gi

if(reg.test(str)){
	console.log('合理的手機號')
}else{
console.log('不合理')
}

處理邊界與非邊界

var str = 'hello,my name id zhangsan'
var reg = /\Ban\B/gi

//匹配 第一個an字符
console.log(str.match(reg))   //["an"]
//使用lastIndex獲取最後一次匹配到的索引值
console.log(reg.lastIndex)    // 0

6.轉義符

在正則表達式中，如果遇到特殊符號，我們必須要使用轉義字符（反斜槓\）來進行轉義

(，)，[，]，*，+，?，.，/，\，^，$
這些特殊符號均需要進行轉義

示例：

//匹配 $ 符號
var str = '!@#$%^&*()-+?'
var reg = /\$/gi
console.log(str.match(reg))  //["$"]

7.選擇匹配符

在正則表達式，如果要匹配的內容包含多個選擇，我們可以通過|選擇匹配符來進行匹配

代碼示例：

//定義正則，匹配 helloVue 或者  helloReact
var str = 'helloVue,helloReact'
var reg = /hello(Vue|React)/gi
console.log(str.match(reg))   // ["helloVue", "helloReact"]

8.特殊用法

8.1 正向預查

(?=) ：正向預查

匹配結果?=匹配條件，必須滿足匹配條件，才能輸出匹配結果

代碼示例：

//匹配後面是 NB 的超人
var str = '超人NB,超人NP'
var reg = /超人(?=NB)/gi
console.log(str.match(reg))  // ["超人"]  匹配的是後面爲 NB 的超人
console.log(reg.lastIndex)   //  0

8.2 負向預查

(?!) ：負向預查

代碼示例：

//匹配後面不是 NB 的超人
var str = '超人NB,超人NP'
var reg = /超人(?!NB)/gi
console.log(str.match(reg))  // ["超人"]  匹配的是後面不爲 NB 的超人
console.log(reg.lastIndex)   //  0

8.3 輸出內容，但不捕獲

(?😃 ：輸出內容，但不捕獲
代碼示例：

//匹配 helloVue 或 helloReact
var str = 'helloVue,helloReact'
var reg = /hello(?:Vue|React)/gi   
var row;
while(row = reg.exec(str)){
document.write(row+'<hr>')
}
//

9.正則常用的方法

轉載 mengxiaohuan314

推薦看這篇csdn，很詳細 → 只爭朝夕

test()，exec() ， match() ， replace()

9.1 test()

驗證字符串是否和正則相匹配

用法：regexp.test(string)

結果：若匹配返回true，若不匹配返回false

9.2 exec()

將字符串中匹配的內容捕獲出來，只會捕獲一次

用法：regexp.exec(string)

返回值：是一個數組，若無分組則數組裏的內容包含三項，分別是匹配的內容、匹配內容的起始索引、原字符串

exec()處理分組
返回值：

• 第一項是匹配的內容
• 第二項開始是分組（括號裏匹配）的內容，有幾個分組就有幾項
• 倒數第二項是匹配內容的起始索引
• 倒數第一項是原字符串

注意：若不需要捕獲分佈的內容，則在不需要捕獲分組的裏面加上原字符 ?:（匹配不捕獲）

var str = "2019ceshi2020";
 
var reg = /\d\w/;
console.log(reg.exec(str));  //["20", index: 0, input: "2019ceshi2020", groups: undefined]
 
var reg = /(\d)(\w)/;
console.log(reg.exec(str));  //["20", "2", "0", index: 0, input: "2019ceshi2020", groups: undefined]
 
var reg = /(?:\d)(?:\w)/;
console.log(reg.exec(str));   //["20", index: 0, input: "2019ceshi2020", groups: undefined] 

9.3 match()

將字符串中匹配的內容捕獲出來

用法：string.match(regexp)

若加上量詞g則一次性捕獲所有匹配的內容放到數組裏返回，若不加則與exec()的返回值一樣

9.4 replace()

將字符串中匹配的內容捕獲出來

用法：string.replace(值類型 | regexp, 值類型 | 回調函數)

該方法不改變原有字符串

經典例題：

//大寫數字替換小寫數字
var str = "38576";
var a = ["零","壹","貳","叄","肆","伍","陸","柒","捌","玖"];
str = str.replace(/\d/g, function () {
    return a[arguments[0]];
});
console.log(str);//叄捌伍柒陸 

//排除法
//獲取地址欄中的參數並放入對象中
var str = "http://www.baidu.com?id=557131028857&name=ceshi&age=8";
var reg = /([^?=&]+)=([^?=&]+)/g;
var obj = {};
str.replace(reg, function ($0, $1, $2) {
    obj[$1] = $2;
});
console.log(obj);//{id: "557131028857", name: "ceshi", age: "8"} 

//去掉html標籤
var str="<div id='div1' class='aa'>皇帝被廢，太后痛哭流涕，</div><p>皇室威嚴掃地，羣臣無不悲憤。</p>";
var reg = /<[^<>]+>/g;
str = str.replace(reg,"");
console.log(str);//皇帝被廢，太后痛哭流涕，皇室威嚴掃地，羣臣無不悲憤。