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
相关推荐
Zhencode3 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd3 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup
天下代码客3 小时前
使用electronc框架调用dll动态链接库流程和避坑
前端·javascript·vue.js·electron·node.js
weixin199701080164 小时前
【性能提升300%】仿1688首页的Webpack优化全记录
前端·webpack·node.js
冰暮流星4 小时前
javascript之数组
java·前端·javascript
晚霞的不甘4 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架
xkxnq4 小时前
第五阶段:Vue3核心深度深挖(第74天)(Vue3计算属性进阶)
前端·javascript·vue.js
三小河5 小时前
Agent Skill与Rules的区别——以Cursor为例
前端·javascript·后端
Hilaku5 小时前
不要在简历上写精通 Vue3?来自面试官的真实劝退
前端·javascript·vue.js
三小河5 小时前
前端视角详解 Agent Skill
前端·javascript·后端