2025第1周 | JavaScript中的正则表达式

[1. 正则表达式是个什么东东？](#1. 正则表达式是个什么东东？)
- [1.1 怎么定义正则](#1.1 怎么定义正则)
- [1.2 对象字面量方式](#1.2 对象字面量方式)
- [1.3 类创建方式](#1.3 类创建方式)
[2. 怎么使用](#2. 怎么使用)
- [2.1 实例方法](#2.1 实例方法)
- - [2.1.1 exec方法](#2.1.1 exec方法)
  - [2.1.2 test方法](#2.1.2 test方法)
- [2.2 字符串中的方法](#2.2 字符串中的方法)
- - [2.2.1 match/matchAll](#2.2.1 match/matchAll)
  - [2.2.2 replace/replaceAll](#2.2.2 replace/replaceAll)
  - [2.2.3 split](#2.2.3 split)
  - [2.2.4 search](#2.2.4 search)
[3. 规则](#3. 规则)
- [3.1 修饰符](#3.1 修饰符)
- [3.2 字符类](#3.2 字符类)
- [3.3 锚点(Anchors)](#3.3 锚点(Anchors))
- [3.4 转义字符串](#3.4 转义字符串)
- [3.5 集合(Sets)和范围(Ranges)](#3.5 集合(Sets)和范围(Ranges))
- [3.6 量词](#3.6 量词)
- [3.7 捕获组](#3.7 捕获组)
- [3.8 贪婪模式和惰性模式](#3.8 贪婪模式和惰性模式)

2025，做想做的事，读想读的书，持续学习，自律生活，修行人生。

2025一个转身就已到来，对于时间太快，总会有种惶恐感。每每回首过去，总会发现想要做的事情没有完成，学习的内容少之又少，读的有用的书籍更是可以忽略不计。对于内在的超越，内在的修行也是没有始终践行，知行合一，实践、认识、再实践、再认识...

2025年第1周：2025.01.01 ~ 2025.01.05

目标：JavaScript中的正则表达式，您搞懂了么？这部分内容，不需要深入了了解，但是基本的概念和用法需要掌握。

正则表达式是个什么东东？
怎么使用？
规则有哪些

1. 正则表达式是个什么东东？

我们看一下百度百科上的解释：

正则表达式（Regular Expression）：又称规则表达式，在代码中常简写为regex、regexp或RE 。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。许多程序设计语言都支持利用正则表达式进行字符串操作。

读了半天，还是懵，说的什么东东？

其实就一句话：在JavaScript中，就是用来进行字符串匹配的，进行搜索、获取、替代字符串。

1.1 怎么定义正则

那么，怎么定义正则呢？有两种方式来定义正则：

对象字面量方式(常用)
使用类RegExp创建

正则有两部分构成：模式、和修饰符。

1.2 对象字面量方式

这里面xxx：为模式
ig：为修饰符

javascript 复制代码

// 对象字面量方式创建正则
const regexp = /xxx/ig

1.3 类创建方式

使用RegExp 类来创建

javascript 复制代码

const regexp = new RegExp("xxx", "ig")

2. 怎么使用

有了正则表达式之后，我们要如何使用它呢? 在JavaScript中，主要用于以下两个场景：

类RegExp的实例方法：exec、和 test 方法
字符串的方法：match/matchAll、replace/replaceAll、search、split 方法。

2.1 实例方法

2.1.1 exec方法

exec方法：使用正则，执行一个字符串。

javascript 复制代码

const re1 = /qtz/ig; 
const message = "welcom to qtz";

const result = re1.exec(message);
console.log(result);

// [ 'qtz', index: 10, input: 'welcom to qtz', groups: undefined ]

2.1.2 test方法

test方法：检测某一个字符串是否符合正则的规则。返回boolean类型。

javascript 复制代码

const regexp = /qtz/ig
const str = "welcome to qtz"
if (regexp.test(str)) {
    console.log("匹配到了qtz")
}

2.2 字符串中的方法

2.2.1 match/matchAll

注意：matchAll传入的正则修饰符，必须加g，否则会报如下错误：

javascript 复制代码

Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument

matchAll 返回值：得到是一个迭代器对象(RegExpStringIterator{})

javascript 复制代码

const re = /qtz/ig; 
const message = "Qtz and qtz or qtz";

const result = message.matchAll(re);

console.log(result.next()); 
console.log(result.next());
console.log(result.next());

2.2.2 replace/replaceAll

替换字符串

javascript 复制代码

const re1 = /qtz/ig; 
const message = "Qtz and qtz or qtz";

const result = message.replace(re1, "AAA");
console.log(result);    // AAA and AAA or AAA

2.2.3 split

字符串分割

javascript 复制代码

const reg = /qtz/ig; 
const message = "Qtz and qtz or qtz";

const result = message.split(reg);
console.log(result);   // [ '', ' and ', ' or ', '' ]

2.2.4 search

查找字符串

javascript 复制代码

const reg = /qtz/i; 
const message = "HH Qtz and qtz or qtz";

const result = message.search(reg);
console.log(result);  // 3

3. 规则

3.1 修饰符

g：全局，匹配所有
i：忽略大小写
m：多行匹配

3.2 字符类

字符类(Character classes)是一个特殊的符号，匹配特定集中的任何符号：

\d ：数字从0到9的字符
\s：空格符号，包括空格、制表符 \t、换行符\n 和其他少数稀有字符，例如 \v、\f和 \r。
\w：'单字 "字符，拉丁字母、数字、下划线-。相当于 [ a-zA-Z0-9_ ]
.(点)：点 . 是一种特殊字符类，它与"除换行符之外的任何字符"匹配.

反向类(Inverse classes)

\D 非数字：除 \d 以外的任何字符，例如字母,
\S 非空格符号：除\s 以外的任何字符，例如字母。
\W 非单字字符：除 \w 以外的任何字符，例如非拉丁字母或空格,

3.3 锚点(Anchors)

符号^和符号 $ 在正则表达式中具有特殊的意义，它们被称为"锚点"。

符号 ^ 匹配文本开头;
符号 $ 匹配文本末尾,

词边界(Word boundary)

词边界 \b 是一种检査，就像 ^和$ 一样，它会检査字符串中的位置是否是词边界。
词边界测试 \b 检査位置的一侧是否匹配 \w，而另一侧则不匹配"\w"

3.4 转义字符串

如果要把特殊字符作为常规字符来使用，需要对其进行转义

只需要在它前面加个反斜杠 \

常见的需要转义的字符:

javascript 复制代码

[ ] \ ^ $ . | ? * + ( )

斜杠符号 / 并不是一个特殊符号，但是在字面量正则表达式中也需要转义;

javascript 复制代码

const re = /\//

3.5 集合(Sets)和范围(Ranges)

有时候我们只要选择多个匹配字符 的其中之一就可以：

在方括号 [...] 中的几个字符 或者字符类意味着"搜索给定的字符中的任意一个".

集合(Sets)

比如说，[eao] 意味着查找在3个字符'a'、'e'或者、'o'中的任意一个;

范围(Ranges)：方括号也可以包含字符范围

比如说，[a-z]会匹配从 a到z范围内的字母，[0-5]表示从05的数字;
[0-9A-F]表示两个范围:它搜索一个字符，满足数字 0 到 9 或字母 A 到 F
\d ：和 [0-9]相同;
\w：和 [a-zA-Z0-9_]相同;

3.6 量词

用来形容我们所需要的数量的词被称为量词(quantifiers)。

数量 {n}

确切的位数：{5}
某个范围的位数：{3,5} 注意,号后面不能有空格

简写:

+：代表"一个或多个"，相当于{1,}
?：代表"零个或一个"，相当于(0,1}。换句话说，它使得符号变得可选;
*：代表着"零个或多个"，相当于{0,}。也就是说，这个字符可以多次出现或不出现;

3.7 捕获组

模式的一部分可以用括号括起来(.)，这称为"捕获组。这有两个作用:

它允许将匹配的一部分作为结果数组中的单独项，
它将括号视为一个整体;

命名组:

用数字索引记录组很困难。
对于更复杂的模式，计算括号很不方便。我们有一个更好的选择：给括号起个名字。
这是通过在开始括号之后立即放置?<name>来完成的。

非捕获组:

有时我们需要括号才能正确应用量词，但我们不希望它们的内容出现在结果中。
可以通过在开头添加 ?:来排除组。

在正则表达式中，它用竖线|表示，
通常会和捕获组一起来使用，在其中表示多个值
与[aeo]的区别：中括号是单个字符

3.8 贪婪模式和惰性模式

默认情况下的匹配规则：是查找到匹配的内容后，会继续向后查找，一直找到最后一个匹配的内容

这种匹配的方式，我们称之为贪婪模式

懒性模式中的量词与贪婪模式中的是相反的。

只要获取到对应的内容后，就不再继续向后匹配
我们可以在量词后面 再加一个问号?来启用它
所以匹配模式变为 *?或 +?，甚至将?变为 ??

END !

2025第1周 | JavaScript中的正则表达式

目录

1. 正则表达式是个什么东东？

1.1 怎么定义正则

1.2 对象字面量方式

1.3 类创建方式

2. 怎么使用

2.1 实例方法

2.1.1 exec方法

2.1.2 test方法

2.2 字符串中的方法

2.2.1 match/matchAll

2.2.2 replace/replaceAll

2.2.3 split

2.2.4 search

3. 规则

3.1 修饰符

3.2 字符类

3.3 锚点(Anchors)

3.4 转义字符串

3.5 集合(Sets)和范围(Ranges)

3.6 量词

3.7 捕获组

3.8 贪婪模式和惰性模式