正则表达式

技术 / 前端 / JavaScript
Word count: 2.8k   |   Reading time≈ 11 min

RegExp类型

文章转载自js中正则表达式的使用，有部分删改.
在这里插入图片描述

JS中使用正则表达式有两种方式

1、正则表达式字面量

var expression = / pattern / flags
其中的pattern部分可以使任何简单或复杂的正则表达式。每个正则表达式可以包含一个或多个flags，用以标注正则表达式的匹配模式

  • g：表示全局模式，应用于所有匹配的字符串
  • i：表示不区分大小写，即在匹配过程中忽略字符串的大小写
  • m：表示多行匹配

2、使用RegExp构造函数

var reg = new RegExp(“正则表达式”, “匹配模式”);

两者的区别

  1. 一些字符的转义
    使用RegExp构造函数时，所有元字符必须进行双重转义，转义过的字符也是如此
    例如：\通常被转义成为\，但在正则表达式字符串中会变成\\
    1. 正则表达式字面量和使用RegExp构造函数创建的正则表达式不一样（此问题只存在ES3，ES5已经做出修改）
      字面量方法始终会共享同一个RegExp实例，而使用构造函数创建的每一个RegExp实例都是一个新实例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var re = null
      var i
      for(i = 0; i < 10; i++){
      	re = /cat/g
      	re.test("catastrophe")
      }
      //匹配成功一次之后匹配失败
      for(i = 0; i < 10; i++){
      	re = new RegExp("cat", 'g')
      	re.test("catastrophe")
      }
      //十次都匹配成功
      在第一个循环中，实际上只为/cat/指定了一个RegExp实例，又因为实例属性不会重置，所以当第二次及之后调用test()方法时，就会从上一次匹配的末尾继续查找匹配，并不会从头匹配，因此匹配失败。
      第二个循环则每次都是一个新的RegExp实例，每次匹配都从字符串开头匹配，所以可匹配成功

正则的一些元字符

一些特殊含义的元字符

\d : 0-9之间的任意一个数字 \d只占一个位置
\w : 数字，字母 ，下划线 0-9 a-z A-Z _
\s : 空格或者空白等
\D : 除了\d
\W : 除了\w
\S : 除了\s
. : 除了\n之外的任意一个字符
\ : 转义字符
| : 或者
() : 分组
\n : 匹配换行符
\b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数
^ : 限定开始位置 => 本身不占位置
$ : 限定结束位置 => 本身不占位置
[a-z] : 任意字母 []中的表示任意一个都可以
[^a-z] : 非字母 []中^代表除了
[abc] : abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符

代表次数的特殊元字符

* : 0到多个
+ : 1到多个
? : 0次或1次 可有可无
{n} : 正好n次；
{n,} : n到多次
{n,m} : n次到m次

量词出现在元字符后面 如\d+，限定出现在前面的元字符的次数

1
2
3
4
var str = '    a string   '
var reg = /^\s+|\s+$/g
str.replace(reg, '')//匹配字符串开头和结尾的空格
str //a string

正则中的[]和()

一般[]中的字符没有特殊含义，+就表示+，但是像\w这种还是会有特殊含义

1
2
3
4
5
6
7
var str = 'abc'
var str1 = '.bc'
var str2 = 'fbc'
var reg = /[.ab]bc/
reg.test(str)//true
reg.test(str1)//true
reg.test(str2)//false

[]中不会出现两位数，举个栗子：要求匹配年龄为18-65岁之间的人

1
2
3
4
5
6
7
8
//这样写是不对的：
var reg = /[18-65]/
reg.test('50')
//error

//实际上，这个问题可以拆开解决
var reg = /[18|19] | [2-5]\d | (6[0-5])/
reg.test('42')//true

()的作用：

  • 提高优先级
  • 分组（重复子项）

什么是分组

如果需要对多个字符进行重复，此时我们就要用到分组，我们可以使用小括号（）来指定要重复的子表达式，然后对这个子表达式进行重复，例如：(abc)? 表示0个或1个abc 这里一 个括号的表达式就表示一个分组分组可以分为两种形式，捕获组和非捕获组。

捕获组

捕获组可以通过从左到右计算其开括号来编号 。例如，在表达式(A)(B( C )) 中，存在四个这样的组：
在这里插入图片描述

1
2
3
4
5
6
let reg = /(\d{2}).(\d{2}).(\d{4})/;
let originString = '02.08.2020';
reg.test(originString); //true
RegExp.$1; //02
RegExp.$2; //08
RegExp.$2; //2020

在上面这个例子里，我们有三组括号，形成了三个捕获组，正则表达式（在javaScript里就是我们的RegExp）会缓存捕获组所匹配的串，以$n表示，n就代表这第几个捕获组。

我们知道String的replace()方法经常和正则表达式一起使用。在replace()方法里，我们可以直接使用捕获组的结果：将上面的栗子中02.08.2020改为2020-02-08

1
2
3
4
let reg = /(\d{2}).(\d{2}).(\d{4})/;
let originString = '02.08.2020';
let newString = originString.replace(reg, '$3-$1-$2');
console.log(newString);//"2020-02-08"

( ? : ) 非捕获组

有的时候我们可能只想匹配分组，但是并不想缓存（不想捕获）匹配到的结果，就可以在我们的分组模式前面加上?:。例如上面的时间的例子，我们不想捕获第一个分组的结果，就可以这么做：

1
2
3
4
5
6
let reg = /(?:\d{2}).(\d{2}).(\d{4})/;
let originString = '02.08.2020';
reg.test(originString); //true
RegExp.$1; //02
RegExp.$2; //2020
originString.match(reg);// ["10.25.2017", "25", "2017", index: 0, input: "10.25.2017", groups: undefined

此时RegExp.$1不是数字02，而是08

注意：组0始终代表整个表达式

(?=) positive lookahead 正向前瞻型捕获

现在有一个字符串：

1 apple costs 10$

，现需要捕获美元符号之前的价格，但不能匹配到句子开头的1，这个时候就需要用到正向前瞻性捕获

1
2
3
4
5
let reg = /\d+(?=$)/g;
let reg1 = /\d+/g;
let str = '1 apple costs 10$';
str.match(reg); //["10"]
str.match(reg1); //["1", "10"]

通俗来说，正向前瞻性匹配x( ? = y)就是匹配x，要求是x后面必须跟着y

(?!) negative lookahead 负向前瞻型捕获

了解了正向前瞻性捕获，负向前瞻性捕获也就很好理解，/x(?!y)/ 匹配x, 但是必须当x的后面不是y的情况下。直接上个例子：

1
2
3
let reg = /\d+(?!€)/g;
let str = '1 apple costs 2€';
str.match(reg); ['1']

(?<=) positive lookbehind 正向后顾型捕获

后顾型和前瞻型正好相反，意思就是：
/(?<=y)x/ 匹配x, 但是只在【前面】【有】y的情况下
来看一个例子：

1
2
let str = "1 turkey costs $2";
console.log( str.match(/(?<=\$)\d+/g) ); //["2"]

(?<!) negative lookbehind 负向后顾型捕获

负向就是与正向相反，那么负向后顾型捕获就是：
/(?<=y)x/ 匹配x, 但是只在【前面】【没有】y的情况下
来看一个例子：

1
2
let str = "1 turkey costs $2";
console.log( str.match(/(?<!\$)\d+/g) ); //['1']

一些其他情况

默认情况下上面的前瞻后顾4种都是默认不匹配捕获组里面的内容的，也就是不匹配括号里的条件的。例如我们的正向前瞻/d+(?=€)/g，只会匹配到数字，并不会匹配到€。如果我们想要也匹配到€怎么办呢？答案就是给€也包上一个括号：

1
2
3
4
5
6
7
8
9
//前瞻型
let str = "1 turkey costs 2€";
let reg = /\d+(?=(€))/; 
str.match(reg); //["2", "€", index: 15, input: "1 turkey costs 2€", groups: undefined]

//后顾型
let str = "1 turkey costs $2";
let reg = /(?<=(\$|£))\d+/;
console.log( str.match(reg) ); //["2", "$", index: 16, input: "1 turkey costs $2", groups: undefined]

正则的一些特性

  • 贪婪性

所谓的贪婪性就是正则在捕获时，每一次会尽可能多的去捕获符合条件的内容。
如果我们想尽可能的少的去捕获符合条件的字符串的话，可以在量词元字符后加?

  • 懒惰型

懒惰性则是正则在成功捕获一次后不管后边的字符串有没有符合条件的都不再捕获。
如果想捕获目标中所有符合条件的字符串的话，我们可以用标识符g来标明是全局捕获

一些正则常用的方法

reg.test()

用来验证字符串是否符合正则 符合返回true 否则返回false

1
2
3
var str = 'abc';
var reg = /\w+/;
console.log(reg.test(str));  //true

reg.exec() 用来捕获符合规则的字符串

当我们用exec进行捕获时，如果正则没有加’g’标识符，则exec捕获的每次都是同一个，当正则中有’g’标识符时 捕获的结果就不一样了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//没有g
var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(reg.exec(str))
//  ["123", index: 3, input: "abc123cba456aaa789"];
console.log(reg.lastIndex)
// lastIndex : 0 

reg.exec捕获的数组中 
// [0:"123",index:3,input:"abc123cba456aaa789"]
0:"123" 表示我们捕获到的字符串
index:3 表示捕获开始位置的索引
input 表示原有的字符串


//有g
var str = 'abc123cba456aaa789';
var reg = /\d+/g;  //此时加了标识符g
console.log(reg.lastIndex)
// lastIndex : 0 

console.log(reg.exec(str))
//  ["123", index: 3, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 6

console.log(reg.exec(str))
// ["456", index: 9, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 12

console.log(reg.exec(str))
// ["789", index: 15, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 18

console.log(reg.exec(str))
// null
console.log(reg.lastIndex)
// lastIndex : 0

每次调用exec方法时,捕获到的字符串都不相同
lastIndex ：这个属性记录的就是下一次捕获从哪个索引开始。
当未开始捕获时，这个值为0。
如果当前次捕获结果为null。那么lastIndex的值会被修改为0.下次从头开始捕获。
而且这个lastIndex属性还支持人为赋值。

exec还受分组的影响

1
2
3
4
5
var str = '2017-01-05';
var reg = /-(\d+)/g
// ["-01", "01", index: 4, input: "2017-01-05"]
"-01" : 正则捕获到的内容
"01"  : 捕获到的字符串中的小分组中的内容

str.match(reg) 如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null

1
2
3
4
5
6
var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(reg.exec(str));
//["123", index: 3, input: "abc123cba456aaa789"]
console.log(str.match(reg));
//["123", index: 3, input: "abc123cba456aaa789"]

可以看到，两者的结果是一样的，因为我们没有设置全局匹配，当加了g之后：

1
2
3
4
5
6
var str = 'abc123cba456aaa789';
var reg = /\d+/g;
console.log(reg.exec(str));
// ["123", index: 3, input: "abc123cba456aaa789"]
console.log(str.match(reg));
// ["123", "456", "789"]

str.replace() —— 正则的好伙伴

正则去匹配字符串，匹配成功的字符去替换成新的字符串
写法：str.replace(reg,newStr);

1
2
3
4
var str = 'a111bc222de';
var res = str.replace(/\d/g,'Q')
console.log(res)
// "aQQQbcQQQde"

replace的第二个参数也可以是一个函数
str.replace(reg,fn);
这个函数会接收三个参数：模式的匹配项，模式匹配项在字符串中的位置，原始字符串

1
2
3
4
5
6
7
var str = '2017-01-06';
str = str.replace(/-\d+/g,function(){
    console.log(arguments)
})
/*["-01", 4, "2017-01-06"]
["-06", 7, "2017-01-06"]
"2017undefinedundefined"*/

如果我们需要替换replace中正则找到的字符串，函数中需要一个返回值去替换正则捕获的内容
再来个简单的栗子：捕获url中的参数值

1
2
3
4
5
6
7
8
9
10
11
(function(pro){
    function queryString(){
        var obj = {},
            reg = /([^?&#+]+)=([^?&#+]+)/g;
        this.replace(reg,function($0,$1,$2){
            obj[$1] = $2;
        })
        return obj;
    }
    pro.queryString = queryString;
}(String.prototype));
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2021 AURORA_ZXH
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信