JavaScript系列（83）--正则表达式高级详解

JavaScript 正则表达式高级详解 🎯

正则表达式是处理文本的强大工具，掌握其高级特性可以让我们更高效地处理复杂的文本匹配和处理任务。让我们深入探讨JavaScript中正则表达式的高级应用。

正则表达式基础回顾 🌟

💡 小知识：正则表达式由模式和标志组成。模式定义了要匹配的文本规则，标志决定了匹配的行为（如是否区分大小写、是否全局匹配等）。

高级匹配模式 📊

// 1. 前瞻和后顾
class LookAroundPatterns {static examples = {// 正向前瞻positiveAhead: /\d+(?=px)/g,  // 匹配后面跟着"px"的数字// 负向前瞻negativeAhead: /\d+(?!px)/g,  // 匹配后面不是"px"的数字// 正向后顾positiveBehind: /(?<=\$)\d+/g,  // 匹配前面是"$"的数字// 负向后顾negativeBehind: /(?<!\$)\d+/g  // 匹配前面不是"$"的数字};static test() {const text = '100px 200em $300 400';console.log('Numbers followed by px:', text.match(this.examples.positiveAhead));console.log('Numbers not followed by px:',text.match(this.examples.negativeAhead));console.log('Numbers with $ prefix:',text.match(this.examples.positiveBehind));console.log('Numbers without $ prefix:',text.match(this.examples.negativeBehind));}
}// 2. 条件匹配
class ConditionalPatterns {static patterns = {// 基于捕获组的条件ifGroup: /(\d+)?(?:(?(1)\w+|[A-Z]+))/,// 基于前瞻的条件ifLookahead: /\d+(?(?=px)px|em)/,// 嵌套条件nestedCondition: /(\d+)?(?:(?(1)\w+(?(?=px)px|em)|[A-Z]+))/};static validate(input) {return Object.entries(this.patterns).map(([name, pattern]) => ({name,matches: pattern.test(input)}));}
}// 3. 命名捕获组
class NamedGroups {static parseDate(dateString) {const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;const match = dateString.match(pattern);if (match) {const { year, month, day } = match.groups;return new Date(year, month - 1, day);}return null;}static parseURL(url) {const pattern = /^(?<protocol>https?):\/\/(?<domain>[^\/]+)(?<path>\/.*)?$/;const match = url.match(pattern);return match ? match.groups : null;}
}

正则表达式优化 ⚡

// 1. 性能优化
class RegexOptimization {static optimizePattern(pattern) {// 避免回溯灾难const optimized = pattern.replace(/\w+/, '\\w+?')  // 使用非贪婪匹配.replace(/([^])+/, '$1+?')  // 避免无限回溯.replace(/\s+/, '\\s+?');   // 优化空白匹配return new RegExp(optimized);}static measurePerformance(pattern, text, iterations = 1000) {const start = performance.now();for (let i = 0; i < iterations; i++) {pattern.test(text);}return performance.now() - start;}static comparePatterns(patterns, text) {return patterns.map(pattern => ({pattern: pattern.toString(),time: this.measurePerformance(pattern, text)}));}
}// 2. 缓存和重用
class RegexCache {constructor() {this.cache = new Map();}getPattern(pattern) {if (this.cache.has(pattern)) {return this.cache.get(pattern);}const regex = new RegExp(pattern);this.cache.set(pattern, regex);return regex;}clearCache() {this.cache.clear();}
}// 3. 动态构建
class RegexBuilder {constructor() {this.parts = [];}addLiteral(text) {this.parts.push(RegExp.escape(text));return this;}addDigits(length) {this.parts.push(`\\d{${length}}`);return this;}addWord() {this.parts.push('\\w+');return this;}addOptional(pattern) {this.parts.push(`(?:${pattern})?`);return this;}addGroup(name, pattern) {this.parts.push(`(?<${name}>${pattern})`);return this;}build(flags = '') {return new RegExp(this.parts.join(''), flags);}
}

实战应用示例 💼

// 1. 表单验证
class FormValidator {static patterns = {email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,phone: /^(?:\+?\d{1,3}[-. ]?)?\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/,password: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,username: /^[a-zA-Z0-9_]{3,16}$/};static validate(type, value) {const pattern = this.patterns[type];if (!pattern) {throw new Error(`Unknown validation type: ${type}`);}return {isValid: pattern.test(value),type,value};}static validateAll(data) {return Object.entries(data).map(([type, value]) => this.validate(type, value));}
}// 2. 文本解析器
class TextParser {static parseMarkdown(text) {const patterns = {heading: /^#{1,6}\s+(.+)$/gm,bold: /\*\*(.+?)\*\*/g,italic: /\_(.+?)\_/g,link: /\[(.+?)\]\((.+?)\)/g,code: /`(.+?)`/g};let html = text;// 转换标题html = html.replace(patterns.heading, (match, content, level) => {const count = match.indexOf(' ');return `<h${count}>${content}</h${count}>`;});// 转换其他格式html = html.replace(patterns.bold, '<strong>$1</strong>').replace(patterns.italic, '<em>$1</em>').replace(patterns.link, '<a href="$2">$1</a>').replace(patterns.code, '<code>$1</code>');return html;}static extractData(text) {const patterns = {dates: /\b\d{4}-\d{2}-\d{2}\b/g,emails: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,urls: /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g,hashtags: /#[a-zA-Z0-9_]+/g};return Object.entries(patterns).reduce((acc, [key, pattern]) => {acc[key] = text.match(pattern) || [];return acc;}, {});}
}// 3. 代码分析器
class CodeAnalyzer {static patterns = {functions: /function\s+(\w+)\s*\([^)]*\)\s*{/g,classes: /class\s+(\w+)(?:\s+extends\s+(\w+))?\s*{/g,imports: /import\s+(?:{[^}]+}|\w+)\s+from\s+['"]([^'"]+)['"]/g,exports: /export\s+(?:default\s+)?(?:class|function|const|let|var)\s+(\w+)/g};static analyze(code) {const analysis = {};for (const [type, pattern] of Object.entries(this.patterns)) {analysis[type] = [];let match;while ((match = pattern.exec(code)) !== null) {analysis[type].push({name: match[1],position: match.index,full: match[0]});}}return analysis;}static findDependencies(code) {const imports = [...code.matchAll(this.patterns.imports)];return imports.map(match => ({module: match[1],position: match.index}));}
}

调试与测试 🔍

// 1. 正则表达式测试器
class RegexTester {static test(pattern, input) {const regex = pattern instanceof RegExp ? pattern : new RegExp(pattern);const start = performance.now();const result = {pattern: regex.toString(),input,matches: [],groups: null,time: 0};try {if (regex.global) {let match;while ((match = regex.exec(input)) !== null) {result.matches.push({text: match[0],index: match.index,groups: match.groups});}} else {const match = input.match(regex);if (match) {result.matches.push({text: match[0],index: match.index,groups: match.groups});}}} catch (error) {result.error = error.message;}result.time = performance.now() - start;return result;}static visualize(pattern) {return pattern.toString().replace(/\((?!\?)/g, '(捕获组 ').replace(/\(\?<(\w+)>/g, '(命名组 $1 ').replace(/\(\?:/g, '(非捕获组 ').replace(/\(\?=/g, '(正向前瞻 ').replace(/\(\?!/g, '(负向前瞻 ').replace(/\(\?<=/g, '(正向后顾 ').replace(/\(\?<!/g, '(负向后顾 ');}
}// 2. 错误处理
class RegexError extends Error {constructor(message, pattern) {super(message);this.name = 'RegexError';this.pattern = pattern;}static validate(pattern) {try {new RegExp(pattern);return true;} catch (error) {throw new RegexError(error.message, pattern);}}
}// 3. 单元测试
class RegexTesting {static runTests(tests) {return tests.map(test => {const { pattern, input, expected } = test;try {const regex = new RegExp(pattern);const actual = regex.test(input);return {...test,passed: actual === expected,actual};} catch (error) {return {...test,passed: false,error: error.message};}});}static generateTestCases(pattern) {// 生成测试用例return [{input: '',expected: false,description: '空字符串'},{input: 'test',expected: pattern.test('test'),description: '基本测试'},// 添加更多边界情况];}
}

最佳实践 ⭐

// 1. 模式库
class RegexPatterns {static common = {email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,url: /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,ipv4: /^(?:(?: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]?)$/,date: /^(?:\d{4})-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01])$/};static getPattern(name) {return this.common[name] || null;}
}// 2. 安全考虑
class RegexSecurity {static isSafe(pattern) {// 检查是否存在潜在的灾难性回溯const dangerous = [/^(a+)+$/,  // 嵌套重复/^([a-z]+)*$/,  // 无限重复/^(a|a)*$/  // 重叠选择];return !dangerous.some(d => d.toString() === pattern.toString());}static sanitize(pattern) {// 添加超时保护const timeout = setTimeout(() => {throw new Error('Regex timeout');}, 1000);try {return pattern;} finally {clearTimeout(timeout);}}
}// 3. 文档生成
class RegexDocumentation {static generate(pattern) {const docs = {pattern: pattern.toString(),flags: pattern.flags,description: this.describePattern(pattern),examples: this.generateExamples(pattern)};return docs;}static describePattern(pattern) {const parts = [];const str = pattern.toString();if (str.includes('^')) parts.push('从开始位置匹配');if (str.includes('$')) parts.push('匹配到结束位置');if (str.includes('(?:')) parts.push('包含非捕获组');if (str.includes('(?<')) parts.push('包含命名捕获组');if (str.includes('(?=')) parts.push('包含前瞻断言');if (str.includes('(?!')) parts.push('包含负向前瞻');return parts.join('，');}
}