[JavaScript]正则表达式,在这里一目了然

39 阅读3分钟

正则表达式,或多或少都会遇到,不管是自己写还是看别人写的,看着好像明白,但是下次用的时候,又不知道如何使用了。
这里整理一些我对正则的的理解,因为各个语言的正则有所不同,这里只是 JavaScript 语言中的用法与内容。

〇、前言

根据自己的理解,做了一个正则表达式的 解析工具,可以一边解析一边去理解;可能会更容易一些。
(是基于本人的理解进行的解析,由于水平有限,仅供参考。🌿 )

一、符号分类

参考资料:正则表达式符号备忘录

正则里面的符号是多种多样的,不同的符号有着不同的含义;把它们按照基础的用法,分为以下几类

1、转义字符

转义字符就是带 \ 的字符,有2种

  • 正则语法符号的转义,转义后表示字符本身,而不再具有语法含义(跟编程中的含义一致)
    如:\*\(\|

  • 将一些字符进行转义后,表示特殊的含义,常用的有

    • \d : 匹配所有数字;相当于 [0-9]
    • \D : 匹配非数字;相当于 [^0-9]
    • \w : 匹配所有字母、所有数字、下划线;相当于 [A-Za-z0-9_]
    • \W : 匹配非(字母、数字、下划线);相当于 [^A-Za-z0-9_]
    • \s : 匹配空白符、换行符;相当于 [ \n\r\f\t\v]
    • \S : 匹配非(空白符、换行符);相当于 [^ \n\r\f\t\v]

2、圆括号

圆括号 () 有2层含义

  • 分组 : 将括号内的内容作为一个整体。
    例如:ab|c 是匹配 ab 或者 c;而 a(b|c) 是先匹配 a,接着匹配 b或者c。(跟编程中的含义一致) 正则符号-1.png

  • 捕获 : 将匹配到的内容,放入匹配项中并使用。(这个较少用到)

3、方括号

方括号 [] 表示

  • 一个字符集合。匹配方括号中的任意字符
    例如:abc 是匹配 a和b和c;而 [abc] 是匹配 a或者b或者c。 正则符号-2.png
  • 方括号内有一个特殊的字符集表示形式:A-Z,表示从 A 到 Z 之中的任何字符。

4、限定符号

就是表示数量的符号,包括2种

  • 花括号 {n,m} :根据 n和m的值,分别表示不同含义
    • {n},表示匹配数量为恰好 n 次。
    • {n,},表示匹配数量为 n ~ ∞(无穷) 次。
    • {n,m},表示匹配数量为 n ~ m 次。
  • 3个符号 * + ?:分别表示
    • *,表示匹配数量为零次或多次,即 {0,}
    • +,表示匹配数量为一次或多次,即 {1,}
    • ?,表示匹配数量为零次或一次,即 {0,1}

5、位置符号

几个符号,最常用的 ^ $ 分别表示

  • ^,匹配输入的开始。
  • $,匹配输入的结束。

6、分割符

分隔符 表示

  • 将前后进行分割。

二、优先级

了解了基本的符号以后,按照其优先等级,从低到高进行解析,拆分成一个一个小的模块,一层一层去理解正则的具体含义。

具体优先级,从高到低为

  • 转义字符 \
  • 圆括号和方括号 () []
  • 限定符号 {n,m} * + ?
  • 位置符号 ^ $
  • 分割符

这是一个基本的解析示意图:

正则高级-解析示意图.png

优先级高的最后解析。

  • 第一、二层:位置符号优先级大于分割符,因此先解析分割符,再解析位置符号;
  • 第二、三层:圆括号和方括号优先级大于限定符号,因此先解析限定符号,再解析圆括号和方括号;
  • 第三层:转义字符优先级最高,因此最后解析转义字符。

三、特殊语法和符号

1、方括号

  • [^ ] 一个反向字符集。也就是说,它匹配任何没有包含在方括号中的字符。
    如:[^abc] 匹配除 a和b和c 之外的其他字符。

2、圆括号

  • x(?=y) (先行断言)'x'后面跟着'y'时匹配'x'。
  • x(?!y) (正向否定查找)仅当'x'后面不跟着'y'时匹配'x'。
  • (?<=y)x (后行断言)仅当'x'前面是'y'匹配'x'。
  • (?<!y)x (反向否定查找)仅当'x'前面不是'y'时匹配'x'。

3、位置符号

  • \b 匹配单词边界。
  • \B 匹配非单词边界。

4、其他特殊符号

  • . 匹配除换行符之外的任何单个字符。
  • \n 匹配换行符。
  • \r 匹配回车符。
  • \f 匹配换页符。
  • \t 匹配制表符。
  • \v 匹配垂直制表符。

三、高级用法

1、圆括号的捕获

正则高级-1.png
/(\d{4})-(\d{2})-(\d{2})/.exec("2026-01-22")
// 捕获的内容分别为:'2026'、'01'、'22'

"2026-01-22".replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1")
// 捕获的内容, 在 replace 方法的回调函数分别为:$1、$2、$3

/\d{4}(-|\/|\.)\d{2}\1\d{2}/.exec("2026-01-22")
// 捕获的内容分别为连接符号:'-';且在正则中分别为:\1、\2、\3

/\d{4}(-|\/|\.)\d{2}\1\d{2}/.exec("2026-01/22")
// 前面捕获的内容(-), 与后面的连接符(/)不同,故匹配失败。

2、其他转义码

// todo