JavaScript+jQuery交互式Web前端开发（第2版） 课件 第12章 正则表达式

第12章正则表达式《JavaScript+jQuery交互式Web前端开发（第2版）》学习目标/Target

了解正则表达式，能够描述正则表达式的概念和作用

掌握正则表达式的使用，能够使用正则表达式匹配字符串掌握正则表达式中元字符的使用，能够根据实际需求选择合适的元字符

掌握正则表达式常用方法，能够实现字符串的匹配、分割和替换章节概述/Summary在实际开发中，经常需要对文本内容进行搜索、查找、匹配、分割和替换等操作，正则表达式提供了简单的语法，可以高效完成这些操作。例如，可以使用正则表达式验证用户在表单中输入的数据格式，如用户名、密码、手机号、身份证号等的格式。此外，在处理字符串、数组、对象等数据类型时，正则表达式也可以提供数据匹配、分割、替换等操作。本章将对正则表达式进行详细讲解。目录/Contents12.112.212.3认识正则表达式使用正则表达式正则表达式中的元字符12.4正则表达式常用方法认识正则表达式12.1了解正则表达式，能够描述正则表达式的概念和作用

先定一个小目标！12.1认识正则表达式正则表达式（RegularExpression）是一种描述字符串规律的表达式，用于匹配字符串中的特定内容。正则表达式的语法灵活、匹配能力强大，可以使用各种符号、特殊字符匹配复杂的字符串。12.1认识正则表达式在实际开发中，正则表达式通常被用于匹配或替换符合某个规律的文本，例如，用户在某个网站中注册账号时，网站要求用户的账号由11位有效手机号组成，网站的开发人员在对用户的账号进行格式验证时，就会使用正则表达式。12.1认识正则表达式在JavaScript中，正则表达式是一种对象。创建正则表达式的方式有两种，一种是使用字面量创建，另一种是使用RegExp()构造函数创建。12.1认识正则表达式使用字面量创建正则表达式的语法格式如下。12.1认识正则表达式/pattern/flags使用RegExp()构造函数创建正则表达式的语法格式如下。newRegExp(pattern[,flags])下面分别对元字符、文本字符和模式修饰符进行简单的介绍。12.1认识正则表达式元字符：具有特殊含义的字符，例如，元字符“.”表示匹配除换行符、回车符之外的任意单个字符，元字符“*”表示匹配前面的字符0次或多次。文本字符：又称为原义字符，它没有特殊含义，用于表示原本的字符。例如，“a”表示字符a，“1”表示字符1。模式修饰符：用于指定额外的匹配策略，如果不需要指定额外的匹配策略，则模式修饰符可以省略。例如，“i”表示忽略大小写；“g”表示全局匹配；“m”表示多行匹配；“s”表示允许点字符“.”匹配换行符和回车符；“u”表示使用Unicode模式进行匹配；“y”表示执行黏性搜索，匹配从目标字符串的当前位置开始。下面通过代码演示正则表达式的创建。12.1认识正则表达式//使用字面量创建正则表达式varreg=/ab/i;//使用RegExp()构造函数创建正则表达式varreg1=newRegExp('ab','i');使用正则表达式12.2掌握正则表达式的使用，能够使用正则表达式匹配字符串

先定一个小目标！12.2使用正则表达式1.检测字符串是否包含敏感词当需要检测一个字符串是否包含敏感词时，可以使用正则表达式中的test()方法。test()方法用于检测字符串是否匹配某个正则表达式，匹配成功则返回true，否则返回false。test()方法的语法格式如下。12.2使用正则表达式正则表达式.test(需要匹配的字符串)下面通过代码演示如何使用test()方法检测字符串是否包含敏感词。

varreg=/admin/;

console.log(reg.test('suadmin'));

//输出结果为：true

console.log(reg.test('address'));

//输出结果为：false12.2使用正则表达式2.获取正则表达式匹配结果使用test()方法虽然可以检测字符串是否匹配某个正则表达式，但是无法返回匹配结果。当需要获取正则表达式匹配结果时，可以使用match()方法。match()方法用于在目标字符串中进行搜索匹配，匹配成功时，返回一个包含附加属性的数组，否则返回null。match()方法的语法格式如下。12.2使用正则表达式string.match(regexp)下面通过代码演示如何使用match()方法获取正则表达式匹配结果。

varreg=/a.min/;

console.log('1admin2admin'.match(reg));

//输出结果为：['admin',index:1,input:'1admin2admin',groups:undefined]

console.log('address'.match(reg));

//输出结果为：null12.2使用正则表达式关于['admin',index:1,input:'1admin2admin',groups:undefined]数组的具体解释如下。12.2使用正则表达式数组元素'admin'表示匹配到的内容。附加属性index表示匹配到的内容'admin'在原字符串中的起始索引。附加属性input表示原字符串。附加属性groups是ECMAScript2018中新增的内容，表示捕获数组，由于没有定义命名捕获组，结果为undefined。3.获取正则表达式全局匹配结果当需要匹配字符串中所有符合正则表达式的内容时，可以使用match()方法结合模式修饰符“g”完成匹配。模式修饰符“g”表示全局匹配，即匹配到第1个符合正则表达式的内容后继续向后匹配。12.2使用正则表达式下面通过代码演示如何使用match()方法结合模式修饰符“g”获取正则表达式全局匹配结果。varreg=/a.s/g;varstr='absabcadsabdassamas';console.log(str.match(reg));

//输出结果为：(3)

['abs','ads','ass']12.2使用正则表达式正则表达式中的元字符12.3掌握正则表达式中定位符的使用，能够灵活应用定位符“^”和“$”匹配字符串

先定一个小目标！12.3.1定位符12.3.1定位符定位符可以匹配以指定内容开头或以指定内容结尾的字符串。常用的定位符有“^”和“$”，具体说明如下。定位符“^”：用于匹配以指定内容开头的字符串。例如，正则表达式/^hello/可以匹配以“hello”开头的字符串。定位符“$”：用于匹配以指定内容结尾的字符串。例如，正则表达式/world$/可以匹配以“world”结尾的字符串。当同时使用定位符“^”和“$”时，表示匹配以指定内容开头并且以指定内容结尾的字符串。12.3.1定位符下面通过代码演示使用定位符“^”和“$”匹配字符串。varreg1=/^a/;varreg2=/e$/;console.log(reg1.test('apricot'));

//输出结果为：trueconsole.log(reg2.test('orange'));

//输出结果为：trueconsole.log(/^Happyday$/.test('Happyday'));//输出结果为：trueconsole.log(/^Sadday$/.test('Happyday'));

//输出结果为：false12.3.1定位符掌握正则表达式中字符类的使用，能够灵活应用常用的字符范围

先定一个小目标！12.3.2字符类字符类是一个字符集合，在实际开发中，有时需要匹配特定范围内的字符，例如，匹配a~z范围内的字符，可以使用中括号“[]”实现范围匹配。12.3.2字符类正则表达式中的中括号“[]”表示一个字符集合，只要待匹配的字符符合字符集合中的某一项，即表示匹配成功。当需要匹配某个范围内的字符时，可以在正则表达式中使用中括号“[]”和连字符“-”来表示范围；当需要匹配某个范围外的字符时，可以在“[”的后面加上“^”，此时“^”不再表示定位符，而是反义符，表示某个范围之外。12.3.2字符类常用的字符范围如下表所示。12.3.2字符类示例说明[cat]匹配c、a、t中的任意一个字符[^cat]匹配除c、a、t以外的字符[A-Z]匹配A~Z范围内的字符[a-z]匹配a~z范围内的字符[a-zA-Z0-9]匹配a~z、A~Z和0~9范围内的字符注意连字符“-”只有在表示字符范围时才作为元字符来使用，其他情况下只表示一个本文字符。连字符“-”表示的范围遵循字符编码的顺序，如“a-z”“A-Z”“0-9”是合法的范围，“a-Z”“z-a”“a-9”是不合法的范围。下面通过代码演示常用的字符范围。varstr='beautiful风景!';console.log(str.match(/[abc]/g));

//输出结果为：(2)

['b','a']console.log(str.match(/[^a-z]/g));

//输出结果为：(4)

['','风','景','!']12.3.2字符类掌握正则表达式中反斜线的使用，能够灵活应用常见的预定义符

先定一个小目标！12.3.3反斜线当需要匹配的字符串中包含换行符、制表符和元字符时，就需要用到反斜线“\”。在正则表达式中，不仅可以使用反斜线“\”加一些具有特定含义的字符来进行特定匹配，而且可以将元字符转换为文本字符。使用反斜线“\”进行特定匹配的形式是一些常见模式的简写，被称为预定义符。12.3.3反斜线常见的预定义符如下表所示。预定义符说明\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]12.3.3反斜线>>续上一页表预定义符说明\f匹配一个换页符（formfeed）\b匹配单词分界符。如“\bg”可以匹配“bestgrade”，结果为“g”\B非单词分界符。如“\Bade”可以匹配“bestgrade”，结果为“ade”\t匹配一个水平制表符（horizontaltab）\n匹配一个换行符（linefeed）\xhh匹配ISO-8859-1值为hh（十六进制2位数）的字符，如“\x61”表示“a”12.3.3反斜线>>续上一页表预定义符说明\r匹配一个回车符（carriagereturn）\v匹配一个垂直制表符（verticaltab）\uhhhh匹配Unicode值为hhhh（十六进制4位数）的字符，如“\u597d”表示“好”12.3.3反斜线下面以“\d”和“\w”为例进行演示，示例代码如下。varstr='HelloWorld123';varreg1=/\d/g;varreg2=/\W/g;console.log(str.match(reg1));

//输出结果为：(3)

['1','2','3']console.log(str.match(reg2));

//输出结果为：['']12.3.3反斜线当需要匹配的字符是元字符时，在正则表达式中需要使用反斜线将元字符转换为文本字符。12.3.3反斜线注意当正则表达式是使用字面量的方式创建时，只需要使用一个反斜线将元字符转换为文本字符；当正则表达式是使用RegExp()构造函数的方式创建时，需要使用两个反斜线将元字符转换为文本字符。下面通过代码演示如何使用反斜线将元字符“^”“？”和“.”转换为文本字符。varreg=/\^/g;varreg1=/\?/g;varreg2=newRegExp('\\.','g');console.log('^a1b2'.match(reg));

//输出结果为：['^']console.log('a1?b2'.match(reg1));//输出结果为：['?']console.log('a1.b2'.match(reg2));//输出结果为：['.']12.3.3反斜线掌握正则表达式中点字符和限定符的使用，能够灵活应用点字符和限定符

先定一个小目标！12.3.4点字符和限定符在实际开发中，当需要匹配除换行符（\n）和回车符（\r）之外的任意单个字符时，可以在正则表达式中使用点字符“.”。当需要匹配某个连续出现的字符时，可以使用限定符。限定符包括“?”“+”“*”“{}”。12.3.4点字符和限定符点字符和限定符的说明如下表所示。字符说明.匹配除换行符和回车符之外的任意单个字符?匹配前面的字符零次或一次+匹配前面的字符一次或多次*匹配前面的字符零次或多次{n}匹配前面的字符n次{n,}匹配前面的字符最少n次{n,m}匹配前面的字符最少n次，最多m次12.3.4点字符和限定符下面通过代码演示如何使用点字符和限定符匹配h与t之间除换行符和回车符之外的任意单个字符，使用限定符匹配h与t之间的字符i。console.log('hit'.match(/h.t/g));

//输出结果为：['hit']console.log('hiit'.match(/hi?t/g));

//输出结果为：nullconsole.log('hiit'.match(/hi+t/g));

//输出结果为：['hiit']console.log('ht'.match(/hi*t/g));

//输出结果为：['ht']console.log('hit'.match(/hi{1}t/g));

//输出结果为：['hit']console.log('hiit'.match(/hi{1,}t/g));

//输出结果为：['hiit']console.log('hiiit'.match(/hi{1,3}t/g));

//输出结果为：['hiiit']12.3.4点字符和限定符当同时使用点字符和限定符时，可以实现匹配指定数量范围的任意字符。例如，正则表达式“/hello.*world/”可以匹配hello和world之间包含零个或多个任意字符（不包括换行符、回车符）的字符串。12.3.4点字符和限定符在实现指定数量范围的任意字符匹配时，支持贪婪匹配和懒惰匹配两种方式。贪婪匹配表示匹配尽可能多的字符，懒惰匹配表示匹配尽可能少的字符。正则表达式默认是贪婪匹配，当需要使用懒惰匹配时，可以在限定符的后面加上“?”。varstr='webWEB';varreg1=/w.*b/ig;

//贪婪匹配console.log(str.match(reg1));

//输出结果为：['webWEB']varreg2=/w.*?b/ig;

//懒惰匹配console.log(str.match(reg2));

//输出结果为：(2)

['web','WEB']12.3.4点字符和限定符掌握正则表达式中竖线和小括号的使用，能够灵活应用竖线和小括号匹配字符串

先定一个小目标！12.3.5竖线和小括号竖线“|”表示或，当需要匹配的字符串有多个条件时，可以在正则表达式中使用竖线“|”连接前后两个条件。例如，正则表达式“/hi|ha/g”表示匹配hi或ha，只要在给定的字符串中包含竖线“|”前后中一个，就会匹配成功。varreg=/hi|ha/g;console.log('shill'.match(reg));

//输出结果为：['hi']console.log('happy'.match(reg));

//输出结果为：['ha']12.3.5竖线和小括号在正则表达式中，使用小括号“()”可以对正则表达式进行分组，被小括号标注的内容称为子模式（或称为子表达式），一个子模式可以看作一个组。正则表达式中的小括号“()”主要有4个作用，分别是改变作用范围、捕获内容、反向引用和零宽断言。12.3.5竖线和小括号1.改变作用范围使用小括号“()”对内容进行分组后，小括号“()”中的竖线“|”将只对当前子模式有效，而不会作用于整个模式。限定符原本用于限定其前面的字符出现的次数，而分组后，则用于限定其前面的分组匹配到的内容出现的次数。12.3.5竖线和小括号下面通过代码演示如何通过小括号“()”改变作用范围。12.3.5竖线和小括号varreg1=/happy|te/; //可匹配的结果：happy、tevarreg2=/ha(ppy|te)/; //可匹配的结果：happy、hatevarreg3=/abc{2}/; //可匹配的结果：abccvarreg4=/a(bc){2}/; //可匹配的结果：abcbc2.捕获内容在正则表达式中，当子模式匹配到内容时，匹配到的内容会被临时保存，这个过程称为捕获。使用match()方法进行捕获时，返回结果中会包含子模式的匹配结果，示例代码如下。12.3.5竖线和小括号varreg=/Su(nny)/;console.log('Sunnyday'.match(reg));在实际开发中，如果不需要捕获子模式的匹配内容，可以在子模式前使用“?:”实现非捕获匹配，示例代码如下。12.3.5竖线和小括号varreg=/Su(?:nny)/;console.log('Sunnyday'.match(reg));3.反向引用当一个正则表达式被分组后，每个组将会自动分配一个组号用于代表每个子模式，组号按从左到右的顺序编号，第1个子模式的组号为1，第2个子模式的组号为2，以此类推。有组号后，可以在正则表达式的后半部分引用前半部分中的子模式的捕获结果，这种引用方式称为反向引用。反向引用的语法为“\组号”，例如，“\1”表示引用第1个子模式的捕获结果。12.3.5竖线和小括号下面以查找字符串中连续的3个相同数字为例进行演示，示例代码如下。12.3.5竖线和小括号varstr='133351234556668';varreg=/(\d)\1\1/g;varmatch=str.match(reg);console.log(match);

//输出结果为：(2)

['333','666']4.零宽断言零宽断言是指一种零宽度的子模式匹配，其中，零宽是指子模式匹配到的内容不会保存到匹配结果中，断言是指给子模式所在位置添加一个限定条件，用于规定此位置之前或者之后的内容必须满足限定条件才能使子模式匹配成功。12.3.5竖线和小括号零宽断言分为先行断言、先行否定断言、后行断言和后行否定断言，具体如下表所示。12.3.5竖线和小括号方式语法说明先行断言x(?=y)只有当x后面是y时，才匹配成功先行否定断言x(?!y)只有当x后面不是y时，才匹配成功后行断言(?<=y)x只有当x前面是y时，才匹配成功后行否定断言(?<!y)x只有当x前面不是y时，才匹配成功下面通过代码演示零宽断言的使用，示例代码如下。12.3.5竖线和小括号varreg1=/Countr(?=y)/g;varreg2=/Countr(?!y)/g;varreg3=/(?<=A)dmin/g;varreg4=/(?<!A)dmin/g;

//后行否定断言console.log('Country'.match(reg1));

//输出结果为：['Countr']console.log('Country'.match(reg2));

//输出结果为：nullconsole.log('Admin'.match(reg3));

//输出结果为：['dmin']console.log('Bdmin'.match(reg4));

//输出结果为：['dmin']正则表达式优先级多学一招在JavaScript中，除了运算符有优先级外，正则表达式也有优先级。在使用正则表达式时，元字符和文本字符会遵循优先级顺序。下面将正则表达式中各种符号按照优先级从高到低的顺序进行排列，具体如下。12.3.5竖线和小括号小括号()和非捕获括号(?:)，用于分组和捕获。反斜线\，用于将特殊字符转义为普通字符。中括号[]，用于匹配其中的任意一个字符。限定符{}、?、*、+，用于限定前面的子表达式出现的次数。定位符^和$，匹配行开头和结尾的位置。竖线|，用于匹配多个选择分支中的一个。其他运算符，包括点字符.、预定义符\d、\w、\s、反向引用\1、先行断言(?=)、先行否定断言(?!)。多学一招在正则表达式中，可以使用小括号来分组子表达式，以此来改变优先级。在编写正则表达式时，应注意按照正则表达式优先级来使用各种元字符和文本字符，以免出现匹配失败的情况。12.3.5竖线和小括号正则表达式常用方法12.4掌握正则表达式中search()方法的使用，能够实现字符串的匹配

先定一个小目标！12.4.1search()方法12.4.1search()方法search()方法可以获取子字符串在给定的字符串中首次出现的索引，匹配成功则返回其首次出现的索引，匹配失败则返回-1。search()方法的语法格式如下。string.search(regexp)12.4.1search()方法下面通过代码演示使用search()方法查找字符a和字符c中间只有一个字符的子字符串在目标字符串'abcadc'中首次出现的索引。varstr='abcadc';console.log(str.search('a.c')); //输出结果为：0console.log(str.search(/a.c/)); //输出结果为：0掌握正则表达式中split()方法的使用，能够实现字符串的分割

先定一个小目标！12.4.2split()方法在实际开发中，若要将字符串“test@”以“@”和“.”为分隔符分割成3部分，需要对字符串进行截取，并且需要知道每一部分的起始位置和长度，这样需要写3次字符串截取的代码，如果字符串中包含多个分隔符，还需要编写更多次字符串截取的代码，非常麻烦，这时可以使用split()方法，配合正则表达式快速实现字符串分割。12.4.2split()方法split()方法用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符本身。当分隔符不止一个时，需要定义正则表达式对象来完成字符串的分割操作。在实现分割操作时还可以指定分割的次数。split()方法的语法格式如下。12.4.2split()方法string.split(separator,limit)1.使用正则表达式匹配的方式分割字符串下面通过代码演示如何使用“@”和“.”两种分隔符对字符串进行分割。12.4.2split()方法varstr='test@';va