前言

正則表達(dá)式是處理字符串的強(qiáng)大工具，在 TypeScript/JavaScript 中同樣適用。本文將帶你全面了解正則表達(dá)式在 TS 中的用法，包括基礎(chǔ)語(yǔ)法、高級(jí)技巧和實(shí)際應(yīng)用場(chǎng)景。

一、正則表達(dá)式基礎(chǔ)

1. 創(chuàng)建正則表達(dá)式

1. 字面量語(yǔ)法

基本語(yǔ)法

const regex = /pattern/flags;

• pattern: 正則表達(dá)式的主體模式
• flags: 可選的修飾符（如 i, g, m 等）

特點(diǎn)

1. 在腳本加載時(shí)編譯（當(dāng)正則表達(dá)式是常量時(shí)性能更好）
2. 更簡(jiǎn)潔直觀的語(yǔ)法
3. 不需要轉(zhuǎn)義反斜杠（\）

2. 構(gòu)造函數(shù)語(yǔ)法

基本語(yǔ)法

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

或

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

特點(diǎn)

1. 在運(yùn)行時(shí)編譯正則表達(dá)式
2. 可以使用變量動(dòng)態(tài)構(gòu)建正則表達(dá)式
3. 字符串中的反斜杠需要轉(zhuǎn)義（\\）
4. 可以基于已有的正則對(duì)象創(chuàng)建新的正則

何時(shí)使用哪種方式

1. 使用字面量語(yǔ)法：

   • 正則模式是固定的、已知的

   • 不需要?jiǎng)討B(tài)構(gòu)建正則

   • 需要更好的可讀性

2. 使用構(gòu)造函數(shù)語(yǔ)法：

   • 需要動(dòng)態(tài)構(gòu)建正則表達(dá)式（如基于用戶(hù)輸入）

   動(dòng)態(tài)構(gòu)建

   在程序運(yùn)行時(shí)（而非編寫(xiě)代碼時(shí)）根據(jù)需要?jiǎng)?chuàng)建或修改正則表達(dá)式模式。

   • 正則模式需要從變量或配置中獲取
   • 需要在運(yùn)行時(shí)組合多個(gè)正則片段

2. 常用修飾符（flags）

1.i(ignoreCase) - 不區(qū)分大小寫(xiě)

作用：使匹配不區(qū)分大小寫(xiě)

const regex = /hello/i;

console.log(regex.test('Hello')); // true
console.log(regex.test('HELLO')); // true
console.log(regex.test('hello')); // true
console.log(regex.test('hElLo')); // true

2.g(global) - 全局匹配

作用：查找所有匹配項(xiàng)，而不是在第一個(gè)匹配后停止

const str = 'apple, orange, apple, banana';
const regex = /apple/g;

let match;
while ((match = regex.exec(str)) !== null) {
  console.log(`Found '${match[0]}' at index ${match.index}`);
}
// 輸出:
// Found 'apple' at index 0
// Found 'apple' at index 15

3.m(multiline) - 多行模式

作用：使 ^ 和 $ 匹配每行的開(kāi)頭和結(jié)尾，而不是整個(gè)字符串的開(kāi)頭和結(jié)尾

const multiLineText = `First line
Second line
Third line`;

// 不使用 m 修飾符
console.log(/^Second/.test(multiLineText)); // false
//在整個(gè)字符串的開(kāi)頭位置嘗試匹配 "Second"

// 使用 m 修飾符
console.log(/^Second/m.test(multiLineText)); // true

4.u(unicode) - Unicode 模式

作用：正確處理大于 \uFFFF 的 Unicode 字符

const emojiText = '?? 笑臉';

// 不使用 u 修飾符
console.log(/^.$/.test(emojiText)); // false (無(wú)法正確匹配emoji)

// 使用 u 修飾符
console.log(/^.$/u.test(emojiText)); // true (正確匹配單個(gè)emoji字符)

// 匹配特定Unicode字符
console.log(/\p{Emoji}/u.test('??')); // true
console.log(/\p{Script=Han}/u.test('漢')); // true (匹配漢字)

5.s(dotAll) - dotAll 模式

作用：使 . 匹配包括換行符在內(nèi)的任意字符

const textWithNewline = 'Hello\nWorld';

// 不使用 s 修飾符
console.log(/Hello.World/.test(textWithNewline)); // false (.不匹配換行符)

// 使用 s 修飾符
console.log(/Hello.World/s.test(textWithNewline)); // true

// 替代方案（不使用s修飾符）
console.log(/Hello[\s\S]World/.test(textWithNewline)); // true

組合使用多個(gè)修飾符

可以同時(shí)使用多個(gè)修飾符，順序無(wú)關(guān)緊要：

// 不區(qū)分大小寫(xiě) + 全局匹配 + 多行模式
const regex = /^hello/gim;

const text = `Hello world
hello everyone
HELLO there`;

console.log(text.match(regex)); 
// ["Hello", "hello", "HELLO"]

二、正則表達(dá)式語(yǔ)法詳解

1. 字符匹配

2. 量詞

3. 位置匹配

4.字符類(lèi)

三、TypeScript 中的正則方法

1. RegExp 方法

const regex = /hello/;

// test() - 測(cè)試是否匹配
regex.test('hello world'); // true

// exec() - 執(zhí)行搜索，返回匹配結(jié)果或 null
const result = regex.exec('hello world');
console.log(result?.[0]); // "hello"

2. String 方法

const str = 'Hello world, hello TypeScript';

// match() - 返回匹配結(jié)果
str.match(/hello/gi); // ["Hello", "hello"]

// search() - 返回匹配位置的索引
str.search(/world/); // 6

// replace() - 替換匹配的子串
str.replace(/hello/gi, 'Hi'); // "Hi world, Hi TypeScript"

// split() - 使用正則分割字符串
'one,two,three'.split(/,/); // ["one", "two", "three"]

四、實(shí)際應(yīng)用示例

1. 驗(yàn)證郵箱格式

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

1.^- 匹配字符串開(kāi)始

確保匹配從字符串開(kāi)頭開(kāi)始，防止前面有其他字符

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

• [^\s@]：字符類(lèi)，匹配任何不是空白字符(\s)也不是@符號(hào)的字符
• +：匹配前面的元素一次或多次
• 效果：匹配一個(gè)或多個(gè)非空白、非@的字符

3.@- 匹配@符號(hào)

郵箱地址必須包含一個(gè)@符號(hào)

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

• 同上，匹配@和點(diǎn)號(hào)之間的部分
• 例如在user@example.com中匹配example

5.\.- 匹配點(diǎn)號(hào)

• 轉(zhuǎn)義的點(diǎn)號(hào)，匹配實(shí)際的.字符
• 域名必須包含一個(gè)點(diǎn)號(hào)

正則表達(dá)式中的點(diǎn)號(hào).

• 在正則中，未轉(zhuǎn)義的點(diǎn)號(hào) . 是一個(gè)特殊字符
• 它表示匹配除換行符外的任意單個(gè)字符
• 例如 a.c 可以匹配 “abc”、“a c”、“a$c” 等

轉(zhuǎn)義點(diǎn)號(hào)\.

• 當(dāng)我們需要匹配實(shí)際的點(diǎn)號(hào)字符時(shí)，必須轉(zhuǎn)義它
• 使用反斜杠 \ 進(jìn)行轉(zhuǎn)義：\.
• 這樣 \. 就表示字面的點(diǎn)號(hào)字符 “.” 而不是通配符

6.[^\s@]+- 頂級(jí)域名(TLD)

• 匹配點(diǎn)號(hào)后的部分
• 例如在example.com中匹配com

7.$- 匹配字符串結(jié)束

確保匹配直到字符串結(jié)束，防止后面有其他字符

完整匹配流程

以郵箱 username@example.com 為例：

1. ^ 從字符串開(kāi)始
2. [^\s@]+ 匹配 username
3. @ 匹配 @
4. [^\s@]+ 匹配 example
5. \. 匹配 .
6. [^\s@]+ 匹配 com
7. $ 確保字符串結(jié)束

2. 提取URL中的參數(shù)

function getUrlParams(url: string): Record<string, string> {
  const params: Record<string, string> = {};
  const paramRegex = /[?&]([^=#]+)=([^&#]*)/g;
  
  let match;
  while ((match = paramRegex.exec(url)) !== null) {
    params[match[1]] = match[2];
  }
  
  return params;
}

正則表達(dá)式解析

核心的正則表達(dá)式是 /[?&]([^=#]+)=([^&#]*)/g，讓我們分解它的每個(gè)部分：

1.[?&]

• 匹配 ? 或 & 字符
• ? 開(kāi)始查詢(xún)參數(shù)部分
• & 分隔多個(gè)參數(shù)

2.([^=#]+)

• 第一個(gè)捕獲組 ()，匹配參數(shù)名
• [^=#] 匹配任何不是 = 或 # 的字符
• + 表示匹配一個(gè)或多個(gè)這樣的字符

3.=

• 匹配字面的等號(hào)，分隔參數(shù)名和值

4.([^&#]*)

• 第二個(gè)捕獲組 ()，匹配參數(shù)值
• [^&#] 匹配任何不是 & 或 # 的字符
• * 表示匹配零個(gè)或多個(gè)這樣的字符（允許空值）

5./g

• 全局標(biāo)志，匹配所有符合條件的結(jié)果

匹配過(guò)程示例

對(duì)于 URL http://example.com?name=John&age=25#section1：

1. 第一次匹配：
   • 匹配 ?name=John
   • match[1] = “name”
   • match[2] = “John”
2. 第二次匹配：
   • 匹配 &age=25
   • match[1] = “age”
   • match[2] = “25”
3. 遇到 # 停止匹配

執(zhí)行流程

1. 初始化空對(duì)象 params 存儲(chǔ)結(jié)果
2. 使用 while 循環(huán)和 regex.exec() 遍歷所有匹配
3. 每次匹配：
   • match[1] 是參數(shù)名
   • match[2] 是參數(shù)值
   • 將鍵值對(duì)存入 params 對(duì)象
4. 返回最終的 params 對(duì)象

3. 密碼強(qiáng)度驗(yàn)證

function checkPasswordStrength(password: string): 'weak' | 'medium' | 'strong' {
  // 至少8個(gè)字符
  if (password.length < 8) return 'weak';
  
  // 弱: 只有字母或數(shù)字
  if (/^[a-zA-Z]+$/.test(password) || /^\d+$/.test(password)) {
    return 'weak';
  }
  
  // 中: 包含字母和數(shù)字
  if (/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(password)) {
    // 強(qiáng): 包含字母、數(shù)字和特殊字符
    if (/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).+$/.test(password)) {
      return 'strong';
    }
    return 'medium';
  }
  
  return 'weak';
}

1. 檢查純字母或純數(shù)字

/^[a-zA-Z]+$/  // 純字母
/^\d+$/        // 純數(shù)字

• ^ 和 $ 確保整個(gè)字符串匹配
• [a-zA-Z] 匹配任何大小寫(xiě)字母
• \d 匹配數(shù)字
• + 表示一個(gè)或多個(gè)

2. 檢查同時(shí)包含字母和數(shù)字

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

• (?=.*[a-zA-Z]) 正向先行斷言，確保字符串包含字母
• (?=.*\d) 正向先行斷言，確保字符串包含數(shù)字

正向先行斷言(?=.*)

基本語(yǔ)法

(?=pattern) 是正向先行斷言的基本形式，表示：

• 當(dāng)前位置后面必須能匹配 pattern
• 但匹配后，正則引擎的當(dāng)前位置不會(huì)改變

(?=.*[a-zA-Z])(?=.*\d)解析

這個(gè)表達(dá)式由兩個(gè)正向先行斷言組成，分別檢查密碼中是否包含字母和數(shù)字。

第一個(gè)斷言 (?=.*[a-zA-Z])

1. .*：

• . 匹配任意字符（除換行符）
• * 表示零次或多次
• .* 組合表示"任意數(shù)量的任意字符"

2. [a-zA-Z]：

• 匹配任意大小寫(xiě)字母

3. 整體含義：

• 在字符串的任意位置（因?yàn)?.*）后面必須有一個(gè)字母
• 相當(dāng)于"字符串中必須包含至少一個(gè)字母"

第二個(gè)斷言 (?=.*\d)

1. \d：

• 匹配任意數(shù)字（等價(jià)于 [0-9]）

2. 整體含義：

• 在字符串的任意位置后面必須有一個(gè)數(shù)字
• 相當(dāng)于"字符串中必須包含至少一個(gè)數(shù)字"

組合效果

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

1. ^ 從字符串開(kāi)頭開(kāi)始
2. (?=.*[a-zA-Z]) 斷言：后面某處必須有一個(gè)字母
3. (?=.*\d) 斷言：后面某處必須有一個(gè)數(shù)字
4. .+ 實(shí)際匹配：一個(gè)或多個(gè)任意字符
5. $ 直到字符串結(jié)束

• .+ 匹配整個(gè)字符串（至少一個(gè)字符）

3. 檢查包含特殊字符

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

• (?=.*[^a-zA-Z\d]) 正向先行斷言，確保字符串包含非字母非數(shù)字的字符（即特殊字符）
• [^a-zA-Z\d] 匹配任何不是字母也不是數(shù)字的字符

總結(jié) 

到此這篇關(guān)于TypeScript中正則表達(dá)式的用法及實(shí)際應(yīng)用的文章就介紹到這了,更多相關(guān)TS中正則表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論