javascript 正则表达式 复杂分组
封面图
•
2025-11-08
•
JavaScript
191
0
0
0
在 JavaScript 中,正则表达式(Regular Expression)支持**复杂分组**,这可以通过使用 **捕获组(capture groups)** 和 **非捕获组(non-capturing groups)** 来实现。这些功能可以帮助你更精确地匹配和提取文本内容。 --- ## 一、基本概念 ### 1. 捕获组(Capture Groups) 使用 `()` 包裹的子表达式称为**捕获组**,它可以提取匹配的内容。 ```javascript const str = "Hello, world!"; const regex = /(\w+), (\w+)/; const match = str.match(regex); console.log(match[0]); // "Hello, world" console.log(match[1]); // "Hello" console.log(match[2]); // "world" ``` ### 2. 非捕获组(Non-capturing Groups) 使用 `(?:...)` 包裹的子表达式是**非捕获组**,它只用于分组,不会被单独提取出来。 ```javascript const str = "Hello, world!"; const regex = /(?:\w+), (\w+)/; const match = str.match(regex); console.log(match[0]); // "Hello, world" console.log(match[1]); // "world" ``` --- ## 二、复杂分组示例 ### 示例 1:提取 URL 的协议、域名和路径 ```javascript const url = "https://www.example.com/path/to/page?query=1"; const regex = /^(https?):\/\/([^\/?#]+)([^\?#]*)\??([^#]*)#?(.*)$/; const match = url.match(regex); console.log("Protocol:", match[1]); // "https" console.log("Domain:", match[2]); // "www.example.com" console.log("Path:", match[3]); // "/path/to/page" console.log("Query:", match[4]); // "query=1" console.log("Hash:", match[5]); // "" ``` ### 示例 2:解析 HTML 标签 ```javascript const html = "<div class='example'>Hello</div>"; const regex = /<([a-z]+)\s+[^>]*class=['"]([^'"]+)['"][^>]*>(.*?)<\/\1>/i; const match = html.match(regex); console.log("Tag:", match[1]); // "div" console.log("Class:", match[2]); // "example" console.log("Content:", match[3]); // "Hello" ``` > 注意:上面的正则可能不适用于所有 HTML,因为 HTML 是结构复杂的语言,建议用 DOM 解析器处理。 --- ## 三、高级技巧 ### 1. 嵌套分组 ```javascript const str = "abc123def456"; const regex = /((a|b)c)((d|e)f)/; const match = str.match(regex); console.log(match[0]); // "abc123def" console.log(match[1]); // "abc" console.log(match[2]); // "a" console.log(match[3]); // "def" console.log(match[4]); // "d" ``` ### 2. 使用反向引用(Backreference) ```javascript const str = "abba"; const regex = /(.)\1/; // 匹配两个相同的字符 console.log(str.match(regex)); // ["bb"] ``` ### 3. 使用命名捕获组(ES6 支持) ```javascript const str = "John Doe"; const regex =/(?<first>\w+)\s+(?<last>\w+)/; const match = str.match(regex); console.log(match.groups.first); // "John" console.log(match.groups.last); // "Doe" ``` --- ## 四、常见应用场景 - 提取 URL 参数 - 解析日志文件 - 验证复杂格式(如邮箱、电话号码) - 数据清洗与提取 --- ## 五、注意事项 - 正则表达式不能完全替代 HTML 或 JSON 解析器。 - 复杂的正则可能导致性能问题或难以维护。 - 使用 `test()`、`match()`、`replace()` 等方法时注意返回值类型。 --- 如果你有具体的场景或需要匹配的字符串结构,我可以帮你写出更精确的正则表达式。欢迎继续提问!
上一篇:
javascript 正则表达式分组知识
下一篇:
javascript 正则表达式 反向引用
标题录入,一次不能超过6条
留言
评论