正则表达式相关知识点

1 正则表达式在线工具

eg1:查找单词is

He is a good boy
This is a test
Where are you
Display is also a noun
isnt it?
what is your name?

结果 \bis\b

eg2:去掉http协议的jpg文件的协议头
http://img.host.com/images/fsda.jpg
http://img.host.com/images/fsda.png
http://img.host.com/images/fsda22.jpg
https://img.host.com/images/fsda.jpg

正则：http:(//.+).jpg 用()进行了分组，用$1,表示括号内容
. 表示任意字符

表示任意个数

至少一个

eg3:日期替换
2001/02/03
test/07/sd
2012/04/02
1988-03-04
31231/32/431223

正则：
^(\d{4})[/-](\d{2})[/-](\d{2})$

[]中扩号表示或的关系

^表示开头

$表示结尾

{2}表示重复2次

$1:$2:$3 替换成 2001:02:01

2 RegExp 对象

js通过内置对象RegExp支持正则表达式
有两种方法实力化 RegExp 对象：

1. 字面量；

var reg = /\bis\b/g;
var str = "He is a boy,this is a dog";
let replaceStr = str.replace(reg,'IS');
console.log(replaceStr);

1. 构造函数；

var reg = new RegExp('\\bis\\b','ig'); // 反斜线\需要转义
var str = "He is a boy,this IS a dog";
let replaceStr = str.replace(reg,'00');
console.log(replaceStr);

g：global 全局搜索；
i：忽略大小写；
m：多行搜索；

3.元字符

正则表达式由两种基本字符类型组成：

原义文本字符
元字符
元字符是在正则表达式中含有特殊含义的非字母字符：
. * + ? ^ $ | \ () {} []
[]表示一类，或的关系：
'a1b2c3d4'.replace(/[abc]/g,'X') = "X1X2X3d4"
^ 字符类取反，如[^abc]表示不是字符a或者b或者c的内容：'a1b2c3d4'.replace(/[^abc]/g,'X') = "aXbXcXXX"

4.范围类

[a-z]表示从a到z，且包含a和z；
类似[a-zA-Z]，其中-在范围类之间的表示区间范围，如果想匹配的话放在范围的外面，比如：

'2018-09-12'.replace(/[0-9-]/g,'A') //"AAAAAAAAAA"

5.预定义类

字符	等价类	含义
.	[^\r\n]	除了回车符和换行符之外的所有字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s		空白符
\S		非空白符
\w	[a-zA-Z_0-9]	单词字符（字母数字下划线）
\W	[^a-zA-Z_0-9]	非单词字符

匹配一个 ab+数字+任意字符的字符串: /ab\d./

边界字符：

字符	含义
^	以xx开始
$	以xx结束
\b	单词边界
\B	非单词边界

"He is a boy,this is a dog".replace(/\Bis\b/g,'2'); //He is a boy,th2 is a dog
"@123@abc@".replace(/^@./g,"Q") //Q23@abc@
`@123
@456
@789
`.replace(/^@\d/g,"X") // X123只替换了这一个字母

`@123
@456
@789
`.replace(/^@\d/mg,"X") //X23 X56 X89

6 量词

字符	含义
?	出现0次或者一次（最多出现一次）
+	出现1次或者多次（最少出现一次）
*	出现0次或者多次（任意次）
{n}	出现n次
{n,m}	出现n次到m次
{n,}	至少出现n次

PS: 怎么用正则表达式找出包含两个重复字母的单词？如 ROOM ,DEEP 等?
([A-Z])\1 \1 重复第一个括号内匹配到的值

7 贪婪模式

匹配模式，会尽可能多的匹配

'12345678'.replace(/\d{3,6}/,'x') //x78

需求：让正则表达式尽可能少的匹配，一旦匹配成功不再继续尝试，就是非贪婪模式。在辆次后面加上？号。

'12345678'.replace(/\d{3,6}?/,'x') //x45678
'12345678'.replace(/\d{3,6}?/g,'x') //xx78

8 分组

使用（）可以进行分组。

'a1b2c3d4'.replace(/([a-z]\d){3}/g,'X'); //Xd4

或使用 |

'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g,'0')   //00

9 反向引用

2016-12-21 => 12/21/2015

'2016-12-21'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1'); //"21/12/2016"

如果不想捕获某些分组，只需要在分组内加上?: 即可： (?:Byron).(ok)

'2016-12-21'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$1'); //"12/2016"
'2016-12-21'.replace(/(?:\d{4})-(\d{2})-(\d{2})/,'$2/$1'); //"21/12"

10 前瞻

正则表达式从文本头部向尾部开始解析，称为“前”；
前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后瞻方向相反。
js不支持后瞻
符合和不符合特定断言称之为肯定/正向匹配和否定/负向匹配。

名称	正则	含义
正向前瞻	exp(?=assert)
负向前瞻	exp(?!assert)

'a2*3'.replace(/\w(?=\d)/g,'X') //X2*3

$&表示前瞻的部分

注意(?=\d)表示断言部分，也就是满足\w：数字字母下划线的区域，其后面需要是数字，但是断言部分不参与匹配，所以X只是替换\w，而不是影响\d;

11对象属性

除了g i m之外还有：
lastIndex：是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
正则表达式的方法：

RegExp.prototype.test(str): 用于测试字符串参数中是否存在匹配正则表达式模式的字符串；

var reg1 = /\w/;
reg1.test('a'); //true
//全局搜索，lastIndex每次往后移动一位，
var reg2 = /\w/g;
reg2.test('ab'); //true  第一次匹配完到了b的位置
reg2.test('ab'); //true  第二次匹配完到了b的后面位置
reg2.test('ab'); //false 这次由于lastIndex在b的后面匹配，所以匹配不到，然后重置到0的位置。
reg2.test('ab'); //true  所以这次为true

所以一般 test就是匹配字符串中是否有值，不需要设置g；

RegExp.prototype.exec(str):使用正则表达式模式对字符串执行搜索，并将更新全局 RegExp对象的属性以反映匹配结果。
如果没有匹配的文本则返回 null，否则返回一个结果数组；
index 声明匹配文本的第一个字符的位置
input 存放被检索的字符串 string
1）非全局调用
调用非全局的RegExp对象的exec()时，返回数组；
第一个元素是与正则表达式相匹配的文本
第二个元素是与 RegExpObject 的第一个子表达式相匹配的本文（如果有的话）
第三个元素是与 RegExpObject 的第二个子表达式相匹配的本文（如果有的话），以此类推；
例如：

var reg3 = /\d(\w)(\w)\d/;
var str = '1az2bb3cy4dd5ee';
var ret = reg3.exec(str);
console.log(reg3.lastIndex + '\t' + ret.index + '\t' +ret.toString());
//结果是 0 0 1az2,a,z

由于不是全局匹配，所以lastIndex不生效，index从哪个位置开始匹配，ret返回的是相匹配的文本

全局搜索：

var reg4 = /\d(\w)(\w)\d/g;
var str = '1az2bb3cy4dd5ee';
var ret;
while(ret=reg4.exec(str)){
  console.log(reg4.lastIndex + '\t' + ret.index + '\t' +ret.toString());
}
//结果是 4	0	1az2,a,z
//     10  6	3cy4,c,y

12 字符串对象

和正则表达式明显不同的是：
RegExp.prototype.test(str)
RegExp.prototype.exec(str)
str是放在参数位置的；
而字符串对象，是把正则表达式放在参数位置的；
12.2 search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串；
方法返回的第一个匹配结果index，查找不到返回-1；
该方法不执行全局匹配，它将忽略g标志，并且总是从字符串的开始位置搜索；

'a1b2c3'.search(/\d/); //1

12.2 match() 方法用于检索字符串，以找到一个或多个与regExp匹配的文本
regExp是否有标志g对结果影响很大；
- 1. 非全局调用
如果regExp 没有标志g，那么 match() 方法就只能在字符串中执行一次匹配；
如果没有找到任何匹配的文本，将返回null；
否则将返回一个数组，其中存放了与它找到的匹配文本有关的信息
返回数组的第一个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的字表达式匹配的文本；
除了常规的数组元素之外，返回的数组还包含两个对象属性：
index 声明匹配文本的起始字符串的位置
input 声明对 stringObject的引用【和exec调了个位置】

var reg3 = /\d(\w)\d/;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg3);
console.log(ret); //["1a2", "a", index: 1, input: "$1a2b3c4d5e", groups: undefined]
console.log(ret.index+'\t'+ret.lastIndex);//1	undefined

可见lastIndex在非全局下没有起作用

-2 全局调用
如果没有找到任何匹配的文本，将返回null；
否则将返回一个数组，其中存放了与它找到的匹配文本有关的信息；
数组元素中存放的是字符串中所有的匹配字串，而且也没有index属性或input属性

var reg4 = /\d(\w)\d/g;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg4);
console.log(ret); //["1a2", "3c4"]
console.log(ret.index+'\t'+ret.lastIndex);//undefined	undefined

12.3 split() 方法分割，返回数组

'a1b2c3d4'.split(/\d/); //['a','b','c','d']

12.4 replace() 方法替换
介绍一下返回函数的方法：
比如需要把 a1b2c3d4 --> a2b3c4d5

//参数 match 匹配的结果；index 匹配的位置； origin 原字符串
'a1b2c3d4'.replace(/\d/g,function(match,index,origin){
    console.log(index); // 1 3 5 7
    return parseInt(match) + 1; //a2b3c4d5
})
//分组
'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g,function(match,ground1,ground2,ground3,index,origin){
    console.log(match); //1b2  3d4
    return ground1 + ground2; //a1bc3de5  --把ground3 去掉了 也就是去掉了match中 2 和 4
})

很多replace方法结合正则表达式进行字符串内容替换的时候，第二个参数有$&这样的字符出现。
下面通过代码实例介绍一下它的作用。

代码实例：

let str="good";
console.log(str.replace(/good/,"antzone$&"));

$&表示replace()函数第一个正则表达式参数所匹配的内容。
所以结果是： antzonegood