JavaScript 正則表達式核心用法實踐案例

更新時間：2025年10月27日 10:25:48 作者：倚肆

本文給大家介紹JavaScript 正則表達式核心用法實踐案例,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,感興趣的朋友跟隨小編一起看看吧

JavaScript 正則表達式核心用法指南

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

創(chuàng)建方式	語法示例	適用場景	特點
字面量	`const re = /pattern/flags;`	模式固定時使用	編譯時創(chuàng)建，性能更好，寫法簡潔
構造函數	`const re = new RegExp('pattern', 'flags');`	模式需動態(tài)生成時使用	運行時創(chuàng)建，更靈活，允許拼接字符串

// 字面量方式 - 匹配數字
const numRegex = /\d+/g;
// 構造函數方式（動態(tài)創(chuàng)建）
const dynamicPattern = 'hello';
const dynamicRegex = new RegExp(dynamicPattern, 'i');

2. 正則表達式修飾符

修飾符	作用	示例說明
`i(ignoreCase)`	不區(qū)分大小寫匹配	`/abc/i` 可匹配 “abc”, “ABC”, “AbC”
`g(global)`	全局匹配（查找所有匹配項）	不加 `g` 只匹配第一個，加 `g` 匹配所有
`m(multiline)`	多行模式，使 `^` 和 `$` 匹配每行的開頭和結尾	處理多行文本時有用
`u(unicode)`	啟用完整的 Unicode 支持	處理 Unicode 字符（如中文、表情符號）時必要
`y(sticky)`	粘滯模式，從 lastIndex處開始精確匹配	用于連續(xù)匹配的場景

3. 常用元字符與量詞

元字符（特殊字符類）

元字符	含義	等價字符類	示例
`\d`	匹配數字（digit）	`[0-9]`	`\d{3}` 匹配三位數字
`\D`	匹配非數字	`[^0-9]`	`\D+` 匹配連續(xù)非數字
`\w`	匹配單詞字符（字母、數字、下劃線）	`[a-zA-Z0-9_]`	`\w+` 匹配單詞
`\W`	匹配非單詞字符	`[^a-zA-Z0-9_]`	`\W` 匹配特殊字符
`\s`	匹配空白字符（空格、制表符、換行符等）	`[ \t\n\r\f]`	`\s+` 匹配空白
`\S`	匹配非空白字符	`[^ \t\n\r\f]`	`\S` 匹配非空白
`.`	匹配除換行符外的任意單個字符	-	`a.c` 匹配 “abc”, “a1c”
`\b`	匹配單詞邊界	-	-
`\B`	匹配非單詞邊界	-	-
`^`	匹配字符串的開始位置	-	`^Hello` 匹配以Hello開頭
`$`	匹配字符串的結束位置	-	`end$` 匹配以end結尾

量詞（數量限定）

量詞	含義	示例
`*`	0次或多次匹配	`a*` 匹配 “”, “a”, “aa”, …
`+`	1次或多次匹配	`\d+` 匹配 “1”, “123”, …
`?`	0次或1次匹配	`colou?r` 匹配 “color” 或 “colour”
`{n}`	精確匹配 n 次	`\d{3}` 匹配三位數字
`{n,}`	至少匹配 n 次	`a{2,}` 匹配 “aa”, “aaa”, “aaaa” 等
`{n,m}`	匹配 n 到 m 次	`\d{1,3}` 匹配1到3位數字

4. 字符集合與分組

語法	說明	JavaScript 示例
`[abc]`	匹配方括號內的任意一個字符	`[aeiou]` 匹配任意元音字母
`[^abc]`	匹配不在方括號內的任意一個字符	`[^0-9]` 匹配非數字字符
`[a-z]`	匹配指定范圍內的任意一個字符	`[A-Za-z]` 匹配英文字母
`(pattern)`	捕獲組：將模式分組并記住匹配的文本	`(\d{3})-(\d{4})` 分別捕獲
`(?:pattern)`	非捕獲組：只分組，不捕獲匹配文本	`(?:\d{3})-(\d{4})`
`(?<name>pattern)`	命名捕獲組：為捕獲組命名	`(?<year>\d{4})`

5. JavaScript 正則表達式方法

正則表達式對象方法

方法	功能描述	返回值	示例
`test()`	測試字符串是否包含匹配模式	Boolean	`/\d/.test('abc123') // true`
`exec()`	執(zhí)行搜索匹配，獲取詳細信息	Array 或 null	`/\d+/.exec('abc123') // ['123']`

字符串對象方法

方法	功能描述	返回值	示例
`match()`	查找字符串中的匹配項	Array 或 null	`'abc123'.match(/\d+/) // ['123']`
`matchAll()`	查找所有匹配項（需 `g` 標志）	迭代器對象	用于遍歷所有匹配
`search()`	查找匹配項的索引位置	Number（索引）或 -1	`'abc'.search(/c/) // 2`
`replace()`	替換匹配的子串	String（新字符串）	`'a1b2'.replace(/\d/g, '') // 'ab*'`
`split()`	使用正則分割字符串	Array	`'a,b,c'.split(/,/) // ['a','b','c']`

6. 實用正則表達式示例

表單驗證常用正則

驗證類型	正則表達式	說明
手機號（中國大陸）	`/^1[3-9]\d{9}$/`	以1開頭，第二位3-9，共11位數字
郵箱地址	`/^[\w.-]+@[\w.-]+\.\w+$/`	匹配常見郵箱格式
身份證號（18位）	`/^\d{17}[\dXx]$/`	身份證格式（不包含校驗位計算）
用戶名	`/^[a-zA-Z0-9_-]{4,16}$/`	4到16位（字母，數字，下劃線，減號）
強密碼	`/^.(?=.{6,})(?=.\d)(?=.[A-Z])(?=.[a-z])(?=.[!@#$%^&? ]).*$/`	最少6位，包含大小寫字母、數字和特殊字符
URL網址	`/^https?:\/\/[\w.-]+(\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()+,;=.]$/`	匹配HTTP/HTTPS網址

數據提取與處理

場景	正則表達式	說明
提取數字	`/\d+/g`	提取字符串中所有數字
匹配中文	`/^[\u4e00-\u9fa5]+$/`	匹配中文字符
匹配日期（YYYY-MM-DD）	`/^\d{4}-\d{2}-\d{2}$/`	匹配簡單日期格式
匹配IP地址	`/^(?:(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)$/`	匹配IPv4地址

7. 高級技巧與性能優(yōu)化

貪婪模式與惰性模式

// 貪婪模式（默認）：盡可能匹配更長的字符串
const greedyMatch = '12345678'.match(/\d{3,6}/); // ['123456']
// 惰性模式（加?）：盡可能匹配更短的字符串
const lazyMatch = '12345678'.match(/\d{3,6}?/); // ['123']

前瞻斷言與后瞻斷言

斷言類型	語法	說明	示例
正向先行斷言（前瞻肯定）	`x(?=y)`	匹配后面是 y 的 x	`\d+(?=px)` 匹配后面是 “px” 的數字
負向先行斷言（前瞻否定）	`x(?!y)`	匹配后面不是 y 的 x	`\d+(?!px)` 匹配后面不是 “px” 的數字
正向后行斷言（后瞻肯定）	`(?<=y)x`	匹配前面是 y 的 x	`(?<=\$)\d+` 匹配前面是 “$” 的數字
負向后行斷言（后瞻否定）	`(?<!y)x`	匹配前面不是 y 的 x	`(?<!\$)\d+` 匹配前面不是 “$” 的數字

分組與捕獲

分組類型	語法	說明	示例
捕獲組	`(pattern)`	捕獲匹配內容，可通過 \1、$1引用	/(\d{2})/(\d{2})/匹配 “12/25”
非捕獲組	`(?:pattern)`
只分組不捕獲，提高性能	`\d+(?!px)` /(?:\d{2})/(\d{2})/只捕獲后兩位
命名組	`
(?pattern)`
為捕獲組命名，通過名稱訪問	/(?\d{4})/匹配后通過 groups.year訪問

?? 使用建議

??轉義特殊字符??：如要匹配字面意義的 .、*、+等，需使用反斜杠轉義：.、*、+

??貪婪與惰性匹配??：

貪婪模式（默認）：".+"會匹配最長可能字符串
惰性模式（加 ?）：".+?"匹配最短可能字符串
??
性能優(yōu)化建議??：
性能優(yōu)化：對于頻繁使用的正則表達式，建議預編譯為常量
可讀性：復雜的正則表達式添加詳細注釋說明
錯誤處理：始終對正則匹配結果進行空值檢查
測試驗證：使用在線正則測試工具驗證表達式正確性

正則表達式通過其強大的模式匹配能力，能顯著提升文本處理效率。建議結合在線正則測試工具（如 RegExr）進行練習，并在實際項目中逐步掌握其高級用法。

8. 實際應用示例

// 表單驗證實用函數
const Validator = {
// 手機號驗證
isPhone(phone) {
return /^1[3-9]\d{9}$/.test(phone);
},
// 郵箱驗證
isEmail(email) {
    return /^[\w.-]+@[\w.-]+\.\w+$/.test(email);
},
// 身份證驗證（簡單版）
isIDCard(idCard) {
    return /^\d{17}[\dXx]$/.test(idCard);
},
// 密碼強度驗證
isStrongPassword(password) {
    return /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*? ]).{8,}$/.test(password);
}
};
// 使用示例
console.log(Validator.isPhone('13812345678')); // true
console.log(Validator.isEmail('test@example.com')); // true

// 數據提取示例
const DataExtractor = {
// 提取字符串中的所有數字
extractNumbers(str) {
return str.match(/\d+/g) || [];
},
// 提取郵箱地址
extractEmails(str) {
    return str.match(/[\w.-]+@[\w.-]+\.\w+/g) || [];
},
// 隱藏敏感信息（如手機號）
hideSensitiveInfo(phone) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
},
// 格式化日期
formatDate(dateStr) {
    return dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1');
}
};
// 使用示例
console.log(DataExtractor.extractNumbers('abc123def456')); // ['123', '456']
console.log(DataExtractor.hideSensitiveInfo('13812345678')); // '138????5678'

數據提取與清洗
// 提取日志中的時間戳
const log = '2023-10-26 14:30:25 [INFO] User logged in';
const timeMatch = log.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/);
// ['2023-10-26 14:30:25'] [1](@ref)
// 隱藏敏感信息（如銀行卡號）
const cardNumber = '1234-5678-9012-3456';
const masked = cardNumber.replace(/\d{4}(?=-)/g, '****');
// '****-****-****-3456' [1](@ref)

到此這篇關于JavaScript 正則表達式核心用法指南的文章就介紹到這了,更多相關js正則表達式用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: