JavaScript正則表達式

JavaScript的正則表達式

1、使用方式簡單介紹：

1.字面量

(1)

let reg = /\bis\b/;
let test = 'She is a beautiful girl.He is a handsome boy.You are a dog.';
layer.alert(test.replace(reg, 'IS'));

結果：

She IS a beautiful girl.He is a handsome boy.You are a dog.

(2) 這裏只替換了第一個is，若是要全局替換，在後面加個g

let reg = /\bis\b/g;
let test = 'She is a beautiful girl.He is a handsome boy.You are a dog.';
layer.alert(test.replace(reg, 'IS'));

結果：

She IS a beautiful girl.He IS a handsome boy.You are a dog.

2.構造函數

(1)

let reg = new RegExp('\\bis\\b');
let test = 'She is a beautiful girl.He is a handsome boy.You are a dog.';
layer.alert(test.replace(reg, 'IS'));

結果：

She IS a beautiful girl.He is a handsome boy.You are a dog.

(2) 若是要全局替換，在後面加個g

let reg = new RegExp('\\bis\\b', 'g');
let test = 'She is a beautiful girl.He is a handsome boy.You are a dog.';
layer.alert(test.replace(reg, 'IS'));

結果：

She IS a beautiful girl.He IS a handsome boy.You are a dog.

匹配符：

• g : global全局搜索，默認不添加，匹配到第一個中止
• i : ignore case忽略大小寫，默認大小寫敏感
• m : multiple lines多行搜索

2、元字符

• 應注意這些  *  +  ?  $  ^  .  |  (  )  {  }  [  ]

3、字符類

1.將abc中任意字符替換成M

let reg = /[abc]/g;
let test = '1a2b3c4d';
layer.alert(test.replace(reg, 'M'));

結果：

1M2M3M4d

2.取反，除了abc之外的全部字符都替換成M

let reg = /[abc]/g;
let test = '1a2b3c4d';
layer.alert(test.replace(reg, 'M'));

結果：

MaMbMcMM

4、範圍類

let reg = /[a-zA-Z]/g;
let test = '1a2b3c4d5A6F7X8Z';
layer.alert(test.replace(reg, 'M'));

結果：

1M2M3M4M5M6M7M8M

5、預約義類

• . 除了回車符和換行符之外的全部字符
• \d 數字字符
• \D 非數字字符
• \s 空白字符
• \S 非空白字符
• \w 單詞字符(字母、數字、下劃線)
• \W 非單詞字符
• \D 非數字字符
• \D 非數字字符
• \D 非數字字符
• \D 非數字字符

邊界匹配字符：

• ^ 以xxx開始
• $ 以xxx結尾
• \b 單詞邊界
• \B 非單詞邊界

6、量詞

• ? 至多出現一次
• + 至少出現一次
• * 出現任意次
• {n} 出現n次
• {n,m} 出現n到m次
• {n,} 至少出現n次
• {0,m} 最多出現m次

7、貪婪模式與非貪婪模式

1.貪婪模式(儘量多的匹配)

let reg = /\d{3,6}/g;
let test = '12345678';
layer.alert(test.replace(reg, 'X'));

結果：

X78

2.非貪婪模式(儘量少的匹配)

let reg = /\d{3,6}?/g;
let test = '12345678';
layer.alert(test.replace(reg, 'X'));

結果：

XX78

8、分組

1.匹配數字加小寫字母連續出現3次的場景

let reg = /(\d[a-z]){3}/g;
let test = '1a2b3c4d';
layer.alert(test.replace(reg, 'X'));

結果：

X4d

2.或

let reg = /1a2b3c(4d|5e)6f7g8h/g;
let test = '1a2b3c4d6f7g8h 1a2b3c5e6f7g8h';
layer.alert(test.replace(reg, 'X'));

結果：

X X

3.反向引用(捕獲分組中內容)

let reg = /(\d{4})-(\d{2})-(\d{2})/g;
let test = '2019-10-30';
layer.alert(test.replace(reg, '$2/$3/$1'));

結果：

10/30/2019

注：

let reg = /(?:\d{4})-(\d{2})-(\d{2})/g; //忽略第一個分組

9、前瞻

例1.

let reg = /\w(?=\d)/g;
let test = 'a1b2c^d$';
layer.alert(test.replace(reg, 'X'));

結果：

X1X2c^d$

例2.

let reg = /\w(?!\d)/g;
let test = 'a1b2c^d$';
layer.alert(test.replace(reg, 'X'));

結果：

aXbXX^X$

js無後顧！！！

10、對象屬性

• global : 全局搜索，默認不添加，匹配到第一個中止，默認false
• ignoreCase : 忽略大小寫，默認大小寫敏感，默認false
• multiline : 多行搜索，默認false
• lastIndex : 當前表達式匹配內容的最後一個字符的下一個位置
• source : 文本字符串

例：

let reg = /\w/g;
layer.alert(reg.global+"</br>"+
            reg.ignoreCase+"</br>"+
            reg.multiline+"</br>"+
            reg.lastIndex+"</br>"+
            reg.source);

結果：

true
false
false
0
\w

11、test和exec方法

1.test方法，找到當前匹配位置的索引(全局調用)

let reg2 = /\w/g;
let result = '';
while(reg2.test('abcdef')){
    result += reg2.lastIndex + '</br>';
}
layer.alert(result);

結果：

1
2
3
4
5
6

2.exec方法

若是沒有匹配的文本則返回null，不然返回一個結果數組

• index 聲明匹配文本的第一個字符的位置
• input存放被檢索的字符串string

(1).非全局調用

• 第一個元素是與正則表達式相匹配的文本
• 第二個元素是與RegExpObject的第一個子表達式相匹配的文本(若是有的話)
• 第三個元素是與RegExp對象的第二個子表達式相匹配的文本(若是有的話)
• 以此類推...

例.

let reg1 = /\d(\w)\d/;
let ts = '1a2b3c4d5e';
let ret = reg1.exec(ts);
let result = '';

result += reg1.lastIndex + ' ' + ret.index + ' ' + ret;
result += '</br>';
result += reg1.lastIndex + ' ' + ret.index + ' ' + ret;

layer.alert(result);

結果：

0 0 1a2,a
0 0 1a2,a

(2).全局調用

例.

let reg2 = /\d(\w)\d/g;
let ts = '1a2b3c4d5e';
let ret = '';
let result = '';

while(ret = reg2.exec(ts)){
    result += reg2.lastIndex + ' ' + ret.index + ' ' + ret;
    result += '</br>';
}
layer.alert(result);

結果：

3 0 1a2,a
7 4 3c4,c

12、字符串對象方法

1.search()方法

• search()方法用於檢測字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串
• 方法返回第一個匹配結果index，查找不到返回-1
• search()方法不執行全局匹配，它將忽略標誌g，而且老是從字符串的開始進行檢索

2.match()方法

• match()方法將檢索字符串，以找到一個或多個與regExp匹配的文本
• regexp是否具備標誌g對結果影響很大

(1).非全局調用

• 返回數組的第一個元素存放的是匹配文本，而其他的元素存放的是與正則表達式的子表達式匹配的文本
• 除了常規的數組元素以外，返回的數組還含有2個對象屬性
• index聲明匹配文本的起始字符在字符串的位置
• input聲明對stringObject的引用

例：

let reg1 = /\d(\w)\d/;
let ts = '1a2b3c4d5e';
let ret = ts.match(reg1);
let result = '';

result += ret + ' ' + ret.index + ' ' + reg1.lastIndex;
layer.alert(result);

結果：

1a2,a 0 0

(2).全局調用

• 若是regexp具備標誌g則match()方法將執行全局檢索，找到字符串中的全部匹配字符串
• 沒有找到任何匹配的字串，則返回null
• 若是找到了一個或多個匹配字串，則返回一個數組
• 數組元素中存放的是字符串中全部的匹配字串，並且也沒有index屬性或input屬性

例：

let reg2 = /\d(\w)\d/g;
let ts = '1a2b3c4d5e';
let ret = ts.match(reg2);
let result = '';

result += ret + ' ' + ret.index + ' ' + reg2.lastIndex;
layer.alert(result);

結果：

1a2,3c4 undefined 0

3.split()方法

將字符串分割爲字符數組

例：

let reg1 = /\d/g;
let ts = '1a2b3c4d5e';
let ret = ts.split(reg1);
console.log(ret) //layer不支持數組的彈出，因此改成console

結果：

["", "a", "b", "c", "d", "e"]

4.replace()方法

例1：

let reg1 = /1/g;
let ts = '1a1b1c1d1e';
let result = ts.replace(reg1, 2);
layer.alert(result);

結果：

2a2b2c2d2e

replace第二個參數也能夠爲一個function
function會在每次匹配替換的時候調用，有四個參數
(1).匹配字符串
(2).正則表達式分組內容，沒有分組則沒有該參數
(3).匹配項在字符串中的index
(4).原字符串

例2:沒有分組

let reg1 = /\d/g;
let ts = '1a2b3c4d5e';
let ret = ts.replace(reg1, function(match, index, origin){
    console.log(index);
    return parseInt(match)+1;
});
console.log(ret);

結果：

0
2
4
6
8
2a3b4c5d6e

例3：有分組(注意參數有變化)

let reg1 = /(\d)(\w)(\d)/g;
let ts = '1a2b3c4d5e';
let ret = ts.replace(reg1, function(match, group1, group2, group3, origin){
    console.log(match);
    return group1 + group3;
});
console.log(ret);

結果：

1a2
3c4
12b34d5e

附視頻連接：
https://www.imooc.com/video/12529