JS 正则表达式 -- 分组【详解】含普通分组、命名分组、反向引用

普通分组

使用圆括号 () 来创建分组捕获匹配的内容,通过正则表达式匹配结果的数组来访问这些捕获的内容。

ts 复制代码
const str = "Hello, World!";
const regex = /(Hello), (World)!$/;
const match = str.match(regex);

if (match) {
    console.log("完整匹配结果: ", match[0]); 
    console.log("第一个分组结果: ", match[1]); 
    console.log("第二个分组结果: ", match[2]); 
}

命名分组

?<分组名称> 来给分组命名,具体用法如下:

ts 复制代码
const str = "2024-10-01";
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = str.match(regex);

if (match) {
    console.log("年份: ", match.groups.year); 
    console.log("月份: ", match.groups.month); 
    console.log("日期: ", match.groups.day); 
}

反向引用

在正则表达式内部或替换字符串中使用 \n(n 是分组的编号)来引用之前捕获的分组内容。

cpp 复制代码
const str = "abab";
const regex = /(ab)\1/;
const match = str.match(regex);

if (match) {
    console.log("完整匹配结果: ", match[0]);   // abab
    console.log("第一个分组结果(仅一个分组): ", match[1]);  // ab
}

在替换字符串中使用反向引用

cpp 复制代码
const str = "John Smith";
const regex = /(\w+) (\w+)/;
const newStr = str.replace(regex, "$2, $1");

console.log("替换后的字符串: ", newStr); // Smith, John
相关推荐
文艺理科生几秒前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
夏小花花4 分钟前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript
outsider_友人A6 分钟前
前端也想写后端(3)中间件Middleware、管道Pipes、拦截器Interceptors
前端·node.js·nestjs
静Yu7 分钟前
Webpack 你到底在干什么!?
前端
掘金安东尼8 分钟前
前端周刊第427期(2025年8月4日–8月10日)
前端·javascript·面试
阿华的代码王国8 分钟前
【Android】适配器与外部事件的交互
android·xml·java·前端·后端·交互
mit6.82411 分钟前
[AI React Web] 包与依赖管理 | `axios`库 | `framer-motion`库
前端·人工智能·react.js
老虎062715 分钟前
JavaWeb前端(HTML,CSS具体案例)
前端·css·html
Mintopia21 分钟前
一个月速成 AI 工程师:从代码小白到智能工匠的修炼手册
前端·javascript·aigc
Mintopia24 分钟前
Next.js 全栈:接收和处理请求
前端·javascript·next.js