本文給大家介紹JavaScript 正則表達式核心用法實踐案例,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,感興趣的朋友跟隨小編一起看看吧
JavaScript 正則表達式核心用法指南
1. 正則表達式創(chuàng)建方式
| 創(chuàng)建方式 | 語法示例 | 適用場景 | 特點 |
|---|
| 字面量 | const re = /pattern/flags; | 模式固定時使用 | 編譯時創(chuàng)建，性能更好，寫法簡潔 |
| 構(gòu)造函數(shù) | const re = new RegExp('pattern', 'flags'); | 模式需動態(tài)生成時使用 | 運行時創(chuàng)建，更靈活，允許拼接字符串 |
// 字面量方式 - 匹配數(shù)字
const numRegex = /\d+/g;
// 構(gòu)造函數(shù)方式（動態(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) | 多行模式，使 ^ 和 $ 匹配每行的開頭和結(jié)尾 | 處理多行文本時有用 |
u(unicode) | 啟用完整的 Unicode 支持 | 處理 Unicode 字符（如中文、表情符號）時必要 |
y(sticky) | 粘滯模式，從 lastIndex處開始精確匹配 | 用于連續(xù)匹配的場景 |
3. 常用元字符與量詞
元字符（特殊字符類）
| 元字符 | 含義 | 等價字符類 | 示例 |
|---|
\d | 匹配數(shù)字（digit） | [0-9] | \d{3} 匹配三位數(shù)字 |
\D | 匹配非數(shù)字 | [^0-9] | \D+ 匹配連續(xù)非數(shù)字 |
\w | 匹配單詞字符（字母、數(shù)字、下劃線） | [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開頭 |
$ | 匹配字符串的結(jié)束位置 | - | end$ 匹配以end結(jié)尾 |
量詞（數(shù)量限定）
| 量詞 | 含義 | 示例 |
|---|
* | 0次或多次匹配 | a* 匹配 “”, “a”, “aa”, … |
+ | 1次或多次匹配 | \d+ 匹配 “1”, “123”, … |
? | 0次或1次匹配 | colou?r 匹配 “color” 或 “colour” |
{n} | 精確匹配 n 次 | \d{3} 匹配三位數(shù)字 |
{n,} | 至少匹配 n 次 | a{2,} 匹配 “aa”, “aaa”, “aaaa” 等 |
{n,m} | 匹配 n 到 m 次 | \d{1,3} 匹配1到3位數(shù)字 |
4. 字符集合與分組
| 語法 | 說明 | JavaScript 示例 |
|---|
[abc] | 匹配方括號內(nèi)的任意一個字符 | [aeiou] 匹配任意元音字母 |
[^abc] | 匹配不在方括號內(nèi)的任意一個字符 | [^0-9] 匹配非數(shù)字字符 |
[a-z] | 匹配指定范圍內(nèi)的任意一個字符 | [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, '*') // 'a*b*' |
split() | 使用正則分割字符串 | Array | 'a,b,c'.split(/,/) // ['a','b','c'] |
6. 實用正則表達式示例
表單驗證常用正則
| 驗證類型 | 正則表達式 | 說明 |
|---|
| 手機號（中國大陸） | /^1[3-9]\d{9}$/ | 以1開頭，第二位3-9，共11位數(shù)字 |
| 郵箱地址 | /^[\w.-]+@[\w.-]+\.\w+$/ | 匹配常見郵箱格式 |
| 身份證號（18位） | /^\d{17}[\dXx]$/ | 身份證格式（不包含校驗位計算） |
| 用戶名 | /^[a-zA-Z0-9_-]{4,16}$/ | 4到16位（字母，數(shù)字，下劃線，減號） |
| 強密碼 | /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/ | 最少6位，包含大小寫字母、數(shù)字和特殊字符 |
| URL網(wǎng)址 | /^https?:\/\/[\w.-]+(\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]*$/ | 匹配HTTP/HTTPS網(wǎng)址 |
數(shù)據(jù)提取與處理
| 場景 | 正則表達式 | 說明 |
|---|
| 提取數(shù)字 | /\d+/g | 提取字符串中所有數(shù)字 |
| 匹配中文 | /^[\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” 的數(shù)字 |
| 負向先行斷言（前瞻否定） | x(?!y) | 匹配后面不是 y 的 x | \d+(?!px) 匹配后面不是 “px” 的數(shù)字 |
| 正向后行斷言（后瞻肯定） | (?<=y)x | 匹配前面是 y 的 x | (?<=\$)\d+ 匹配前面是 “$” 的數(shù)字 |
| 負向后行斷言（后瞻否定） | (?<!y)x | 匹配前面不是 y 的 x | (?<!\$)\d+ 匹配前面不是 “$” 的數(shù)字 |
分組與捕獲
| 分組類型 | 語法 | 說明 | 示例 |
|---|
| 捕獲組 | (pattern) | 捕獲匹配內(nèi)容，可通過 \1、$1引用 | /(\d{2})/(\d{2})/匹配 “12/25” |
| 非捕獲組 | (?:pattern) | | |
| 只分組不捕獲，提高性能 | \d+(?!px) /(?:\d{2})/(\d{2})/只捕獲后兩位 | | |
| 命名組 | ` | | |
| (?pattern)` | | | |
| 為捕獲組命名，通過名稱訪問 | /(?\d{4})/匹配后通過 groups.year訪問 | | |
?? 使用建議
??轉(zhuǎn)義特殊字符??：如要匹配字面意義的 .、*、+等，需使用反斜杠轉(zhuǎn)義：.、*、+
??貪婪與惰性匹配??：
- 貪婪模式（默認）：".+"會匹配最長可能字符串
- 惰性模式（加 ?）：".+?"匹配最短可能字符串
??
性能優(yōu)化建議??： - 性能優(yōu)化：對于頻繁使用的正則表達式，建議預編譯為常量
- 可讀性：復雜的正則表達式添加詳細注釋說明
- 錯誤處理：始終對正則匹配結(jié)果進行空值檢查
- 測試驗證：使用在線正則測試工具驗證表達式正確性
正則表達式通過其強大的模式匹配能力，能顯著提升文本處理效率。建議結(jié)合在線正則測試工具（如 RegExr）進行練習，并在實際項目中逐步掌握其高級用法。
8. 實際應用示例
// 表單驗證實用函數(shù)
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// 數(shù)據(jù)提取示例
const DataExtractor = {
// 提取字符串中的所有數(shù)字
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'數(shù)據(jù)提取與清洗
// 提取日志中的時間戳
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正則表達式用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)答題倒計時，自定義計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
下面小編就為大家分享一篇利用js實現(xiàn)前后臺傳送Json的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
禁止頁面復制功能、禁用頁面右鍵菜單等等在瀏覽網(wǎng)頁時想必大家都有遇到過吧，下面為大家詳細介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了JS實現(xiàn)響應鼠標點擊動畫漸變彈出層效果代碼,具有非常自然流暢的動畫過度效果,涉及JavaScript針對鼠標事件的響應及頁面元素樣式的動態(tài)操作相關技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了基于正則表達式的輕量提示插件，兼容性強卻文件輕巧的文本框檢測插件,推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了微信小程序文章詳情頁跳轉(zhuǎn)案例詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript this綁定過程,結(jié)合實例形式深入分析了JavaScript中this關鍵字的功能、原理、綁定方式及相關操作注意事項,需要的朋友可以參考下2018-12-12
DIV可以拖動的效果，想必大家都有見到過吧,在本文也為大家實現(xiàn)一個不錯的可以用鼠標拖動的div,感興趣的各位不要錯過2013-10-10
這篇文章主要介紹了淺析javascript中的事件代理，由一道面試題講起，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05