「JavaScript 从入门到精通」9.正则表达式

期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

前置知识：

JS中的正则表达式是用来匹配字符串中指定字符组合的模式。

另外需要记住：正则表达式也是对象。

1.创建正则表达式

使用一个正则表达式字面量：

使用RegExp对象：
new RegExp(str[, attr])接收2个参数，str是一个字符串，指定正则表达式匹配规则，attr可选，表示匹配模式，值有g(全局匹配),i(区分大小写的匹配)和m(多行匹配)。

正则表达式的返回值，是一个新的RegExp对象，具有指定的模式和标志。

返回信息介绍：

关于正则表达式的一些方法属性，文章后面介绍，这里先复习定义和使用。

2.使用正则表达式

JS的正则表达式可以被用于：

RegExp对象的exec和test方法；
String对象的match、replace、search和split方法。

2.1 RegExp对象方法

2.1.1 exec(str)

str: 需要检索的字符串。

若检索成功，返回匹配的数组，否则返回null。

返回信息介绍：

2.1.2 test(str)

str:需要检索的字符串。

若匹配成功返回true否则false。

等价于 reg.exec(str) !=null。

^str表示匹配以str开头的字符串，这些符号文章后面会介绍。

2.2 String对象方法

2.2.1 search

str.search(reg)：

str:被检索的源字符串。

reg:可以是需要检索的字符串，也可以是需要检索的RegExp对象，可以添加标志，如i。

若检索成功，返回第一个与RegExp对象匹配的字符串的起始位置，否则返回-1。

2.2.2 match

str.match(reg)：

str:被检索的源字符串。

reg:可以是需要检索的字符串，也可以是需要检索的RegExp对象，可以添加标志，如i。

若检索成功，返回与reg匹配的所有结果的一个数组，数组的第一项是进行匹配完整的字符串，之后的项是用圆括号捕获的结果，否则返回null。

'see Chapter 3.4.5.1' 是整个匹配。

'Chapter 3.4.5.1' 被'(chapter \d+(\.\d)*)'捕获。

'.1' 是被'(\.\d)'捕获的最后一个值。

'index' 属性(22)是整个匹配从零开始的索引。

'input' 属性是被解析的原始字符串。

2.2.3 replace

将字符串中指定字符替换成其他字符，或替换成一个与正则表达式匹配的字符串。

str.replace(sub/reg,val):

str: 源字符串
sub: 使用字符串来检索被替换的文本
reg: 使用RegExp对象来检索来检索被替换的文本
val: 指定替换文本
返回替换成功之后的字符串，不改变源字符串内容。

val可以使用特殊变量名：

2.2.4 split

将一个字符串，按照指定符号分割成一个字符串数组。

str.split(sub[, maxlength]):

str: 源字符串
sub: 指定的分割符号或正则
maxlength: 源字符串

2.3 使用情况

当我们想要查找一个字符串中的一个匹配是否找到，可以用test或search方法。
当我们想要得到匹配的更多信息，我们就需要用到exec或match方法。

3.正则表达式符号介绍

详细的每个符号的用法，可以查阅 W3school JavaScript RegExp 对象

3.1 修饰符

修饰符描述i执行对大小写不敏感的匹配。g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m执行多行匹配。

3.2 方括号

用于查找指定返回之内的字符：

.3 元字符

元字符是拥有特殊含义的字符：

3.4 量词

4. 正则表达式拓展（ES6）

4.1 介绍

在ES5中有两种情况。

参数是字符串，则第二个参数为正则表达式的修饰符。

参数是正则表达式，返回一个原表达式的拷贝，且不能有第二个参数，否则报错。

ES6中使用：

第一个参数是正则对象，第二个是指定修饰符，如果第一个参数已经有修饰符，则会被第二个参数覆盖。

new RegExp(/abc/ig, 'i');

4.2 字符串的正则方法

常用的四种方法：match()、replace()、search()和split()。

4.3 u修饰符

添加u修饰符，是为了处理大于uFFFF的Unicode字符，即正确处理四个字节的UTF-16编码。

/^\uD83D/u.test('\uD83D\uDC2A'); // false
/^\uD83D/.test('\uD83D\uDC2A'); // true

由于ES5之前不支持四个字节UTF-16编码，会识别为两个字符，导致第二行输出true，加入u修饰符后ES6就会识别为一个字符，所以输出false。

注意：

加上u修饰符后，会改变下面正则表达式的行为：

(1)点字符点字符(.)在正则中表示除了换行符以外的任意单个字符。对于码点大于0xFFFF的Unicode字符，点字符不能识别，必须加上u修饰符。

var a="";
/^.$/.test(a); // false
/^.$/u.test(a); // true

(2)Unicode字符表示法使用ES6新增的大括号表示Unicode字符时，必须在表达式添加u修饰符，才能识别大括号。

/\u{61}/.test('a'); // false
/\u{61}/u.test('a'); // true
/\u{20BB7}/u.test(''); // true

(3)量词使用u修饰符后，所有量词都会正确识别码点大于0xFFFF的 Unicode 字符。

/a{2}/.test('aa'); // true
/a{2}/u.test('aa'); // true
/{2}/.test(''); // false
/{2}/u.test(''); // true

(4)i修饰符不加u修饰符，就无法识别非规范的K字符。

/[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true

检查是否设置u修饰符：使用unicode属性。

const a=/hello/;
const b=/hello/u;
a.unicode // false
b.unicode // true

4.4 y修饰符

y修饰符与g修饰符类似，也是全局匹配，后一次匹配都是从上一次匹配成功的下一个位置开始。区别在于，g修饰符只要剩余位置中存在匹配即可，而y修饰符是必须从剩余第一个开始。

lastIndex属性: 指定匹配的开始位置：

返回多个匹配：

一个y修饰符对match方法只能返回第一个匹配，与g修饰符搭配能返回所有匹配。

'a1a2a3'.match(/a\d/y); // ["a1"]
'a1a2a3'.match(/a\d/gy); // ["a1", "a2", "a3"]

检查是否使用y修饰符：

使用sticky属性检查。

const a=/hello\d/y;
a.sticky; // true

4.5 flags属性

flags属性返回所有正则表达式的修饰符。

/abc/ig.flags; // 'gi'

5. 正则表达式拓展（ES9）

在正则表达式中，点(.)可以表示任意单个字符，除了两个：用u修饰符解决四个字节的UTF-16字符，另一个是行终止符。

终止符即表示一行的结束，如下四个字符属于“行终止符”：

U+000A 换行符（\n）
U+000D 回车符（\r）
U+2028 行分隔符（line separator）
U+2029 段分隔符（paragraph separator）

/foo.bar/.test('foo\nbar')
// false

上面代码中，因为.不匹配\n，所以正则表达式返回false。

换个醒，可以匹配任意单个字符：

/foo[^]bar/.test('foo\nbar')
// true

ES9引入s修饰符，使得.可以匹配任意单个字符：

/foo.bar/s.test('foo\nbar') // true

这被称为dotAll模式，即点（dot）代表一切字符。所以，正则表达式还引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式。

const re=/foo.bar/s;
// 另一种写法
// const re=new RegExp('foo.bar', 's');
re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'

/s修饰符和多行修饰符/m不冲突，两者一起使用的情况下，.匹配所有字符，而^和$匹配每一行的行首和行尾。

公众号：前端自习课

则表达式在js中有很多用途，最常见的是在表单验证中，验证一些字符串是否符合要求，如email、手机号等等，学好正则对于前端工程师来说是一个不错的辅助技能。

图片来自网络

一、特殊字符

1、$

正则的结尾符号

2、^

开始符号

3、（）

标记一个子表达式的开始和结束位置

4、[]

匹配括号中任意一个；例：

结果就是true

5、{}

括号里是匹配几个，一般用来限制位数；例：

匹配位数是4~7位，7个a返回true，8个就false；

有三种用法：

{3}：表示匹配三位；

{3，}：表示匹配三位及以上；

{3,7}：表示匹配3到7位

6、*

表示匹配0次或多次；相当于{0，}

7、？

表示要匹配的是0或1位；

8、+

表示匹配前面的字符串一次或多次

9、.

匹配任意字符

10、|

“或”：不解释

11、\w

字母、数字、下划线

12、\W

非字母、数字、下划线

13、\d

数字，等价于[0-9]

14、\D

非数字，等价于[^0-9]

15、\s

匹配空格

二、js方法

1、match方法：

挑选相匹配的内容：例：

结果是“1，2，3”

2.test方法：

返回一个布尔值，表示是否匹配

上述结果是“true”

3、replace方法：

用于将匹配正则的字符串进行替换，例：

前面//里面是被替换的内容，后面加的字符串是要替换的内容。

例：var path=req.url.replace(/\/?(?:\?.*)?$/,'').toLowerCase();

获取“/”后边的路径。

avaScript正则表达式的深度解析与应用

**一、正则表达式的魅力**

正则表达式，简称Regex，是一种强大的字符串处理工具，它能帮助我们快速、准确地匹配、查找、替换复杂的字符串模式。在JavaScript中，正则表达式被赋予了更高的地位，它不仅仅是一个工具，更是一种编程思维。

正则表达式的主要应用场景包括但不限于：表单验证、文本内容过滤、敏感词替换、字符串的特定部分提取等。

**二、正则表达式的创建与使用**

在JavaScript中，创建正则表达式有两种方式：

1. **通过RegExp构造函数**：`var regex=new RegExp('pattern');`

2. **通过字面量方式**：`var regex=/pattern/;`

一旦创建了正则表达式，就可以使用其提供的`test()`方法来检测字符串是否符合该正则表达式的规则。

**三、正则表达式的核心元素**

正则表达式的强大之处在于其包含的各种特殊字符和元字符，它们赋予了正则表达式丰富的匹配能力。

1. **边界符**：`^` 和 `$` 分别表示字符串的开始和结束。

2. **字符类**：`[]` 用于定义一组可选的字符，如`[abc]`表示匹配`a`、`b`或`c`中的任何一个字符。

3. **量词符**：如`*`、`+`、`?`、`{n}`、`{n,}`和`{n,m}`，它们用于指定字符或字符组出现的次数。

4. **预定义类**：如`\d`、`\D`、`\w`、`\W`、`\s`和`\S`，它们提供了对常见字符模式的快速匹配。

**四、正则表达式的替换功能**

正则表达式的另一个强大功能是替换。使用`replace()`方法，可以基于正则表达式匹配到的内容，将字符串中的特定部分替换为其他内容。

`replace()`方法接受两个参数：第一个参数是要被替换的模式（可以是字符串或正则表达式），第二个参数是替换后的内容。

**五、正则表达式的修饰符**

正则表达式还支持一些修饰符，它们可以改变匹配的行为：

* `g`：全局匹配，即匹配整个字符串中的所有符合条件的内容，而不仅仅是第一个。

* `i`：忽略大小写，即在匹配时忽略字符的大小写。

结合使用这两个修饰符，如`gi`，可以实现全局且不区分大小写的匹配。

**六、总结**

正则表达式是JavaScript中一个非常强大的工具，它可以帮助我们高效地处理字符串，实现复杂的匹配、查找和替换操作。掌握正则表达式的核心概念和用法，对于提升JavaScript编程能力具有非常重要的意义。

在线咨询

上一篇：Phaser横屏适配
下一篇：CSS命名规则

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商