前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript正则表达式的模式匹配教程,并且附带充足的实战代码

JavaScript正则表达式的模式匹配教程,并且附带充足的实战代码

作者头像
@零一
发布2021-01-29 13:55:32
1.1K0
发布2021-01-29 13:55:32
举报
文章被收录于专栏:前端印象前端印象

JavaScript正则表达式的模式匹配

  • 引言
  • 正文
    • 一、正则表达式定义
    • 二、正则表达式的使用
    • 三、RegExp直接量
      • (1)正则表达式初体验
      • (2)深入了解正则
        • 字符类
        • 重复
        • 选择
        • 分组与引用
        • 指定匹配位置
        • 修饰符
      • (3)用于模式匹配字符串的方法
        • search()
        • replace()
        • match()
        • split()
    • 四、new RegExp()
      • RegExp对象的属性
      • RegExp对象的方法
    • 五、实战应用
      • (1)判断电话号码格式
      • (2)判断邮箱格式
      • (3)判断昵称格式
  • 结束语

引言

其实我写这篇文章的话,主要是想自己重新复习一遍正则表达式。我们也知道正则表达式在很多语言中都是通用的,所以学好这个好处很多。接下来,就跟我一起来学习一下正则表达式,从0到入门吧。

  • 公众号:前端印象
  • 不定时有送书活动,记得关注~
  • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

一、正则表达式定义

正则表达式(regular expression)是一个描述字符模式的对象,简单点来讲就是通过正则表达式规定的模式,从一堆字符串中,找到与该模式匹配的字符串,并可以完成检索或字符串替换的功能。

来举个例子,让大家更形象地理解正则表达式的作用。

你去买苹果,老板给你随便拿了几个,但你觉得他给你挑的苹果不好,于是你想从中拿掉一些不好的苹果,再去挑一些好的苹果,在选之前,你先想好自己挑选苹果的标准,比如苹果的纹路要多 、苹果要很红 、苹果不能太大等等,然后再根据你自己定的标准去这么多苹果里挑选到完全符合你标准的苹果放进自己的袋子里,或者是替换掉袋子里你觉得不好的苹果。

希望你们能对正则表达式有个初步的印象。

二、正则表达式的使用

在JavaScript中,正则表达式用RegExp对象表示,我们可以通过两种方式创建一个正则表达式对象:

  1. RegExp直接量
  2. new RegExp()

三、RegExp直接量

let pattern = /javascript/ 这样双正斜杠包裹一个匹配模式的写法就是RegExp直接量,这种方法其实是new RegExp()的一种能语法糖的写法。这一部分我们都用RegExp直接量的方法来讲解,在后面我们会介绍 new RegExp() 的用法

(1)正则表达式初体验

接下来看一个例子,来初次体验一下正则表达式的使用

代码语言:javascript
复制
//RegExp直接量 创建一个字符串的匹配标准
let pattern = /javascript/           
let str = "I love javascript"

str.search(pattern)           //返回 7

我来讲一下这段代码,首先我们通过两个正斜杠// 创建了一个正则表达式对象,然后将我们要匹配的字符串放到这两个斜杠中,我们例子中就是将javascript放到两个斜杠中,意思就是我们的匹配标准就是:要匹配到javascript这段字符串。然后我们调用了一个检索的方法search(),这个方法需要传入一个正则表达式对象为参数,根据这个参数去字符串中匹配相应的字符串,如果匹配到了,则返回第一个与之匹配的字符的索引值;若没匹配到,返回-1。例子中,变量str中有一段字符串为javascript,所以匹配成功,并返回javascript的开头字母的索引值,为7

(2)深入了解正则

刚才我们体验了一下最简单的正则表达式去匹配字符串。在上一个例子中,我们将javascript作为标准去匹配,其实大多数的字符都是按照字面含义去匹配的,意思就是你输入什么字符,就去匹配什么字符,比如/python/ 就是去字符串中匹配 python字符串 、/123/ 就是去匹配 123 字符串

但是在正则表达式中,\ 反斜杠有特殊的作用,在一些字符前面加一个反斜杠,能起到转义的作用。例如 /n/ 是匹配字符串 n 的,但是/\n/中,n的前面加了一个反斜杠,就将其转义了,这个匹配模式的意思就是去匹配换行符,下面列出一些其他的转义字符

字符

匹配

字母和数字字符

自身

\o

NUL 字符(\u0000)

\t

制表符(\u0009)

\n

换行符(\u000A)

\v

垂直制表符(\u000B)

\f

换页符(\u000C)

\r

回车符(\u000D)

在正则表达式中,许多标点符号都具有特殊的含义,它们是:^ $ . * + ? = ! : | \ / ( ) [ ] { } ,当我们想要匹配这些字符时,也需要在它们前面加上反斜杠 \ ,例如

代码语言:javascript
复制
/*--------------不对小括号进行转义----------------*/
let pattern = /you(kimy)/
let str = "I love you(kimy)"

str.search(pattern)       //返回 -1  表示未匹配到相应字符

/*--------------对小括号进行转义-----------------*/
let pattern = /you\(kimy\)/
let str = "I love you(kimy)"

str.search(pattern)       //返回  7 表示匹配成功

为什么这些标点字符需要进行特殊的转义呢?因为它们有别的用处,我们接下来会慢慢介绍他们的用处

字符类

将直接量字符单独放在方括号里就组成了一个字符类,一个字符类可以匹配它所包含的任意字符。例如/[abcd]/ 就是匹配到 abcd四个字符中的任意一个即为匹配成功。如果在方括号里最前面加上一个 ^ 符号,则表示为,只要匹配到一个不是方括号里的字符的字符串即为匹配成功,例如 /[^abc]/就是匹配到不是 abc 三个字符中的任意一个即为匹配成功。 字符类还可以使用 - 来表示字符的一个范围,例如 /[a-zA-Z0-9]/表示匹配到任意一个大小写字母或者数字都为匹配成功。

在正则表达式中,还给出了一些特殊字符的转义,我们来看下列的表格

字符

匹配

[…]

方括号内的任意一个字符

[^…]

不在方括号内的任意一个字符

.

除了换行符和其他Unicode行终止符之外的任意字符

\w

相当于[a-zA-Z0-9]

\W

相当于[^a-zA-Z0-9]

\s

任何Unicode空白符

\S

任何非Unicode空白符

\d

任何数字,相当于[0-9]

\D

任何非数字,相当于[^0-9]

[\b]

退格直接量

我们来选取表格中的 \d 来举个例子

代码语言:javascript
复制
let pattern = /python\d/
let str = "I love python3"

str.search(pattern)   //返回  7

我们设置的匹配模式是 /python\d/,表示匹配到一个字符串为python并且后面紧跟一个任意数字即可,所以成功匹配到 str 中的python3字符串

重复

在上一部分,我们知道字符类都是匹配一个字符,例如 /\d//[0-9]/都是匹配任意一个数字 、/[abcd]/也是匹配一个字符,那如果我们想要匹配多个字符串岂不是要写很多遍重复代码?例如我们要匹配一个三位数字的字符串,我们就需要设置这样一个匹配模式 /\d\d\d/。 其实正则表达式有几种语法,可以将该表达方式简化,我们来看一下这个表格

字符

匹配

{n,m}

匹配前一项n-m次

{n,}

匹配前一项至少n次

{n}

匹配前一项n次

?

匹配前一项0次或1次,相当于{0,1}

匹配前一项至少一次,相当于{1,}

*

匹配前一项0次或更多次,相当于{0,}

我们接下来就利用这些语法进行一下重复操作,例如我们要匹配一段字符串中的11位数字,我们可以这样写 /\d{11}/,因为\d表示的是任意数字,在它后面加上一个重复语法,就是重复\d多少次。我们如果要匹配一个三位的字母并且后面跟上一个一位的可选数字,我们可以这样 /[a-zA-Z]{3}\d?/[a-zA-Z]{3} 表示匹配任意三位字母,\d? 表示匹配数字0次或1次

重复是贪婪的,它们会尽可能的多地匹配,我们称之为贪婪的重复,下面来看一个例子

代码语言:javascript
复制
let pattern = /\d{3,10}/
let str = "0123456789"

str.match(pattern)[0]     //返回  0123456789

这里介绍一个新的匹配方法 match ,它可以将匹配到的一段字符串放在一个数组里,若没匹配到则返回null。 在这个例子中,我们设置的匹配模式是/\d{3,10}/,表示匹配数字3到10次,因为重复语法默认是贪婪的,它会尽可能多地匹配,所以他就匹配了任意数字10次,返回 0123456789

那么如果我们如何使他们不贪婪地重复呢?其实很简单,我们只需要在重复的语法后面加一个 ? 即可将重复变成非贪婪的,还是这个例子

代码语言:javascript
复制
let pattern = /\d{3,10}?/
let str = "0123456789"

str.match(pattern)[0]     //返回  012

这是我们可以看到,在重复语法 {3,10}后面加上一个 ? 以后,它并没有尽可能多地匹配了,而是变成了尽可能少地匹配,即匹配三次任意数字就结束匹配。

还有其他的非贪婪重复的语法有: ??+?*? ,你们可以下去自行测试

选择

在JavaScript中有一个运算符可以用在正则表达式中,那就是 | ,它的意思就是或者,例如这个例子 /[a-z]|[0-9]/ 意思就是可以匹配任意一个a-z的字母,或者也可以匹配任意一个0-9的数字。

在复杂的例子里,我们也可以这样使用,先给出需求,匹配一段字符串,它可以是3位的不区分大小写的字母,也可以是4位的数字

代码语言:javascript
复制
let pattern = /[a-zA-Z]{3}|\d{4}/
let str = "Lpyexplore2333"

str.match(pattern)[0]   //返回   Lpy

在这个例子中,我们匹配的模式是3位的不区分大小写的字母或者4位数字,但是 str 中既有3位的不区分大小写的字母,也有4位数字,为什么最后只是返回了Lpy呢? 因为正则的匹配是从字符串的最左边开始匹配,只要有一个符合匹配模式的就停止匹配。

分组与引用

上面我们说过,在正则表达式中小括号是有特殊含义的,如果真的想要匹配带有小括号的字符串,必须要用反斜杠转移,接下来我们就来介绍一下 () 小括号的几种作用。

  1. 作用一: 把匹配模式中的部分项组合成子表达式

类似于这样 /java(script)?/,这种匹配模式的意思就是,匹配一段为 java 或者 javascript 的字符串。我们可以试一下,如果去掉这个括号会是什么结果,即 /javascript?/,这种匹配模式的意思就是,匹配一段为 javascrip 或者 javascript 的字符串。

所以我们可以很清楚的知道,() 小括号可以帮我们组合一个子表达式,然后将这个子表达式作为整体,配合 |*?+ 等符号去处理。

  1. 作用二:定义一个子匹配模式,方便获取子匹配模式匹配到的字符串

在将这个作用前,我还是再来详细介绍一下我之前例子中用到的匹配方法 match() 的具体用法。

match() 方法需要传入一个正则表达式,然后根据这个参数去匹配字符串,最后返回一个数组,数组的第一个元素是该参数匹配到的字符串,数组的第二个元素是该正则表达式中第一个()小括号内匹配到的字符串,数组的第三个元素是该正则表达式中第二个()小括号内匹配到的字符串,这样以此类推。若没匹配到就返回null

介绍完 match() 方法的使用以后,我们来看一个例子

代码语言:javascript
复制
/*---------------------在匹配模式中加小括号--------------*/

let pattern = /java(script\d+)/
let str = "javascript2333"

str.match(pattern)   //返回  ['javascript2333', 'script2333']

/*---------------------不在匹配模式中加小括号--------------*/

let pattern = /javascript\d+/
let str = "javascript2333"

str.match(pattern)   //返回  ['javascript2333']

我们可以看到,在匹配模式中加了小括号,最后返回的数组中会额外返回一个元素,用于存放小括号定义的子匹配模式匹配到的字符串。

接下来举一个实战中的例子

有这样一个 url 地址 https://www.baidu.com/s?query=javascript,我们知道 ? 后面跟的是请求参数,如果我们想要获取请求参数 query 的值,也就是 query= 后面的字符串,我们该如何使用正则表达式去匹配呢?

代码语言:javascript
复制
let pattern = /query=([a-zA-Z]+)/
let str = "https://www.baidu.com/s?query=javascript"

str.match(pattern)  //返回 ['query=javascript', 'javascript']

在这个例子中,我们很明确的知道我们只是想获取 query= 后面的字符串,但是如果我们直接用这个模式 /query=[a-zA-Z]+/ 去匹配的话,我们最后只能获得 query=javascript 这样一整段字符串。所以我们可以在我们可以使用小括号来定义一个子匹配模式,这样在返回的数组中直接获取小括号匹配返回的值就可以了。

  1. 作用三:小括号定义的子匹配模式可以被反斜杠+数字再次引用

其实作用三是在作用二的基础上的,我们可以通过一个反斜杠 \ 加上数字 n来引用该匹配模式中第n个括号定义的子匹配模式,例如 /java(script)\1/,这个意思就是 \1的部分需要匹配的字符串要跟(script) 一样

代码语言:javascript
复制
let pattern = /java(\d+)\1/
let str = "java123123"

str.match(pattern)    //返回  ['java123123', '123']

在这个例子中,\1(\d+)进行了一次引用,注意是引用,而不是这样 /java(\d+)(\d+)/。我们来看一下这两者的区别

代码语言:javascript
复制
/*----------------使用反斜杠加数字引用----------------*/

let pattern = /java(\d+)\1/
let str = "java123321"

str.match(pattern)  //返回  null

/*----------------完全的重复一遍子匹配模式----------------*/

let pattern = /java(\d+)(\d+)/
let str = "java123321"

str.match(pattern)  //返回  ['java123321', '12332', '1']

通过这两个例子的对比,我们可以发现以下几点区别:

  1. 子匹配模式必须和反斜杠+数字 匹配到的字符串一模一样,否则匹配失败
  2. 两个相同的子匹配模式则不需要两者匹配到一模一样的字符串
  3. 反斜杠+数字 虽然是对定义的子匹配模式的引用,但在匹配返回的结果里,却不会返回 反斜杠+数字 匹配到的内容

补充:如果我们用小括号定义的子匹配模式不想被反斜杠+数字引用,我们可以在小括号内部的最前面加上 ?:,即这种形式 (?:\d+) ,这样的话我们就无法在后面使用 反斜杠+数字 来引用这个子匹配模式了。

例如:

代码语言:javascript
复制
let pattern = /java(?:script)(\d+)\1/
let str = "javascript1212"

str.match(pattern)      //返回 ['javascript1212', '12']

例子中我们可以看到, \1 是对第二个子匹配模式(\d+)进行了引用,其实我们可以这样理解,使用这种形式(?:...)定义的子匹配模式,不会被计入编号中,所以也不会被 反斜杠+数字 引用。

指定匹配位置

在正则表达式中,我可以利用某些字符,去指定匹配发生的位置。这些字符我们称之为正则表达式的

字符

含义

^

匹配字符串的开头

$

匹配字符串的结尾

\b

匹配一个单词的边界

\B

匹配非单词边界的位置

(?=p)

零宽正向先行断言,?=后面的字符都要与p匹配,但不能包括p的那些字符

(?!p)

零宽负向先行断言,?!后面的字符不与p匹配

我们来逐个说一下这几个字符的用法:

  • ^ 符号

^ 这个符号是将匹配位置定位到字符串的开头,直接来看一个例子

代码语言:javascript
复制
/*--------------------------第一种情况--------------------*/

let pattern = /^javascript/
let str = "javascript is fun"

str.match(pattern)         //返回 ['javascript']

/*--------------------------第二种情况--------------------*/

let pattern = /^javascript/
let str = "i love javascript"

str.match(pattern)         //返回 null

我们匹配的模式是,要以javascript开头的字符串。第一种情况,字符串以 javascript开头,所以能匹配到;第二种情况,javascript不是在开头的位置,而是在末尾的位置,不符合匹配模式,所以匹配失败返回null。

在前面我们有一个地方还用到了 ^ 这个符号,那就是 [^abc] ,所以一定要注意,当 ^ 放在方括号里,表示的是取反,也就是说不匹配方括号里的任何字符。

  • $ 符号

$ 这个符号是将匹配位置定位到字符串的末尾,直接来看一个例子

代码语言:javascript
复制
/*--------------------------第一种情况--------------------*/

let pattern = /javascript$/
let str = "javascript is fun"

str.match(pattern)         //返回 null

/*--------------------------第二种情况--------------------*/

let pattern = /javascript$/
let str = "i love javascript"

str.match(pattern)         //返回 ['javascript']

我们的匹配模式是,字符串要以javascript结尾。第一种情况,字符串结尾处字符是 fun ,不符合匹配模式,返回null;第二种情况,结尾处字符为javascript,符合匹配模式,所以匹配成功。

我们可以看一下如果 ^ 符号 和 $ 符号一起使用是什么情况:

代码语言:javascript
复制
let pattern = /^javascript$/
let str = "javascript"

str.match(pattern)      //返回  ["javascript"]

当这两个符号一起使用时,匹配模式就变成了匹配整段字符串,并且字符串的内容就是 ^ 与 $ 之间的内容

  • \b

这个符号的作用是匹配一个单词的边界,我们来看几个例子来理解一下

代码语言:javascript
复制
/*-------------------------第一种情况----------------------*/

let pattern = /\bjava/
let str = "I love javascript"

str.match(pattern)         //  返回 ['java'] 匹配成功

/*-------------------------第二种情况----------------------*/

let pattern = /\bjava/
let str = "javascript is fun"

str.match(pattern)         //  返回 ['java']   匹配成功

/*-------------------------第三种情况----------------------*/

let pattern = /\bjava/
let str = "1javascript is fun"

str.match(pattern)         //  返回 null   匹配失败

/*-------------------------第四种情况----------------------*/

let pattern = /java\b/
let str = "I am learning java"

str.match(pattern)         //  返回 ['java']   匹配成功

/*-------------------------第五种情况----------------------*/

let pattern = /java\b/
let str = "I am learning javascript"

str.match(pattern)         //  返回 null   匹配失败

/*-------------------------第六种情况----------------------*/

let pattern = /\bjava\b/
let str = "I think java is fun"

str.match(pattern)         //  返回 ['java']   匹配成功

看了上面几个例子,你有没有得出什么规律?

其实 \b 的作用就是将匹配的点放到一个字符串前面(\b放前面)或后面(\b放后面)的 [^a-zA-Z0-9] 处,也可以理解为 \b 可以替换那些特殊字符,但 \b 不会作为匹配的内容。

  • \B

\B 则与 \b 相反了, \b 可以替换那些特殊字符,那么\B就是用来替换那些非特殊字符,也就是 [a-zA-Z0-9] 内的字符。

也来举几个简单的例子吧

代码语言:javascript
复制
/*-------------------------第一种情况----------------------*/

let pattern = /java\B/
let str = "I love javascript"

str.match(pattern)         //  返回 ['java'] 匹配成功

/*-------------------------第二种情况----------------------*/

let pattern = /java\B/
let str = "I love java"

str.match(pattern)         //  返回 null 匹配失败


/*-------------------------第三种情况----------------------*/

let pattern = /\Bjava\B/
let str = "I love 1javascript"

str.match(pattern)         //  返回 ['java'] 匹配成功

/*-------------------------第四种情况----------------------*/

let pattern = /\Bjava\B/
let str = "I love javascript"

str.match(pattern)         //  返回 null 匹配失败
  • (?=p)

(?=p)表示接下来的字符要与p匹配,但p不会作为内容返回

先来看一个例子

代码语言:javascript
复制
let pattern = /java(script)?(?=\:)/
let str = "java: my favorite language"

str.match(pattern)       //返回 ["java", undefined]  匹配成功

该例子的匹配模式:匹配一段字符串为java 然后 script 可以有一个也可以没有,后面必须跟一个 :,才能匹配成功,返回匹配内容,但是匹配内容中不包含 :

再来看一个类似的例子

代码语言:javascript
复制
let pattern = /java(script)?(?=\:)/
let str = "javascript is my favorite language"

str.match(pattern)       //返回 null  匹配失败

该例子匹配失败是因为字符串中的javascript后面没有 :,没有满足 (?=\:)的匹配要求

  • (?!p)

(?!p)与(?=p)相反,它表示接下来的字符不与p匹配

我们也来看一个例子

代码语言:javascript
复制
let pattern = /java(?!script)/
let str = "javascript is my favorite language"

str.match(pattern)       //返回 null  匹配失败

该例子的匹配模式是:匹配一段字符,只要java后面紧跟这的字符不是script即为匹配成功,同时java后面跟的内容也不会作为内容返回。但这个例子中的 str 里, java后面紧跟着的就是script,所以匹配失败。那么成功的例子就是这样的

代码语言:javascript
复制
let pattern = /java(?!script)/
let str = "javascr1111 is my favorite language"

str.match(pattern)       //返回 ["java"]  匹配成功

在该例子中, java 后面跟着的就不是script了,所以匹配成功了。java后面的字符不作为内容返回,所以最后的匹配结果就是 java

修饰符

正则表达式的修饰符是用以说明高级匹配模式的规则,并且修饰符是放在// 双斜杠外面的,例如这样 /java/g,g就是修饰符

接下来给出一张表,列出了修饰符的种类和含义

字符

含义

i

执行不区分大小写的匹配

g

执行全局匹配,即找到所有匹配的项并返回,而不是找到第一个之后就停止

m

多行匹配模式

我们来逐个讲解它们各自的用途:

  • 字符 i

我们之前会用这样的匹配模式去匹配 /[Jj]ava[Ss]cript/,这是因为我们不知道字符串中写的是 javascript 还是 JavaScript。其实我们可以直接用一个修饰符 i 来避免大小写的干扰,就想这样 /javascript/i

代码语言:javascript
复制
let pattern = /javascript/i
let str = "JavaScript"

str.match(pattern)        // 返回 ['JavaScript']  匹配成功

我们可以看到,匹配时忽略了大小写的影响,仍然匹配成功了

  • 字符 g

我们之前匹配字符串时,都是匹配到第一个就结束匹配返回内容,例如

代码语言:javascript
复制
let pattern = /java/
let str = "I love javascript and java"

str.match(pattern)      //返回 ["java"]  匹配到javascript的java就返回了

我们可以看到 str 字符串中,有两个java,但只匹配到javascript就返回了,如果我们要匹配到字符串中所有符合匹配模式的字符串,我们就可以用修饰符g,就像这样 /java/g

代码语言:javascript
复制
let pattern = /java/g
let str = "I love javascript and java"

str.match(pattern)    //返回 ["java", "java"] 匹配到了所有的java
  • 字符 m

如果一个字符串中包含换行符,则该字符串就有多行。这时我们可以使用修饰符 m 进行多行模式的匹配。

代码语言:javascript
复制
let pattern = /java$/m
let str = "java\nis fun"

str.match(pattern)            //返回 ['java'] 匹配成功

在这个例子中,str内有一个换行符,这样的话,第一行就是 java ,第二行就是 is fun 。我们的匹配模式是查找每一行,只要这一行的结尾是java,就返回匹配到的内容。

其实在这个例子中,我们看到,使用了修饰符 m 以后,锚字符 ^ 和 $ 不再是以一整个字符串的开头或结尾为匹配点了,而是以每一行的开头或结尾为匹配点。

(3)用于模式匹配字符串的方法

我们在前面的很多例子中用到了search()方法 、match()方法,他们都是匹配字符串的方法,其实还有很多种匹配的方法,他们的用法和作用各不相同,我们来了解一下

用于模式匹配字符串的方法有以下几种:

  1. search( )
  2. replace( )
  3. match( )
  4. split()

接下来我们来详细讲解一下

search()

该方法需要传入一个正则表达式作为参数,并返回第一个与之匹配的字符串的起始位置,若没匹配到,则返回-1

代码语言:javascript
复制
"javascript".search(/script/)      //返回 4

"javascript".search(/sccc/)        //返回-1
replace()

该方法是用于字符串的检索与替换。需要传入两个参数,第一个参数为正则表达式;第二个参数为需要进行替换的字符串。匹配成功则会用第二个参数去替换匹配到的字符串,并返回替换后的整体字符串;若没匹配成功,则返回原来的整体字符串。

代码语言:javascript
复制
"javascript".replace(/java/, 'python')  //返回 pythonscript

"javascript".replace(/abc/, 'python')   //返回 javascript

若使用了修饰符g,则会将所有匹配到的字符串都进行一个替换。

代码语言:javascript
复制
"javascript and java".replace(/java/, 'python')  //返回 pythonscript and java

"javascript".replace(/java/g, 'python')   //返回 pythonscript and python
match()

该方法需要传入一个正则表达式作为参数,返回一个由匹配结果组成的数组,如果正则表达式使用了修饰符g,则将所有匹配到的结果都放到数组中并返回。

代码语言:javascript
复制
"javascript and java".match(/java/)   //返回 ['java']

"javascript and java".match(/java/g)   //返回 ['java', 'java']

补充:当match()传入一个非全局的正则表达式时,实际上返回的数组里有两个属性:index和input,他们分别表示匹配到的字符串的起始位置和检索的整个字符串。

代码语言:javascript
复制
let ret = "I love javascript and java".match(/java/)
ret.index        //返回  7
ret.input        //返回 I love javascript and java
split()

该方法是用于将字符串分割,并将分割开的部分作为数组中的元素,最终返回一个数组。该方法需要传入一个正则表达式作为参数,去确定需要根据什么去分割这串字符串,若匹配成功,最终返回一个数组,数组中的元素就是每个被分割的字符串;若匹配失败,也会返回一个数组,数组中只有一个元素,那就是这个字符串整体。

代码语言:javascript
复制
'1,2,3,4,5,6'.split(/,/)   //返回 ['1', '2', '3', '4', '5', '6']

'1,2,3,4,5,6'.split(/\+/)  //返回 ['1,2,3,4,5,6']

四、new RegExp()

在第三部分讲解正则表达式时,我们都是用的直接量的形式创建的RegExp对象,其实使用直接量,在内部还是会调用RegExp()构造函数去创建对象实例的,那我们就来看看直接通过RexExp()构造函数是如何创建对象的吧。

RegExp()构造函数一共有两个参数,第一个参数为正则表达式的主体部分;第二个参数是可选的,为修饰符。需要注意的是,我们在写主体部分的时候,有些地方要用一个反斜杠\进行转义,我们必须将一个反斜杠\ 替换成两个反斜杠 \\。接下来我们来看一下一个简单的例子:

代码语言:javascript
复制
//创建一个RegExp对象,全局匹配字符串中连着的三个数字
let pattern = new RegExp("\\d{3}", "g")

这种创建RegExp对象的方法有一个好处,就是可以动态的改变正则表达式的主体部分;而RegExp直接量就无法做到动态变化。

RegExp对象的属性

我们创建的每个RegExp对象(包括RegExp直接量)都包含有5个属性:

  1. source:这是一个只读属性,包含正则表达式的文本,例如 /java/的source表示的就是 java
  2. global:这是一个只读的布尔值,用以表示这个正则表达式是否使用了修饰符 g
  3. ignoreCase:这是一个只读的布尔值,用以表示这个正则表达式是否使用了修饰符 i
  4. multiline:这是一个只读的布尔值,用以表示这个正则表达式是否使用了修饰符 m
  5. lastIndex:这是一个可读写的整数值,如果匹配模式中有修饰符 g,则这个属性会存储下一次检索的开始位置,这个属性只有在调用exec()和test()两个方法的时候会用到。

RegExp对象的方法

RegExp对象定义了两个用于匹配的方法——exec()test(),这两个方法与我们之前讲到的用于模式匹配字符串的方法不同的是,前者是定义在RegExp对象上的方法,并且传入的参数是字符串;而后者是调用字符串的方法,传入的参数是RegExp对象。

  • exec()

该方法就跟前面说到的不传入修饰符g的matach()方法一样,它对字符串执行一个正则表达式,如果匹配失败,返回null;如果匹配成功,则返回一个数组,数组的第一个元素是正则表达式匹配到的字符串,剩下的元素则是子表达式匹配到的字符串,同时该数组也包含indexinput两个属性。

来看一个例子,体会一下exec()方法的作用

代码语言:javascript
复制
let pattern = new RegExp("java", "g")
let ret = pattern.exec("I love javascript and java")  //返回["java"]

ret.index     //返回 7
ret.input     //返回 I love javascript and java

exec()match() 方法不同的是,不管正则表达式是否使用修饰符g,exec()都只会将第一个匹配到的字符串以及子表达式匹配到的字符串放到数组里返回;而match()方法在没有使用修饰符g时,跟exec()一样,如果使用了修饰符g,则将所有匹配到的字符串都放在数组里一起返回,并且不会返回圆括号里匹配到的字符串,同时,该数组里不包含indexinput两个属性。

那么这里引发一个疑问,既然不管是否使用修饰符g,exec()方法都只会返回第一个匹配到的字符串,那这个修饰符g有什么用呢? 其实我们在前面有说到,RegExp对象内有一个属性叫做 lastIndex,该属性默认为0。当我们调用exec()方法,并且使用了修饰符g进行匹配时,若匹配成功,lastIndex将变为下一次检索开始位置的索引值;若匹配失败,lastIndex则重置为0

代码语言:javascript
复制
let pattern = new RegExp("java", "g")
console.log(pattern.lastIndex)        //查看lastIndex默认为0
let str = "I love javascript and java"

pattern.exec(str)               //进行第一次检索匹配,返回["java"]
console.log(pattern.lastIndex)  //此时lastIndex为 4

pattern.exec(str)               //进行第二次检索匹配,返回["java"]
console.log(pattern.lastIndex)  //此时lastIndex为 19

pattern.exec(str)               //进行第三次检索匹配,返回null
console.log(pattern.lastIndex)  //此时lastIndex为  0

从上面这个例子我们能看看到,lastIndex默认为0,表示从字符串的开头开始检索,当我们进行第一次检索时,匹配到了javascript中的java,返回了该字符串,这时lastIndex变为第一次匹配到的字符串的起始位置索引 4;我们进行第二次索引,是从索引 5 开始匹配的,往后检索到字符串末尾的java,并返回该字符串,同时lastIndex变为第二次匹配到的字符串起始位置索引 19;我们进行第三次索引,是从索引 20 开始匹配的,往后匹配,已经无法匹配到对应的字符串了,所以返回一个null,并将lastIndex重置为0,表示下一次检索又从字符串的开头开始检索。

  • test()

该方法与exec()类似,该方法也是传入一个字符串作为参数,对该字符串进行检索,如果匹配到了相应的字符串,则返回true;如果没匹配到,则返回false。

代码语言:javascript
复制
let pattern = new RegExp("java", "g")
let ret = pattern.test("I love javascript and java")  //返回 true

test() 与 exec() 相同的是,如果匹配时使用了修饰符g,test()也会根据对象内部属性 lastIndex 进行检索匹配,这里就不多做说明了。

五、实战应用

(1)判断电话号码格式

应用场景:判断用户输入的电话号码格式是否正确 电话号码格式:1开头,后面跟10位数字

代码语言:javascript
复制
let str = "12356456132"  //str为用户输入的电话号码
let re = /^1\d{10}$/     
if(re.test(str) !== true) {
	console.log('电话号码格式不正确')
}
else {
	console.log('电话号码格式正确')
}

(2)判断邮箱格式

应用场景:判断用户输入的邮箱格式是否正确 邮箱格式:第一部分@第二部分,第一部分由字母、数字 和 短横线 - 组成,第二部分由(字母、数字、短横线 - ).cn.com…… 组成

代码语言:javascript
复制
let str = "561325647@qq.com"    //用户输入的邮箱
let re = /^[\w-\.]+@(\w-?)+(\.\w{2,})+$/
if(re.test(str) !== true) {
	console.log('邮箱格式不正确')
}
else {
	console.log('邮箱格式正确')
}

(3)判断昵称格式

应用场景:判断用户输入的昵称是否符合规定格式 昵称格式:昵称由字母、数字、下划线组成,必须由字母开头,长度为4-16位

代码语言:javascript
复制
let str = "Lpyexplore233"     //用户输入的昵称
let re = /^[a-zA-Z][\w_]{3,15}$/
if(re.test(str) !== true) {
	console.log('昵称格式不正确')
}
else {
	console.log('昵称格式正确')
}

结束语

花了两天的事件,自己重新完完整整地复习了一边正则表达式,并且将知识点以博客的形式展现了出来,希望这篇文章能对大家有所帮助吧。喜欢的关注我,以后还会根据JavaScript不同部分的知识点进行整理并发表博客~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript正则表达式的模式匹配
  • 引言
  • 正文
    • 一、正则表达式定义
      • 二、正则表达式的使用
        • 三、RegExp直接量
          • (1)正则表达式初体验
          • (2)深入了解正则
          • (3)用于模式匹配字符串的方法
        • 四、new RegExp()
          • RegExp对象的属性
          • RegExp对象的方法
        • 五、实战应用
          • (1)判断电话号码格式
          • (2)判断邮箱格式
          • (3)判断昵称格式
      • 结束语
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档