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
相关推荐
祈澈菇凉28 分钟前
如何使用useContext进行全局状态管理?
前端·javascript·react.js
澄江静如练_2 小时前
vue3中的标签属性中的Ref
前端·javascript·vue.js
GIS好难学2 小时前
考研出分24小时,人类精神状态图鉴
前端·考研·gis·gis开发·webgis·地信
斯~内克2 小时前
React Router 完全指南:从基础到高级实践
前端·react.js·前端框架
IT、木易2 小时前
大白话React第八章React 深入进阶与实践拓展阶段
javascript·react.js·ecmascript
m0_748232392 小时前
qwenvl 以及qwenvl 2 模型架构理解
android·前端·后端
冲!!2 小时前
vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用
前端·javascript·vue.js
匹马夕阳2 小时前
React vs Vue3深度对比与使用场景分析
前端·react.js·前端框架
一路向前的月光2 小时前
React(11)路由demo
javascript·react.js·ecmascript
浪遏2 小时前
2025年2月凉面与热面(2)—— 还没开始就结束了🤡?
前端·面试