TypeScript中正则表达式的用法及实际应用

对月吟

前言

正则表达式是处理字符串的强大工具，在 TypeScript/JavaScript 中同样适用。本文将带你全面了解正则表达式在 TS 中的用法，包括基础语法、高级技巧和实际应用场景。

一、正则表达式基础


1. 创建正则表达式


1. 字面量语法

基本语法

1. const regex = /pattern/flags;

复制代码

• 1. pattern

  复制代码
  : 正则表达式的主体模式
  
• 1. flags

  复制代码
  : 可选的修饰符（如
  1. i

  复制代码
  ,
  1. g

  复制代码
  ,
  1. m

  复制代码
  等）
  

特点

• 在脚本加载时编译（当正则表达式是常量时性能更好）
  
• 更简洁直观的语法
  
• 不需要转义反斜杠（
  1. \

  复制代码
  ）
  

2. 构造函数语法

基本语法

1. const regex = new RegExp('pattern', 'flags');

复制代码

或

1. const regex = new RegExp(/pattern/, 'flags');

复制代码

特点

• 在运行时编译正则表达式
  
• 可以使用变量动态构建正则表达式
  
• 字符串中的反斜杠需要转义（
  1. \\

  复制代码
  ）
  
• 可以基于已有的正则对象创建新的正则
  

何时使用哪种方式

• 使用字面量语法：
  
  
  
  • 正则模式是固定的、已知的
    
  • 不需要动态构建正则
    
  • 需要更好的可读性
    
  
  
• 使用构造函数语法：
  
  
  
  • 需要动态构建正则表达式（如基于用户输入）
    
  1. <strong>动态构建</strong>
     
  2. 在程序运行时（而非编写代码时）根据需要创建或修改正则表达式模式。

  复制代码
  
  
  • 正则模式需要从变量或配置中获取
    
  • 需要在运行时组合多个正则片段
    
  
  

2. 常用修饰符（flags）


1.i(ignoreCase) - 不区分大小写

作用：使匹配不区分大小写

1. const regex = /hello/i;
   
2. 
   
3. console.log(regex.test('Hello')); // true
   
4. console.log(regex.test('HELLO')); // true
   
5. console.log(regex.test('hello')); // true
   
6. console.log(regex.test('hElLo')); // true

复制代码

2.g(global) - 全局匹配

作用：查找所有匹配项，而不是在第一个匹配后停止

1. const str = 'apple, orange, apple, banana';
   
2. const regex = /apple/g;
   
3. 
   
4. let match;
   
5. while ((match = regex.exec(str)) !== null) {
   
6.   console.log(`Found '${match[0]}' at index ${match.index}`);
   
7. }
   
8. // 输出:
   
9. // Found 'apple' at index 0
   
10. // Found 'apple' at index 15

复制代码

3.m(multiline) - 多行模式

作用：使

1. ^

复制代码

和

1. $

复制代码

匹配每行的开头和结尾，而不是整个字符串的开头和结尾

1. const multiLineText = `First line
   
2. Second line
   
3. Third line`;
   
4. 
   
5. // 不使用 m 修饰符
   
6. console.log(/^Second/.test(multiLineText)); // false
   
7. //在整个字符串的开头位置尝试匹配 "Second"
   
8. 
   
9. // 使用 m 修饰符
   
10. console.log(/^Second/m.test(multiLineText)); // true

复制代码

4.u(unicode) - Unicode 模式

作用：正确处理大于

1. \uFFFF

复制代码

的 Unicode 字符

1. const emojiText = '😊 笑脸';
   
2. 
   
3. // 不使用 u 修饰符
   
4. console.log(/^.$/.test(emojiText)); // false (无法正确匹配emoji)
   
5. 
   
6. // 使用 u 修饰符
   
7. console.log(/^.$/u.test(emojiText)); // true (正确匹配单个emoji字符)
   
8. 
   
9. // 匹配特定Unicode字符
   
10. console.log(/\p{Emoji}/u.test('😊')); // true
    
11. console.log(/\p{Script=Han}/u.test('汉')); // true (匹配汉字)

复制代码

5.s(dotAll) - dotAll 模式

作用：使

1. .

复制代码

匹配包括换行符在内的任意字符

1. const textWithNewline = 'Hello\nWorld';
   
2. 
   
3. // 不使用 s 修饰符
   
4. console.log(/Hello.World/.test(textWithNewline)); // false (.不匹配换行符)
   
5. 
   
6. // 使用 s 修饰符
   
7. console.log(/Hello.World/s.test(textWithNewline)); // true
   
8. 
   
9. // 替代方案（不使用s修饰符）
   
10. console.log(/Hello[\s\S]World/.test(textWithNewline)); // true

复制代码

组合使用多个修饰符

可以同时使用多个修饰符，顺序无关紧要：

1. // 不区分大小写 + 全局匹配 + 多行模式
   
2. const regex = /^hello/gim;
   
3. 
   
4. const text = `Hello world
   
5. hello everyone
   
6. HELLO there`;
   
7. 
   
8. console.log(text.match(regex));
   
9. // ["Hello", "hello", "HELLO"]

复制代码

二、正则表达式语法详解


1. 字符匹配

模式描述

1. .

复制代码

匹配除换行符外的任意字符

1. \d

复制代码

匹配数字，等价于 [0-9]

1. \D

复制代码

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

1. \w

复制代码

匹配字母、数字或下划线

1. \W

复制代码

匹配非字母、数字、下划线

1. \s

复制代码

匹配空白字符（空格、制表符等）

1. \S

复制代码

匹配非空白字符
2. 量词

模式描述

1. *

复制代码

匹配前一个表达式 0 次或多次

1. +

复制代码

匹配前一个表达式 1 次或多次

1. ?

复制代码

匹配前一个表达式 0 次或 1 次

1. {n}

复制代码

匹配前一个表达式恰好 n 次

1. {n,}

复制代码

匹配前一个表达式至少 n 次

1. {n,m}

复制代码

匹配前一个表达式 n 到 m 次
3. 位置匹配

模式描述

1. ^

复制代码

匹配输入的开始。如，

1. ^abc

复制代码

表示字符串必须以

1. abc

复制代码

开头。

1. $

复制代码

匹配输入的结束。如，

1. abc$

复制代码

表示字符串必须以

1. abc

复制代码

结尾。

1. \b

复制代码

匹配单词边界

1. \B

复制代码

匹配非单词边界
4.字符类

模式描述

1. []

复制代码

定义一个字符类，匹配方括号内的任意一个字符。例如，

1. [abc]

复制代码

可以匹配

1. a

复制代码

、

1. b

复制代码

或

1. c

复制代码

。

1. [^]

复制代码

表示取反，匹配不在方括号内的任意一个字符。例如，

1. [^abc]

复制代码

可以匹配除

1. a

复制代码

、

1. b

复制代码

、

1. c

复制代码

之外的任意字符。

1. [a-z]

复制代码

、

1. [A-Z]

复制代码

、

1. [0-9]

复制代码

等表示范围，分别匹配小写字母、大写字母和数字。
三、TypeScript 中的正则方法


1. RegExp 方法

1. const regex = /hello/;
   
2. 
   
3. // test() - 测试是否匹配
   
4. regex.test('hello world'); // true
   
5. 
   
6. // exec() - 执行搜索，返回匹配结果或 null
   
7. const result = regex.exec('hello world');
   
8. console.log(result?.[0]); // "hello"

复制代码

2. String 方法

1. const str = 'Hello world, hello TypeScript';
   
2. 
   
3. // match() - 返回匹配结果
   
4. str.match(/hello/gi); // ["Hello", "hello"]
   
5. 
   
6. // search() - 返回匹配位置的索引
   
7. str.search(/world/); // 6
   
8. 
   
9. // replace() - 替换匹配的子串
   
10. str.replace(/hello/gi, 'Hi'); // "Hi world, Hi TypeScript"
    
11. 
    
12. // split() - 使用正则分割字符串
    
13. 'one,two,three'.split(/,/); // ["one", "two", "three"]

复制代码

四、实际应用示例


1. 验证邮箱格式

1. function isValidEmail(email: string): boolean {
   
2.   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   
3.   return emailRegex.test(email);
   
4. }

复制代码

1.^- 匹配字符串开始

确保匹配从字符串开头开始，防止前面有其他字符

2.[^\s@]+- 本地部分(local-part)

• 1. [^\s@]

  复制代码
  ：字符类，匹配任何不是空白字符(
  1. \s

  复制代码
  )也不是@符号的字符
  
• 1. +

  复制代码
  ：匹配前面的元素一次或多次
  
• 效果：匹配一个或多个非空白、非@的字符
  

3.@- 匹配@符号

邮箱地址必须包含一个@符号

4.[^\s@]+- 域名第一部分

• 同上，匹配@和点号之间的部分
  
• 例如在
  1. user@example.com

  复制代码
  中匹配
  1. example

  复制代码

5.\.- 匹配点号

• 转义的点号，匹配实际的
  1. .

  复制代码
  字符
  
• 域名必须包含一个点号
  

正则表达式中的点号.

• 在正则中，未转义的点号
  1. .

  复制代码
  是一个特殊字符
  
• 它表示匹配除换行符外的任意单个字符
  
• 例如
  1. a.c

  复制代码
  可以匹配 &amp;amp;ldquo;abc&amp;amp;rdquo;、&amp;amp;ldquo;a c&amp;amp;rdquo;、&amp;amp;ldquo;a$c&amp;amp;rdquo; 等
  

转义点号\.

• 当我们需要匹配实际的点号字符时，必须转义它
  
• 使用反斜杠
  1. \

  复制代码
  进行转义：
  1. \.

  复制代码
• 这样
  1. \.

  复制代码
  就表示字面的点号字符 &amp;amp;ldquo;.&amp;amp;rdquo; 而不是通配符
  

6.[^\s@]+- 顶级域名(TLD)

• 匹配点号后的部分
  
• 例如在
  1. example.com

  复制代码
  中匹配
  1. com

  复制代码

7.$- 匹配字符串结束

确保匹配直到字符串结束，防止后面有其他字符

完整匹配流程

以邮箱

1. username@example.com

复制代码

为例：

• 1. ^

  复制代码
  从字符串开始
  
• 1. [^\s@]+

  复制代码
  匹配
  1. username

  复制代码
• 1. @

  复制代码
  匹配
  1. @

  复制代码
• 1. [^\s@]+

  复制代码
  匹配
  1. example

  复制代码
• 1. \.

  复制代码
  匹配
  1. .

  复制代码
• 1. [^\s@]+

  复制代码
  匹配
  1. com

  复制代码
• 1. $

  复制代码
  确保字符串结束
  

2. 提取URL中的参数

1. function getUrlParams(url: string): Record&amp;amp;lt;string, string&amp;amp;gt; {
   
2.   const params: Record&amp;amp;lt;string, string&amp;amp;gt; = {};
   
3.   const paramRegex = /[?&amp;amp;amp;]([^=#]+)=([^&amp;amp;amp;#]*)/g;
   
4.   
   
5.   let match;
   
6.   while ((match = paramRegex.exec(url)) !== null) {
   
7.     params[match[1]] = match[2];
   
8.   }
   
9.   
   
10.   return params;
    
11. }

复制代码

正则表达式解析

核心的正则表达式是

1. /[?&amp;amp;amp;]([^=#]+)=([^&amp;amp;amp;#]*)/g

复制代码

，让我们分解它的每个部分：
1.[?&amp;amp;]

• 匹配
  1. ?

  复制代码
  或
  1. &amp;amp;

  复制代码
  字符
  
• 1. ?

  复制代码
  开始查询参数部分
  
• 1. &amp;amp;

  复制代码
  分隔多个参数
  

2.([^=#]+)

• 第一个捕获组
  1. ()

  复制代码
  ，匹配参数名
  
• 1. [^=#]

  复制代码
  匹配任何不是
  1. =

  复制代码
  或
  1. #

  复制代码
  的字符
  
• 1. +

  复制代码
  表示匹配一个或多个这样的字符
  

3.=

• 匹配字面的等号，分隔参数名和值
  

4.([^&amp;amp;#]*)

• 第二个捕获组
  1. ()

  复制代码
  ，匹配参数值
  
• 1. [^&amp;amp;#]

  复制代码
  匹配任何不是
  1. &amp;amp;

  复制代码
  或
  1. #

  复制代码
  的字符
  
• 1. *

  复制代码
  表示匹配零个或多个这样的字符（允许空值）
  

5./g

• 全局标志，匹配所有符合条件的结果
  

匹配过程示例

对于 URL

1. http://example.com?name=John&amp;amp;age=25#section1

复制代码

：

• 第一次匹配：
  
  
  
  • 匹配
    1. ?name=John

    复制代码
  • 1. match[1]

    复制代码
    = &amp;amp;ldquo;name&amp;amp;rdquo;
    
  • 1. match[2]

    复制代码
    = &amp;amp;ldquo;John&amp;amp;rdquo;
    
  
  
• 第二次匹配：
  
  
  
  • 匹配
    1. &amp;amp;age=25

    复制代码
  • 1. match[1]

    复制代码
    = &amp;amp;ldquo;age&amp;amp;rdquo;
    
  • 1. match[2]

    复制代码
    = &amp;amp;ldquo;25&amp;amp;rdquo;
    
  
  
• 遇到
  1. #

  复制代码
  停止匹配
  

执行流程

• 初始化空对象
  1. params

  复制代码
  存储结果
  
• 使用
  1. while

  复制代码
  循环和
  1. regex.exec()

  复制代码
  遍历所有匹配
  
• 每次匹配：
  
  
  
  • 1. match[1]

    复制代码
    是参数名
    
  • 1. match[2]

    复制代码
    是参数值
    
  • 将键值对存入
    1. params

    复制代码
    对象
    
  
  
• 返回最终的
  1. params

  复制代码
  对象
  

3. 密码强度验证

1. function checkPasswordStrength(password: string): 'weak' | 'medium' | 'strong' {
   
2.   // 至少8个字符
   
3.   if (password.length < 8) return 'weak';
   
4.   
   
5.   // 弱: 只有字母或数字
   
6.   if (/^[a-zA-Z]+$/.test(password) || /^\d+$/.test(password)) {
   
7.     return 'weak';
   
8.   }
   
9.   
   
10.   // 中: 包含字母和数字
    
11.   if (/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(password)) {
    
12.     // 强: 包含字母、数字和特殊字符
    
13.     if (/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).+$/.test(password)) {
    
14.       return 'strong';
    
15.     }
    
16.     return 'medium';
    
17.   }
    
18.   
    
19.   return 'weak';
    
20. }

复制代码

1. 检查纯字母或纯数字

1. /^[a-zA-Z]+$/  // 纯字母
   
2. /^\d+$/        // 纯数字

复制代码

• 1. ^

  复制代码
  和
  1. $

  复制代码
  确保整个字符串匹配
  
• 1. [a-zA-Z]

  复制代码
  匹配任何大小写字母
  
• 1. \d

  复制代码
  匹配数字
  
• 1. +

  复制代码
  表示一个或多个
  

2. 检查同时包含字母和数字

1. /^(?=.*[a-zA-Z])(?=.*\d).+$/

复制代码

• 1. (?=.*[a-zA-Z])

  复制代码
  正向先行断言，确保字符串包含字母
  
• 1. (?=.*\d)

  复制代码
  正向先行断言，确保字符串包含数字
  

正向先行断言(?=.*)
基本语法

1. (?=pattern)

复制代码

是正向先行断言的基本形式，表示：

• 当前位置后面必须能匹配
  1. pattern

  复制代码
• 但匹配后，正则引擎的当前位置不会改变
  

(?=.*[a-zA-Z])(?=.*\d)解析
这个表达式由两个正向先行断言组成，分别检查密码中是否包含字母和数字。
第一个断言 (?=.*[a-zA-Z])

• 1. .*

  复制代码
  ：
  

• 1. .

  复制代码
  匹配任意字符（除换行符）
  
• 1. *

  复制代码
  表示零次或多次
  
• 1. .*

  复制代码
  组合表示&amp;amp;quot;任意数量的任意字符&amp;amp;quot;
  

• 1. [a-zA-Z]

  复制代码
  ：
  

• 匹配任意大小写字母
  

• 整体含义：
  

• 在字符串的任意位置（因为
  1. .*

  复制代码
  ）后面必须有一个字母
  
• 相当于&amp;amp;quot;字符串中必须包含至少一个字母&amp;amp;quot;
  

第二个断言 (?=.*\d)

• 1. \d

  复制代码
  ：
  

• 匹配任意数字（等价于
  1. [0-9]

  复制代码
  ）
  

• 整体含义：
  

• 在字符串的任意位置后面必须有一个数字
  
• 相当于&amp;amp;quot;字符串中必须包含至少一个数字&amp;amp;quot;
  

组合效果

1. /^(?=.*[a-zA-Z])(?=.*\d).+$/

复制代码

表示：

• 1. ^

  复制代码
  从字符串开头开始
  
• 1. (?=.*[a-zA-Z])

  复制代码
  断言：后面某处必须有一个字母
  
• 1. (?=.*\d)

  复制代码
  断言：后面某处必须有一个数字
  
• 1. .+

  复制代码
  实际匹配：一个或多个任意字符
  
• 1. $

  复制代码
  直到字符串结束
  

• 1. .+

  复制代码
  匹配整个字符串（至少一个字符）
  

3. 检查包含特殊字符

1. /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).+$/

复制代码

• 1. (?=.*[^a-zA-Z\d])

  复制代码
  正向先行断言，确保字符串包含非字母非数字的字符（即特殊字符）
  
• 1. [^a-zA-Z\d]

  复制代码
  匹配任何不是字母也不是数字的字符
  

总结

到此这篇关于TypeScript中正则表达式的用法及实际应用的文章就介绍到这了,更多相关TS中正则表达式内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！