正则表达式相关知识点

1 正则表达式在线工具

http://regexper.com

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?

结果 is

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 = /is/g;
var str = "He is a boy,this is a dog";
let replaceStr = str.replace(reg,'IS');
console.log(replaceStr);

• 2. 构造函数；

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.预定义类

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

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

边界字符：

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

"He is a boy,this is a dog".replace(/Bis/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 + '	' + ret.index + '	' +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 + '	' + ret.index + '	' +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+'	'+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+'	'+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