Fork me on GitHub
杨小慧的博客

JavaScript正则

发表于 | 分类于 | | 阅读次数

正则表达式，又称规则表达式。简单讲就是一个用来处理字符串的规则，这里的“处理”一般包含匹配和捕获。

1. 初识正则

1.1正则的匹配和捕获

  • 匹配：判断一个字符串是否符合指定的规则，使用reg.test(str)
1
2
3
var reg = /\d/; //包含一个0-9之间的数字
console.log(reg.test('1')); //true
console.log(reg.test('我今年18岁')); //true,只要包含数字就返回true
  • 捕获：获取字符串中符合指定的规则的内容，使用reg.exec(str)
1
2
3
var reg = /\d/;
console.log(reg.exec('1')); //["1", index: 0, input: "1"]
console.log(reg.exec('我今年18岁')); //["1", index: 3, input: "我今年18岁"]

1.2 创建正则

  • 字面量方式
1
var reg = /\d/;
  • 实例方式
1
var reg = new RegExp('/\d/');

2. 正则的组成

2.1 元字符

  • 具有特殊意义的元字符
    • \: 转义字符，转义后面字符所代表的含义
    • ^: 以某一个元字符开始
    • $: 以某一个元字符结束
    • .: 除了\n以外的任意字符
    • \n: 匹配一个换行符
1
2
3
4
5
6
7
var reg = /^0.5$/; // 以0开头，以5结尾，中间可以是除了\n的任意字符
console.log(reg.test('0.5')); // true
console.log(reg.test('0-5')); // true
reg = /^0\.5$/; // 将"."转义,中间必须是"."
console.log(reg.test('0.5')); // true
console.log(reg.test('0-5')); // false
  • 代表出现次数的量词元字符
    • *：出现0到多次
    • +：出现1到多次
    • ?：出现0次或者1次
    • {n}：出现n次
    • {n,m}：出现n到m次
1
2
var reg = /\d+/; //匹配0-9之间的数字最少一次
console.log(reg.test('2015')); // true

2.2 修饰符

  • x|y：x或y中的一个
  • [xyz]：x或y或z中的一个
  • [^xyz]：除了xyz以外的任意一个字符
  • [a-z]：a-z之间的任何一个字符
  • [^a-z]：除了a-z之间的任何一个字符
  • \d：一个0~9之间的数字
  • \D：除了0~9之间的数字以外的任何字符
  • \b：一个边界符
  • \w：数字、字母、下划线中的任意一个字符
  • \s：匹配一个空白字符、空格
  • ()：分组，把一个大正则本身划分成几个小的正则，例如：var reg = /^(\d+)zhufeng(\d+)$/;

3. 元字符的应用

在做元字符的应用前，有必要先了解下中括号和分组的使用。

3.1 []的规律

  • 在中括号中出现的所有的字符都是代表本身的意思的字符（没有特殊含义）
1
2
3
4
5
6
var reg = /^[.]$/;
console.log(reg.test('1')); // false
console.log(reg.test('.')); // true
reg = /^[\w-]$/; // 数字、字母、下划线、- 中的一个
console.log(reg.test('-')); // true
  • 中括号不识别两位数
1
2
var reg = /^[12]$/; // --> 1或者2中的一个（符合[xyz]）
var reg = /^[12-68]$/; // --> 1、2-6中的一个、8  三个中的一个

3.2 ()的作用

  • 改变x|y的默认的优先级
1
2
var reg = /^18|19$/; // 18、19、181、189、119、819、1819这些都符合
var reg = /^(18|19)$/; // 只能18或者19

3.3 应用

  • 应用一：有效数字的正则
    有效数字可以是正数、负数、零、小数，所以其特点为：
    • “.”可以出现也可以不出现，一旦出现，后面必须跟着一位或多为数字；
    • 最开始可能有“+/-”，也可以没有；
    • 整数部分，一位数的情况可以是0-9中的一个，多位数的情况下不能以0开头；
1
var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
  • 应用二：年龄介于18~65之间
    年龄介于18~65之间的数字可以是18-19、20-59、60-65。
1
var reg = /^1[8-9]|[2-5]\d|6[0-5]$/;
  • 应用三：简单的邮箱验证
1
var reg = /^[\w.-]+@[0-9a-zA-Z]+(\.[a-zA-Z]{2,4}){1,2}$/;

4. 两种方式创建正则的区别

创建正则有两种方式：字面量方式、对象方式。

在字面量方式中，”//“之间包起来的所有的内容都是元字符，有的具有特殊的意义，大部分都是代表本身含义的普通元字符。

正则中的某一段内容是不固定的，那么我们用字面量的方式可能会这么写：

1
2
3
4
var name = 'iceman';
var reg = /^\d+"+name+"\d+$/;
console.log(reg.test('2015iceman2016')); // false
console.log(reg.test('2015"""nameeee"2016')); // true

为什么出现这样的结果？与我们的想法不一致。仔细一看，就会发现我们在第二条匹配的字符串中写了三个引号，name的后面再加了三个e。

因为在字面量方式创建的正则中，引号和单独出现的加号都被当成了普通的元字符。就会解析成匹配“一次或多次，破匹配e一次或多次，对于上面的这个需求，我们只能使用实例创建正则的方式：

1
2
3
var name = 'iceman';
var reg = new RegExp("^\\d+" + name + "\\d+$", "g");
console.log(reg.test('2015iceman2016')); // true

所以总结字面量方式和实例方式创建正则的区别：

  • 字面量方式中出现的一切都是元字符，不能进行变量值的拼接，而实例创建的方式可以；
  • 字面量方式中直接写\d可以，而在实例中需要把它转义 \\d

5. 正则的捕获及其贪婪性和懒惰性

5.1 懒惰性

1
2
var reg = /\d+/;
var str = 'iceman2016learn2017';

reg默认有一个lastIndex字段，该字段是正则每一次捕获时，在字符串中开始查找的位置，默认的值是0。

第一次捕获：

1
2
3
console.log(reg.lastIndex); // 0，第一次捕获的时候，从字符串索引0处开始查找
var res = reg.exec(str);
console.log(res); // ["2016", index: 6, input: "iceman2016learn2017"]

从代码的输出可知，正则捕获的内容格式：捕获到的内容是一个数组:

  • 数组的第一项是当前大正则捕获的内容；
  • 有一项是index：捕获内容在字符串中开始的索引位置；
  • 有一项是input：捕获的原始字符串；

现在进行第二次捕获：

1
2
3
4
console.log(reg.lastIndex); // 0  说明第二次捕获的时候，也要从字符串索引0处开始查找
// 第二次通过exec捕获的内容还是第一个"2016"
res = reg.exec(str);
console.log(res); //["2016", index: 6, input: "iceman2016learn2017"]

由上面的两次捕获可知，每次的捕获都是从字符串的索引0处开始查找的，这就是正则的懒惰性。

如何解决？

在正则的末尾加一个修饰“g”（全局匹配），类似g这样的修饰符还有两个：i、m，这三者的作用是：

  • global（g）：全局匹配
  • ignoreCase（i）：忽略大小写
  • multiline（m）：多行匹配
1
2
3
4
5
6
7
8
9
10
var reg = /\d+/g;
var str = 'iceman2016learn2017';
console.log(reg.lastIndex); // 0
console.log(reg.exec(str)); // ["2016", index: 6, input: "iceman2016learn2017"]
console.log(reg.lastIndex); // 10
console.log(reg.exec(str)); // ["2017", index: 15, input: "iceman2016learn2017"]
console.log(reg.lastIndex); // 19
console.log(reg.exec(str)); // null

在加了修饰符g之后，就解决了懒惰型，达到了我们想要的效果，所以全局修饰符g的原理是：正则每一次捕获结束后，lastIndex的值都变成了最新的值，下一次捕获从最新的位置开始查找，这样就可以把所有需要捕获的内容都获取到了。

5.2 贪婪性

1
2
3
var reg = /\d+/g; // 出现一到多个0~9之间的数字
var str = 'iceman2016learn2017javascript2018';
console.log(reg.exec(str)); // ["2016", index: 6, input: "iceman2016learn2017javascript2018"]

正则的内容是/\d+/，是匹配1到多个数字，2015是符合正则的，但是2也是符合正则的，为什么默认就捕获了2016呢？ 这就是正则的贪婪性。

如何解决？

在量词元字符后面添加一个”?”即可。

1
2
3
4
5
6
7
8
9
var reg = /\d+?/g; // 出现一到多个0~9之间的数字
var str = 'iceman2016learn2017javascript2018';
console.log(reg.exec(str)); // ["2", index: 6, input: "iceman2016learn2017javascript2018"]
var ary = [] , res = reg.exec(str);
while (res) {
    ary.push(res[0]);
    res = reg.exec(str)
}
console.log(ary); // ["0", "1", "6", "2", "0", "1", "7", "2", "0", "1", "8"]

“?”在正则中的作用：

  • 放在一个普通的元字符后面，代表出现0~1次；
  • 放在一个量词的元字符后面，取消捕获时候的贪婪性；

5.3 字符串中的match方法

match方法的作用是，把所有和正则匹配的字符都获取到。

1
2
3
4
var reg = /\d+?/g;
var str = 'zhufeng2015peixun2016dasgdas2017';
var ary = str.match(reg);
console.log(ary); // ["2", "0", "1", "5", "2", "0", "1", "6", "2", "0", "1", "7"]

注意：虽然在当前的情况下，match比exec更加的简洁一些，但是match存在一些自己处理不了的问题：在分组捕获的情况下，match只能捕获到大正则，而对于小正则捕获的内容是无法获取的。

6. 分组捕获

6.1 正则分组

正则分组的两个作用：

  • 改变优先级
  • 分组引用
    • \2代表和第二个分组出现一模一样（和对应的分组中的内容和值都要一样）的内容;
    • \1代表和第一个分组出现一模一样的内容；
1
2
3
var reg = /^(\w)(\w)\1\2$/;
console.log(reg.test("icic")); // true
console.log(reg.test("r0g_")); // false

6.2 分组捕获

正则在捕获的时候，不仅仅把大正则匹配的内容捕获到，而且还可以把小分组匹配的内容捕获到。

身份证中的数字都有意义的，比如开头的两位代表省，中间的四位代表…所以对于一个身份中，有必要对其中的数字按照其意义进行分组捕获。

1
2
3
var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;
var str = "350324202904190216";
console.log(reg.exec(str));

注意：(?:) 在分组中?:的意思是只匹配不捕获

输出的内容为：[“350324200904190216”, “35”, “0324”, “2009”, “04”, “19”, “1”, index: 0, input: “350324200904190216”]

其中：

  • 350324200904190216 ：大正则匹配的内容
  • 35 ：第一个分组捕获的内容
  • 0324 ：第二个分组捕获的内容
  • ……

在这里使用match方法的话，和exec获取的内容一样：

1
console.log(str.match(reg));

另一个例子：

1
2
3
4
5
6
7
8
9
var reg = /ice(\d+)/g;
var str = 'ice1234ice3456ice5678'
// 用exec执行三次，每一次不仅仅把大正则匹配的获取到，而且还可以获取第一个分组匹配的内容
console.log(reg.exec(str)); // ["ice1234", "1234", index: 0, input: "ice1234ice3456ice5678"]
console.log(reg.exec(str)); // ["ice3456", "3456", index: 7, input: "ice1234ice3456ice5678"]
console.log(reg.exec(str)); // ["ice5678", "5678", index: 14, input: "ice1234ice3456ice5678"]
// 而match只能捕获大正则
console.log(str.match(reg)); // ["ice1234", "ice3456", "ice5678"]

此时match是只能捕获大正则的内容，所以match能做到的exec都能做到，match做不到的exec也能做到。

总结：只捕获一次就好的，那么用exec和match都可以，像本例中要连续捕获三次的，用match就捕获不到小正则了。

------本文结束感谢阅读------