hello
".match(/(.*?)<\/p>/); // ['
hello
', 'hello'] // ⚠️ 注意：正则不适合解析复杂的 HTML，应该用 DOMParser const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, "text/html"); ``` > [!WARNING] > > HTML 不是正则语言（Regular Language），用正则解析 HTML 会导致各种边界问题： > > ```javascript theme={null} > // ❌ 用正则解析嵌套标签——无法正确处理 > "hello
hello
'，但如果嵌套更深就会出错 > > // ✅ 用 DOMParser 解析 HTML > const parser = new DOMParser(); > const doc = parser.parseFromString(htmlString, "text/html"); > const div = doc.querySelector("div"); > console.log(div.textContent); // 'hello' > ``` *** ## Q7: 正则表达式的性能优化 正则表达式可能遇到**灾难性回溯**（Catastrophic Backtracking）问题，导致性能急剧下降。 ```text theme={null} ┌───────────────────────────────────────────────┐ │ 灾难性回溯的原理 │ │ │ │ 正则：/a+b/ │ │ 字符串：'aaaaaaaaac' │ │ │ │ 引擎尝试： │ │ 1. a+ 匹配所有 a → 失败（没有 b） │ │ 2. a+ 回退一个 a → 失败（还是没有 b） │ │ 3. a+ 再回退一个 a → 失败 │ │ ... │ │ 4. a+ 回退到只剩一个 a → 失败 │ │ 5. 放弃，a+ 匹配 0 个 a → 失败（没有 a 开头） │ │ │ │ 时间复杂度：O(2^n) —— 指数级！ │ └───────────────────────────────────────────────┘ ``` ```javascript theme={null} // ❌ 灾难性回溯的例子 const regex = /^(a+)+$/; regex.test("aaaaaaaaaaaaaaaaaaaaaaaaaaaac"); // 引擎需要尝试 2^30 种可能性，耗时数秒 // ✅ 优化：用原子组（Atomic Group）或占有量词（Possessive Quantifier） // JavaScript 不支持原子组，但可以用其他方式优化 const regex = /^a+$/; regex.test("aaaaaaaaaaaaaaaaaaaaaaaaaaaac"); // 立即返回 false，因为后面有 'c' ``` > [!WARNING] > > 以下正则模式容易导致灾难性回溯： > > ```javascript theme={null} > // ❌ 嵌套量词 > /(a+)+$/; // 嵌套的 + > /(a*)*$/; // 嵌套的 * > /(a|b)*$/; // 交替和量词组合 > > // ❌ 重叠的字符集 > /([a-z]+)*$/; // 量词嵌套 > > // ✅ 优化方案 > // 1. 避免嵌套量词 > /^a+$/; // 简单量词 > > // 2. 使用原子组（如果引擎支持） > // /^(?>a+)+$/; // 原子组（JavaScript 不支持） > > // 3. 使用占有量词（如果引擎支持） > // /^a++$/; // 占有量词（JavaScript 不支持） > ``` ### 正则表达式的优化技巧 ```javascript theme={null} // 1. 锚定开头：减少匹配尝试次数 /^hello/.test("say hello"); // 从头开始匹配，快速失败 // 2. 避免不必要的捕获 /(?:abc)+/; // 非捕获分组，比 /(abc)+/ 更快 // 3. 使用更精确的字符集 /[a-zA-Z0-9]/; // 比 /./ 更精确 // 4. 避免回溯 /^[a-z]+$/; // 锚定开头和结尾，减少回溯 // 5. 编译正则（复用） const regex = /^[a-z]+$/; // 编译一次 regex.test("hello"); // 多次使用 regex.test("world"); ``` *** ## Q8: 正则表达式在 JavaScript 中的使用 ```javascript theme={null} // 1. 创建正则 const regex1 = /pattern/flags; // 字面量 const regex2 = new RegExp('pattern', flags); // 构造函数 // 2. 常用方法 /pattern/.test('string'); // 返回 true/false 'string'.match(/pattern/); // 返回匹配结果 'string'.replace(/pattern/, 'replacement'); // 替换 'string'.search(/pattern/); // 返回匹配位置 'string'.split(/pattern/); // 分割 // 3. 标志位 /pattern/g; // 全局匹配（找到所有匹配） /pattern/i; // 忽略大小写 /pattern/m; // 多行模式（^ 和 $ 匹配每行的开头和结尾） /pattern/s; // dotAll 模式（. 匹配换行符） /pattern/u; // Unicode 模式（正确处理 Unicode 字符） /pattern/y; // 粘性模式（从 lastIndex 位置开始匹配） ``` > [!WARNING] > > `exec` 和 `match` 在全局匹配时行为不同： > > ```javascript theme={null} > // exec：返回一个匹配，需要循环调用 > const regex = /\d+/g; > const str = "123 abc 456"; > let match; > while ((match = regex.exec(str)) !== null) { > console.log(match[0], match.index); > } > // '123' 0 > // '456' 8 > > // match：返回所有匹配 > "123 abc 456".match(/\d+/g); > // ['123', '456'] > ``` *** ## 底层源码：正则引擎是如何工作的？ 正则引擎的匹配原理是什么？ 正则引擎有两种实现方式：**NFA（非确定性有限自动机）** 和 **DFA（确定性有限自动机）**。JavaScript 使用 NFA（详见 [V8 源码：src/regexp/regexp-parser.cc](https://github.com/v8/v8/blob/main/src/regexp/regexp-parser.cc)）： ```cpp theme={null} // V8 正则引擎的简化逻辑 // 1. 解析正则表达式，生成 AST RegExpAST* ParseRegExp(const char* pattern) { // 把 /a+b/ 解析成：Concat(a, Quantifier(+), b) } // 2. 编译 AST 为字节码 RegExpBytecode CompileRegExp(RegExpAST* ast) { // 把 AST 编译成字节码指令 // 例如：MATCH_CHAR 'a', LOOP, MATCH_CHAR 'b' } // 3. 用 NFA 执行匹配 bool ExecuteNFA(RegExpBytecode bytecode, const char* input) { // 从起始状态开始 // 尝试匹配每个字符 // 如果失败，回溯到上一个选择点 // 如果成功，继续匹配下一个字符 } ``` NFA 和 DFA 的区别： | 特性 | NFA | DFA | | - | - | - | | **回溯** | 有（可能回溯） | 无（不回溯） | | **性能** | 可能慢（灾难性回溯） | 快（线性时间） | | **功能** | 支持反向引用、断言 | 不支持反向引用、断言 | | **实现** | JavaScript、Java、Python | grep、awk | 为什么 JavaScript 选择 NFA 而不是 DFA？ 因为 NFA 支持更多功能（反向引用、断言等），而 DFA 不支持。JavaScript 的正则表达式需要支持这些高级功能，所以选择了 NFA。 ```javascript theme={null} // 反向引用：NFA 支持，DFA 不支持 /(a)\1/.test("aa"); // true（\1 引用第一个捕获组 'a'） // 前瞻断言：NFA 支持，DFA 不支持 /hello(?= world)/.test("hello world"); // true ``` *** ## 十、及格回答 vs 满分回答 ### 问题："说说正则表达式的匹配原理，什么是灾难性回溯？" **及格回答（60-70分）：** > "正则表达式用模式匹配字符串。灾难性回溯是当正则表达式有嵌套量词时，引擎需要尝试大量可能性，导致性能急剧下降。比如 /(a+)+\$/ 匹配 'aaaaaaaaac' 会很慢。" 问题出在：**知道现象但不理解原理**。 **满分回答（90-100分）：** > 正则表达式引擎有两种实现：**NFA（非确定性有限自动机）** 和 **DFA（确定性有限自动机）**。JavaScript 使用 NFA，因为它支持反向引用、断言等高级功能。NFA 的工作方式是：从起始状态开始，尝试匹配每个字符。如果匹配失败，回溯到上一个选择点，尝试另一种可能性。\[1] > 灾难性回溯发生在**嵌套量词**的场景。以 `/(a+)+$/` 为例，当输入是 `aaaaaaaaac` 时，引擎需要尝试 `a+` 匹配 1 个 a、2 个 a、...、9 个 a 的所有组合。因为有两层嵌套（`(a+)+`），每种组合内部还需要进一步拆分，导致时间复杂度达到 O(2^n)。\[2] > 避免灾难性回溯的方法：1）避免嵌套量词；2）使用非捕获分组 `(?:)` 减少回溯开销；3）锚定开头 `^` 减少匹配尝试次数；4）使用更精确的字符集，避免过度匹配。\[3] > 实际项目中，正则表达式常用于表单验证、文本提取、URL 解析等场景。对于复杂的 HTML 解析，应该用 DOMParser 而不是正则——因为 HTML 不是正则语言，用正则解析嵌套标签会导致各种边界问题。 ### 常见追问 > [accordion] 正则表达式中的贪婪匹配和非贪婪匹配？ > > **答题要点：** > 默认贪婪（尽可能多），加 `?` 变非贪婪（尽可能少）。 > > **高分回答：** > "默认情况下，`*`、`+`、`?` 是**贪婪匹配**——尽可能多地匹配字符。加 `?` 变成**非贪婪匹配**——尽可能少地匹配字符。 > > ```javascript theme={null} > // 贪婪匹配：尽可能多 > 'hello
hello
'，但如果嵌套更深就会出错 > > // ❌ 无法处理嵌套的同名标签 > '