「正则表达式」三、正则表达式括号的使用(前端必懂 )

往期回顾

正文内容

简单理解:括号提供了分组,便于我们使用它。

通常有两种引用情况:在JS代码中引入,和在正则表达式中引入。

分组和分支结构,主要是强调括号内是一个整体,即提供子表达式。

  • 分组如 /(ab)+/g 匹配连续出现的 ab 。
  • 分支结构如 /(a|b)+/g 匹配出现的 a 或 b 表达式。

1.分组引用

如在日期匹配的时候,就可以这么改造:

「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 提取数据
「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 替换

将 yyyy-mm-dd 转成 mm/dd/yyyy。

「正则表达式」三、正则表达式括号的使用(前端必懂 )

2. 反向引用

使用 \\n 表示第 n 个分组,比如 \\1 表示第 1 个分组:

「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 多个括号嵌套

按照开括号的顺序:

「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 特殊情况

\\10 表示的是第 10 个分组,若要匹配 \\ 和 0 时,使用 (?:\\1)0 或 \\1(?:0)。

「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 当引用不存在的分组

如匹配 \\2 是前面不存在,则匹配 \\2 本身,即对 2 的转义,不同浏览器可能不同:

「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 分组后面有量词

当分组后面有量词的话,则捕获的是最后一次的匹配:

「正则表达式」三、正则表达式括号的使用(前端必懂 )

3. 相关案例

这里只写出核心代码。

  • 模拟字符串 trim 方法
「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 每个单词首字母大写
「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 驼峰化 和 中划线化
「正则表达式」三、正则表达式括号的使用(前端必懂 )

  • 匹配成对HTML标签

匹配成对标签

leo,而不匹配不成对标签


分享到:


相關文章: