JavaScript正则表达式：从基础到高级应用

1. JavaScript正则表达式基础概念正则表达式Regular Expression是用于匹配字符串中字符组合的模式。在JavaScript中正则表达式也是对象这些模式被用于RegExp的exec和test方法以及String的match、replace、search和split方法。1.1 创建正则表达式的两种方式在JavaScript中你可以通过两种方式创建正则表达式使用字面量语法推荐在模式不变时使用var re /abc/;调用RegExp对象的构造函数适合动态生成正则表达式var re new RegExp(abc);提示使用字面量语法时正则表达式在脚本加载后就会被编译能获得更好的性能。而当正则表达式会改变或需要从用户输入等来源动态生成时则需要使用构造函数。1.2 正则表达式的组成一个正则表达式模式由以下部分组成简单字符如/abc/中的a、b、c特殊字符元字符如*、、?、^等具有特殊含义的字符字符类如\d匹配数字\w匹配字母数字下划线分组和范围用()表示分组[]表示字符范围量词如{3}表示匹配3次表示1次或多次2. 正则表达式模式详解2.1 特殊字符与转义正则表达式中有许多特殊字符如果需要匹配这些字符本身需要使用反斜杠\进行转义// 匹配字符串中的点号 var re /\./; console.log(re.test(a.b)); // true // 匹配字符串中的星号 var re /\*/; console.log(re.test(a*b)); // true常见需要转义的特殊字符包括^ $ . * ? ( ) [ ] { } | \ /2.2 字符类与范围字符类允许你匹配一组字符中的任意一个// 匹配元音字母 var re /[aeiou]/; console.log(re.test(hello)); // true // 匹配数字 var re /[0-9]/; console.log(re.test(abc123)); // true // 匹配非数字 var re /[^0-9]/; // 注意^在[]内表示否定 console.log(re.test(123)); // false2.3 预定义字符类JavaScript提供了一些预定义的字符类\d匹配数字等价于[0-9]\D匹配非数字等价于[^0-9]\w匹配单词字符字母、数字、下划线等价于[A-Za-z0-9_]\W匹配非单词字符\s匹配空白字符空格、制表符、换行等\S匹配非空白字符// 匹配日期格式YYYY-MM-DD var dateRe /\d{4}-\d{2}-\d{2}/; console.log(dateRe.test(2023-05-15)); // true3. 量词与分组3.1 常用量词量词用于指定匹配字符的数量*匹配前一项0次或多次匹配前一项1次或多次?匹配前一项0次或1次{n}匹配前一项恰好n次{n,}匹配前项至少n次{n,m}匹配前项至少n次最多m次// 匹配连续的数字 var numRe /\d/; console.log(numRe.test(abc123def)); // true // 匹配精确3位数字 var exactNumRe /\d{3}/; console.log(exactNumRe.test(12)); // false console.log(exactNumRe.test(123)); // true3.2 贪婪与非贪婪匹配默认情况下量词是贪婪的会尽可能多地匹配字符。在量词后加?可使其变为非贪婪var str abc123def456; // 贪婪匹配 var greedyRe /.*\d/; console.log(str.match(greedyRe)[0]); // abc123def456 // 非贪婪匹配 var lazyRe /.*?\d/; console.log(str.match(lazyRe)[0]); // abc13.3 分组与捕获使用圆括号()可以创建捕获组匹配的内容会被记住后续可以引用// 匹配日期并捕获各部分 var dateRe /(\d{4})-(\d{2})-(\d{2})/; var match dateRe.exec(2023-05-15); console.log(match[1]); // 2023 (年) console.log(match[2]); // 05 (月) console.log(match[3]); // 15 (日)非捕获组(?:...)可以分组但不捕获var re /(?:abc){2}/; // 匹配abcabc但不捕获4. 边界与断言4.1 边界匹配^匹配输入的开始多行模式下匹配行首$匹配输入的结束多行模式下匹配行尾\b匹配单词边界\B匹配非单词边界// 匹配以数字开头的字符串 var startRe /^\d/; console.log(startRe.test(1abc)); // true console.log(startRe.test(a1bc)); // false // 匹配独立的单词cat var wordRe /\bcat\b/; console.log(wordRe.test(cat)); // true console.log(wordRe.test(category)); // false4.2 前瞻与后顾断言(?...)正向肯定断言后面必须跟着...(?!...)正向否定断言后面不能跟着...(?...)反向肯定断言前面必须是...(?!...)反向否定断言前面不能是...// 匹配后面跟着美元的金额数字 var priceRe /\d(?\$)/; console.log(priceRe.exec(100$)[0]); // 100 // 匹配前面不是$的数字 var notPriceRe /(?!\$)\d/; console.log(notPriceRe.exec(100$)[0]); // 00 console.log(notPriceRe.exec(abc100)[0]); // 1005. 标志与高级用法5.1 正则表达式标志正则表达式可以附加标志来改变匹配行为g全局匹配查找所有匹配而非在第一个匹配后停止i不区分大小写m多行模式^和$匹配行首行尾sdotAll模式.匹配包括换行符在内的所有字符uUnicode模式正确处理大于\uFFFF的Unicode字符y粘性匹配从lastIndex位置开始匹配// 全局匹配所有数字 var globalRe /\d/g; var str a1b2c3; var match; while ((match globalRe.exec(str)) ! null) { console.log(Found, match[0], at, match.index); } // 输出: // Found 1 at 1 // Found 2 at 3 // Found 3 at 55.2 命名捕获组ES2018引入了命名捕获组可以通过名称而非索引引用捕获组var re /(?year\d{4})-(?month\d{2})-(?day\d{2})/; var match re.exec(2023-05-15); console.log(match.groups.year); // 2023 console.log(match.groups.month); // 05 console.log(match.groups.day); // 155.3 正则表达式与字符串方法JavaScript中常用的正则表达式相关方法RegExp方法test()测试是否匹配返回布尔值exec()执行匹配返回匹配结果数组或nullString方法match()检索匹配返回数组或nullmatchAll()返回所有匹配的迭代器ES2020search()测试匹配返回匹配位置索引或-1replace()替换匹配的子串split()使用正则表达式分割字符串// 使用replace进行复杂替换 var str Hello world; var newStr str.replace(/(\w)\s(\w)/, $2, $1); console.log(newStr); // world, Hello // 使用split按多种分隔符分割 var csv a,b;c d; var arr csv.split(/[,;\s]/); console.log(arr); // [a, b, c, d]6. 实际应用与性能优化6.1 常见正则表达式模式验证电子邮件var emailRe /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/;验证URLvar urlRe /^(https?:\/\/)?([\da-z.-])\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;提取HTML标签内容var htmlRe /([a-z])([^])*(?:(.*)\/\1|\s\/)/;6.2 性能优化建议避免回溯灾难谨慎使用嵌套量词如/(a)b/尽可能具体化匹配模式预编译正则表达式对于重复使用的正则表达式预先编译并存储使用非捕获组当不需要捕获组内容时使用(?:...)提高性能避免过度使用.*尽可能使用更具体的字符类// 性能较差的写法 var slowRe /.*foo.*bar.*/; // 优化后的写法 var fastRe /[^\n]*foo[^\n]*bar[^\n]*/;6.3 调试技巧使用在线正则表达式测试工具验证模式分解复杂正则表达式为多个简单部分使用console.log输出匹配结果进行调试利用正则表达式的可视化工具理解模式注意事项在编写复杂正则表达式时添加注释说明每个部分的用途便于后期维护。可以使用(?#comment)语法或在代码中添加注释。7. 常见问题与解决方案7.1 正则表达式不匹配的可能原因未考虑多行输入添加m标志大小写敏感添加i标志或使用[a-zA-Z]特殊字符未转义确保. * ?等特殊字符正确转义Unicode字符问题使用u标志处理Unicode字符7.2 常见错误处理无效的正则表达式try { var re new RegExp((unbalanced); } catch (e) { console.error(Invalid regex:, e.message); }处理用户输入的正则表达式function escapeRegExp(string) { return string.replace(/[.*?^${}()|[\]\\]/g, \\$); } var userInput a*b; var safeRe new RegExp(escapeRegExp(userInput));7.3 正则表达式与Unicode处理Unicode字符时需要特别注意// 匹配Unicode字符 var unicodeRe /\p{ScriptGreek}/u; console.log(unicodeRe.test(π)); // true // 匹配emoji var emojiRe /\p{Emoji}/u; console.log(emojiRe.test()); // true8. 实际案例解析8.1 表单验证验证用户输入的电话号码格式function validatePhone(phone) { // 支持多种格式(123)456-7890, 123-456-7890, 123.456.7890, 1234567890 var phoneRe /^(\\d{1,2}\s?)?(\(\d{3}\)|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$/; return phoneRe.test(phone); } console.log(validatePhone((123)456-7890)); // true console.log(validatePhone(123-456-7890)); // true console.log(validatePhone(123.456.7890)); // true console.log(validatePhone(1234567890)); // true console.log(validatePhone(123-45-6789)); // false8.2 数据提取从文本中提取所有URLfunction extractURLs(text) { var urlRe /https?:\/\/[^\s/$.?#].[^\s]*/gi; return text.match(urlRe) || []; } var text Visit https://example.com and http://test.org for more info.; console.log(extractURLs(text)); // [https://example.com, http://test.org]8.3 模板替换使用正则表达式实现简单的模板引擎function renderTemplate(template, data) { return template.replace(/\{\{(\w)\}\}/g, function(match, key) { return data[key] || ; }); } var template Hello, {{name}}! Your order {{orderId}} is ready.; var data {name: John, orderId: 12345}; console.log(renderTemplate(template, data)); // Hello, John! Your order 12345 is ready.9. 高级技巧与最佳实践9.1 动态构建正则表达式当需要根据变量构建正则表达式时function buildRegEx(pattern, flags) { try { return new RegExp(pattern, flags); } catch (e) { console.error(Invalid regex pattern:, pattern); return null; } } var userPattern \\d{3}-\\d{2}; var re buildRegEx(userPattern, g); console.log(re.test(123-45)); // true9.2 正则表达式与递归使用正则表达式处理嵌套结构如括号匹配function matchBalanced(input, open, close) { var re new RegExp( (\\${open}(?:[^\\${open}\\${close}]|\\${open}(?1)\\${close})*\\${close}), g ); return input.match(re) || []; } console.log(matchBalanced((a(b)c) (d(e(f)g)h), (, ))); // [(a(b)c), (d(e(f)g)h)]9.3 性能测试与比较比较不同正则表达式实现的性能function testPerformance() { var str a.repeat(100) b; // 低效的正则表达式 console.time(Greedy); /^(a)$/.test(str); console.timeEnd(Greedy); // 高效的正则表达式 console.time(Efficient); /^a$/.test(str); console.timeEnd(Efficient); } testPerformance(); // Greedy: 0.123ms // Efficient: 0.045ms10. 总结与资源推荐10.1 正则表达式学习要点掌握基础语法字符类、量词、分组等理解贪婪与非贪婪匹配的区别熟悉边界匹配和断言的使用场景了解不同标志对匹配行为的影响掌握正则表达式在JavaScript中的实际应用方法10.2 推荐工具与资源在线测试工具RegExr (https://regexr.com/)Regex101 (https://regex101.com/)可视化工具Regexper (https://regexper.com/)Debuggex (https://www.debuggex.com/)学习资源MDN正则表达式文档《精通正则表达式》Jeffrey Friedl著RegexOne交互式教程 (https://regexone.com/)10.3 最后建议在实际开发中正则表达式虽然强大但也要注意不要过度使用正则表达式解决所有字符串问题对于特别复杂的模式考虑分步处理或使用专门的解析器始终为复杂的正则表达式添加注释说明编写单元测试验证正则表达式的正确性注意性能问题避免编写可能导致回溯灾难的模式