1.RegExp简介

  正则表达式是一种表达文本模式(即字符串结构)的方法,常用来按照进行文本的校验匹配。

  新建正则表达式有两种方法:

  1.)使用字面量,以斜杠表示开始和结束

let text = /abc/

  2.)使用RegExp构造函数

let text = new RegExp("abc");

 2.实例属性

  正则对象的实例属性分为两类。

  一类是修饰符相关,返回一个布尔值,用来校验某个修饰符是否设置。

  RegExp.prototype.ignoreCase:返回一个布尔值,表示是否设置了i修饰符

  RegExp.prototype.global:返回一个布尔值,表示是否设置了g修饰符

  RegExp.prototype.multiline:返回一个布尔值,表示是否设置了m修饰符

1 let x = /abc/igm;
2 console.log(x.ignoreCase)    //true
3 console.log(x.global)    //true
4 console.log(x.multiline)    //true

  另一类为与修饰符无关的属性,主要有以下两个

  RegExp.prototype.lastIndex:(读写),返回一个数值,表示下一次开始搜索的位置,只在进行连续搜索是有意义。

  RegExp.prototype.source:(只读),返回正则表达式的字符串形式(不包含反斜杠)

let x = /abc/igm;
console.log(x.lastIndex)    //0
console.log(x.source)    //abc

3.实例方法

  1.)RegExp.prototype.test()

  返回一个布尔值,用来校验字符串中是否包含需要校验的值。

let x = /a/igm;
console.log(x.test("abcde"))    //true

  当正则表达式叫上g修饰符是,每一次test都会从上一次匹配成功的后一位开始进行匹配,直到结束再重头开始匹配。

1 let x = /a/g;
 2 let data = "abcade";
 3 console.log(x.lastIndex);    //0
 4 console.log(x.test(data))    //true
 5 
 6 console.log(x.lastIndex);    //1
 7 console.log(x.test(data))    //true
 8 
 9 console.log(x.lastIndex);    //4
10 console.log(x.test(data))    //false
11 
12 console.log(x.lastIndex);    //0
13 console.log(x.test(data))    //true

  lastIndex也可以用来指定开始搜索的位置。如下

let x = /a/g;
let data = "abcade";
x.lastIndex=4;    
console.log(x.test(data))    //false

  正则模式是空字符串时,这匹配所有字符串。如下:

const x = new RegExp('')
console.log(x.test("anb"))    //true

注:lastIndex只对同一个正则表达式有效,当我们写在循环里判断时,可能导致死循环。如下:

let x = /a/g;
let data = "abcade";
while(x.test(data)) console.log(1); //这个只会输出两个1
while(/a/g.test(data)) console.log(1);    //死循环

注:lastIndex是在上次匹配成功后一位开始的,它对同一个正则表达式有效。当我们在正则校验时,中间更换其他字符串匹配,有可能会出现"错误"的结果。如下:

1 const x = /a/g
2 console.log(x.lastIndex)    //0
3 console.log(x.test("a"))    //true
4 console.log(x.lastIndex)    //1
5 console.log(x.test("ab"))    //false
6 console.log(x.lastIndex)    //0

  这种情况是因为第一个正则校验后,lastIndex已经变为了1,中间改变检验值,但是lastIndex仍然是1,就会出现这个结果。

  2.)RegExp.prototype.exec()

  正则实例对象的exec方法,用于返回匹配结果。如果匹配成功,就返回结果数组(为匹配成功的字符串),否则就返回null。

const x = /a/g
const y = /(a)/g
console.log(x.exec('abacd'))    //['a']
console.log(y.exec('abacd'))    //['a','a']

  上述代码,可以发现如果正则表达式包含圆括号(组匹配),则返回的数组会包含多个成员。第一个成员为整个匹配成功的结果,后面的成员就是圆括号对应匹配成功的组。也会是说,第二个成员对应第一个括号,第三个成员对应第二个括号,以此类推。整个数组的length为组匹配的数量+1。

  exec方法返回的数组中还包含以下两个属性:

    input:整个原字符串。

    index:整个模式匹配成功的开始位置(从0开始)

const x = /a(b+)a/;
var data = x.exec('qqabbbaba_');
console.log(data);//["abbba","bbb"] index: 2 input: "qqabbbaba_"

  如果在正则表达式加上g修饰符。可以多次进行exec匹配,每次从匹配成功的后一位开始进行匹配。

1 const x = /a(b+)a/g;
2 const data = "_abbba_aba_aba_"
3 console.log(x.exec(data));//["abbba","bbb"] index: 1 input: "_abbba_aba_aba_"
4 console.log(x.exec(data));//["aba","b"] index: 7 input: "_abbba_aba_aba_"
5 console.log(x.exec(data));//["aba","b"] index: 11 input: "_abbba_aba_aba_"

 4.字符串的实例方法

  字符串的实例方法中,有4种与正则表达式有关。

  String.prototype.match():返回一个数组,成员是所有匹配的字符串。

  String.prototype.search():按照给定的正则表达式进行所有,返回一个整数,表示匹配开始的起始位置。

  String.prototype.replace():按照给定的正则表达式进行替换,返回替换后的字符串。

  String.prototype.split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

  4.1)String.prototype.match()

  字符串实例对象的match方法对字符串进行正则匹配,返回匹配结果,没有匹配到时,返回null。

1 const x = /a(b+)a/g;
2 const y = /x/g
3 const data = "_abbba_aba_aba_"
4 console.log(data.match(x));//['abbba', 'aba', 'aba']
5 console.log(data.match(y));//null

注:lastIndex只对正则表达式起作用,对于match是无效的,match总是从0开始。

const x = /a(b+)a/g;
const data = "_abbba_aba_aba_"
x.lastIndex=18
console.log(data.match(x));//['abbba', 'aba', 'aba']

  4.2)String.prototype.search()

  字符串对象的search方法,返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有匹配到,则返回-1。

const x = /a(b+)a/g;
const data = "_abbba_aba_aba_"
console.log(data.search(x));//1

  4.3)Strung.prototype.replace()

  字符串对象的replace方法可以匹配替换的值。它接收连个参数,第一个是正则表达式,标识搜索模糊匹配的的方式,第二个为替换的内容。

const x = /a(b+)a/g;
const y = /a(b+)a/;
const data = "_abbba_aba_aba_"
console.log(data.replace(x,"z"))//_z_z_z_
console.log(data.replace(y,"z"))//_z_aba_aba_

  4.4)String.prototype.split()

  字符串对象的split方法按照正则规则分割字符串,返回一个有分割后的各个部分组成的数组。

  该方法接收两个参数,第一个参数是正则表达式,表示分割规则。第二个参数是返回数组的最大成员数。

1 const x = /a/;
2 const data = "_abbba_aba_aba_"
3 console.log(data.split(x))    //['_', 'bbb', '_', 'b', '_', 'b', '_']
4 console.log(data.split(x,2))    //['_', 'bbb']

5.正则匹配规则

  5.1)字面量字符和元字符

  大部分字符在正则表达式中,就是字面的含义,比如/a/匹配a,/b/匹配b。如果在正则表达式中,某个字符只表示它字面的含义,就叫做"字面量字符"。

const x = /a/;
const data = "_ab"
console.log(x.test(data))    //true

  除了字面量字符外,还有一些支付有特殊的含义,不代表字面的意思。这些字符叫做"元字符"。

  "元字符"主要有以下几个:

    (1.)点字符(.)

     点字符(.)匹配除了回车(\r)、换行(\n)、分隔符(\u2028)和段分隔符(\u2029)以外的所有字符。注意,对于码点大于0xFFFF的Unicode字符,点字符不能正确匹配,会认为是两个字符。

const x = /a.b/;
const data = "_a1b"
console.log(x.test(data))    //true

    上述代码,.指任意字符,a.b指匹配a和b之间包含任意一个字符的情况(任意一个,并不是多个)。

    (2.)位置字符

    位置字符用来提示字符所处的位置,主要有两个字符。

    ^:表示字符串的开始位置

    $:表示字符串的结束位置

1 const x = /^a/;
2 const y = /a$/;
3 const z = /^a$/;
4 const data = "_a1aba"
5 console.log(x.test(data))    //false
6 console.log(y.test(data))    //true
7 console.log(z.test('a'))    //true
8 console.log(z.test('aba'))    //false

    (3.)选择符(|)

    竖线符号(|)在正则表达式中表示"或关系"(OR)。

const x = /a|b/;
const data = "_a1awb"
console.log(x.test(data))    //true

\\\*+?()[]{}等,将在下文解释。

  5.2)转义符

  正则表达式中哪些有特殊含义的元字符,如果要匹配它们本身,就需要在它们前面加上反斜杠。如下:

1 const x = /a\|b/;
2 const data1 = "_a1awb"
3 const data2 = "_a1a|b"
4 console.log(x.test(data1))    //false
5 console.log(x.test(data2))    //true

  正则表达式中,需要反斜杠转义的,一共有12个字符:^、.、[、$、(、)、|、*、+、?、{、\\。

注,如果使用RegExp方法来生成正则对象,转义需要使用两个斜杠,因为字符串内部会先转义一次。如下

1 const x = new RegExp('a|b');
2 const y = new RegExp('a\|b');
3 const z = new RegExp('a\\|b');
4 const data1 = "_a1awb"
5 const data2 = "_a1a|b"
6 console.log(x.test(data1))    //true
7 console.log(y.test(data1))    //true
8 console.log(z.test(data1))    //false
9 console.log(z.test(data2))    //true

  5.3)特殊字符

  正则表达式对一些不能打印的特殊字符,提供了表达方法。如下:

  \cx:表示Ctrl-[x],其中x是A-Z之中任一个英文字母,用来匹配控制字符

  [\b]:匹配退格键(U+0008),不要与\b混淆

  \n:匹配换行键

  \r:匹配回车键

  \t:匹配制表符tab(U+0009)

  \v:匹配垂直制表符(U+000B)

  \f:匹配换页符(U+000C)

  \0:匹配null字符(U+0000)

  \xhh:匹配一个以两位十六进制数(\x00-\FF)表示的字符

  \uhhhh:匹配一个以四位十六进制数(\u0000-\uFFFF)表示的Unicode字符

  5.4)字符类

   字符类(class)表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都会放在方括号内,比如[xyz]表示x、y、z之中匹配一个即可。如下

const x = /[abc]/;
console.log(x.test('acd'))    //true

   有两个字符在字符类中有特殊含义。

    (1.)脱字符(^)

    如果方括号内的第一个字符是[^],则表示除了字符类中的字符,其他字符都可以匹配。如下:

const x = /[^abc]/;
console.log(x.test('acd'))    //true
console.log(x.test('ab'))    //false   除了ab不存在其他字符

    如果方括号内没有其他字符,即只有[^],就表示匹配一切支付,其中包括换行符。相比之下,点元字符(.)是不包含换行符的。

const data = 'Hello\nit is awonderful world'
console.log(data.match(/Hello.*world/))        //null
console.log(data.match(/Hello[^]*world/))    //[Hello\nit is awonderful world']

    注:脱字符只有在字符类的第一个位置才有特殊含义,否则就是字面含义。

    (2.)连字符(-)

    某些情况下,对于连续序列的字符,连字符(-)用来提供简写形式,表示字符的连续范围。比如,[abc]可以写成[a-c]。

const x = /[a-c]/;
const data = 'b'
console.log(x.test(data));        //true

    连字符还可以用来指定Unicode字符的范围。如下:

const x = "\u0130\u0131\u0132";
console.log(/[\u0128-\uFFFF]/.test(x));    //true

    注,不要过分使用连字符,设定一个很大的范围,否则很可能选中意料之外的字符。最典型的例子就是[A-z],表面上它是选中从大写的A到小写的z之间52个字母,但是在ASCLL编码之中,大写字母与小写字母之间还有其他字符,结果就会出现意料之外的结果。

console.log(/[A-z]/.test('\\'));    //true

    上面代码中,由于反斜杠('\')的ASCLL码在大写字母与小写字母之间,结果会被选中。

  5.5)预定义模式 

  预定义模式指的是某些常见模式的简写方式。

\d 匹配0-9之间的任一数字,相当于[0-9]\D 匹配所有0-9以外的字符,相当于[^0-9]\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]\s 匹配空格(包括换行符、制表符、空格符等),相等于[ \t\r\n\v\f]\S 匹配非空格的字符,相当于[^ \t\r\n\v\f]\b\B

1 console.log(/\s/.test('hello world'));    //true
2 console.log(/\s/.test('helloworld'));    //false
3 
4 console.log(/\bworld/.test('hello world'))    //true /bworld指world的首部必须独立(词尾不管),才可以匹配
5 console.log(/\bworld/.test('hello-world'))    //true
6 console.log(/\bworld/.test('helloworld'))    //false
7 console.log(/\Bworld/.test('hello world'))    //false    /bworld指world的首部不能独立(词尾不管),才可以匹配
8 console.log(/\Bworld/.test('helloworld'))    //true

  通常,正则表达式遇到换行符(\n)就会停止匹配。如下:

console.log(/.*/.exec('hello\n world'))    //['hello']

  从上述代码可以发现,上述代码中hello后存在换行符,这时候使用点字符(.)由于不匹配换行符,得到的结果就出乎了我们的意料之外。这时,就使用到了\s字符类,就能包括换行符。

console.log(/[\s\S]*/.exec('hello\n world'))    //['hello\n world']

  上述代码中,[\s\S]指代一切字符。

  5.6)重复类

  模式的精确匹配次数,是用大括号({})表示。{n}表示恰好重复n次,{n,}表示至少重复n次,{n,m}表示重复不少于n次,不多于m次。

console.log(/hel{2}o/.test("hello"))    //true
console.log(/hel{2,5}o/.test("helllo"))    //true

  5.7)量词符

  量词符用来设定某个模式出现的次数。

  ?:问号表示某个模式出现0次或者1次,等同于{0,1}

  *:星号表示模式出现0次或者多次,等同于{0,}

  +:加好表示某个模式出现1次或者多次,等同于{1,}

1 //? 指出现0次或者1次
 2 console.log(/hel?o/.test("hello"))    //false  l出现两次
 3 console.log(/hel?o/.test("helo"))    //true
 4 // * 指出现0次或者多次
 5 console.log(/hel*o/.test("hello"))    //true  
 6 console.log(/hel*o/.test("helo"))    //true
 7 console.log(/hel*o/.test("heo"))    //true
 8 //+ 指出现1次或者多次
 9 console.log(/hel+o/.test("hello"))    //true  
10 console.log(/hel+o/.test("helo"))    //true
11 console.log(/hel+o/.test("heo"))    //false  l出现0次

  5.8)贪婪模式

  5.7的两次赴,默认情况下都是最大可能匹配,即匹配直到下一个支付不满足匹配规则为止。这被成为贪婪模式。 

var data = "aaa";
console.log(data.match(/a+/))    //["aaa"]

  上述代码,+指的是匹配一次或者多次,这时就会默认为贪婪模式,会一直匹配直到a不出现为止,故而结果为aaa。

  如果想把贪婪模式改为非贪婪模式,可以再两次后面加一个问号。如下

var data = "aaa";
console.log(data.match(/a+?/))    //["a"]

  非贪婪模式有以下两个

  *?:表示某个模式出现0次或者多次,匹配时采用非贪婪模式。

  +?:表示某个模式出现1次或者多次,匹配时采用非贪婪模式。

  5.9)修饰符(i、g、m)

  修饰符表示模式的附加规则,放在正则模式的最尾部。

  修饰符可以单个使用,也可以多个一起使用。

    (1.)g修饰符

    默认情况下,第一次匹配成功后,正则对象就停止向下匹配了。g修饰符表示全局匹配,加上后,正则对象将匹配全部满足条件的结果,用来搜索或则替换。

var data = "ababac";
console.log(data.replace(/a/,"_"))    //_babac
console.log(data.replace(/a/g,"_"))    //_b_b_c

    (2.)i修饰符

    默认情况下,正则对象区分字母的大小写,加上i修饰符以后表示忽略大小写。

console.log(/abc/.test("ABC"))    //false
console.log(/abc/i.test("ABC"))    //true

    (3.)m修饰符

    m修饰符表示多行模式,会修改^和$的行为。默认情况下(即不加m修饰符时),^和$匹配字符串的开始处和结尾处,加上m修饰符后,^和$还会匹配行首和行尾,即^和$会识别换行符(\n)

console.log(/^abc/.test("xyz\nabc"))    //false
console.log(/^abc/m.test("xyz\nabc"))    //true
console.log(/abc$/.test("xyz abc\n"))    //false
console.log(/abc$/m.test("xyz\nabc"))    //true

    上述代码可以发现,当加了m修饰符后,如果字符串中存在\n,会被解析为一个新行。

  5.10)组匹配

    (1.)概述

    正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容。 

console.log(/abc+/.test("abcc"))    //true
console.log(/a(bc)+/.test("abcbc"))    //true

    上述代码,第一个没有加括号,+号表示的是重复字母c,第二个加了括号,+表示重复的bc

    下面是另一个分组捕获的例子。

console.log("abcabc".match(/(.)b(.)/))    //["abc","a","c"]
console.log("abcabc".match(/(.)b(.)/g))    //["abc","abc"]

    上述代码中,有两个括号,第一个括号捕获a,第二个括号捕获c,当正则表达式加上g修饰符后,不会捕获分组内容(参考第二行代码)。

    正则表达式内部还可以用\n引用括号匹配的内容,n是从1开始的自然数,表示对应顺序的括号。

console.log(/(.)b(.)\2b\1/.test("abcabc"))    //false
console.log(/(.)b(.)\2b\1/.test("abccba"))    //true

    上述代码中,\1代表a,\2代表c

    (2)非捕获组

    (?:x)称为非捕获组,表示不返回改组匹配的内容,即匹配的结果中不计入这个括号。

    非捕获组的作用可以考虑这一场景,嘉定需要匹配foo或者foofoo,正则表达式就应该写成/(foo){1,2}/,但是这样会占用一个组匹配。这是们就可以额使用非捕获组,将正则表达式改为/(?:foo){1,2}/,它的作用与前一个正则是一样的,但是不会单独输出括号内部的内容。

console.log("abc".match(/(.)b(.)/))    //["abc","a","c"]
console.log("abc".match(/(?:.)b(.)/))    //["abc","c"]
console.log("abc".match(/(.)b(?:.)/))    //["abc","a"]

    上述代码中,可以发现,第一个代码不会对a进行输出,第二个不会对c进行输出。

    (3)先行断言

    x(?=y)称为先行断言,x只有在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟着百分号的数字,可以写成/\d+(?=%)/。

    注,先行断言中,括号里的部分不会返回。   

console.log("abc".match(/b(?=c)/))    //["b"]

    上述代码汇总,括号中的c不会被返回,b在c前面所以会被匹配。

    (4)先行否定断言

     x(?!y)称为先行否定断言,x只有不在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟的不是百分号的数字,既要写成/\d+(?!%)/。 

console.log(/\d+(?!\.)/.exec("3.14"))    //["14"]

    上述代码中,找不在.前面的数据,14在小数点后面,不在前面可以返回。