一文掌握正则表达式

前端大神之路

共 5901字,需浏览 12分钟

 ·

2022-08-12 07:28

本文适合对正则不太熟悉,以及想掌握正则表达式的小伙伴阅读~

欢迎关注前端早茶,与广东靓仔携手共同进阶~


作者:广东靓仔

一、前言

有的小伙伴对正则有所惧怕,也有的小伙伴遇到正则就搜索答案。其实这些都是正常的,不论是刚从事前端、还是从业好几年的小伙伴。如果没有专门去学习下正则表达式,没掌握很正常的。

预热
.match(/(?<=\/detail.*\/)[^\/]+/)[0]

/^(([1-9]\d*)|\d)(\.\d{1,6})?$/

"hello qianduan zaocha".match(/\b[a-z]+(?=a\b)/g)
如果看得明白上面的正则,本文可以跳着阅读,如果看得不是特别明白,建议按顺序阅读~

二、JS中运行正则

正则表达式,又称规则表达式,(在代码中常简写为regex、regexp或RE),是一种文本模式,是计算机科学的一个概念。
JavaScript中使用String对象和RegExp对象提供的方法来运行正则表达式。

RegExp对象的方法

exec(): arrayexec()方法返回正则执行一次的结果。如果设置了全局标志g,会返回一个捕获组,用于迭代执行。且这个捕获组的第一项是当前完整正则的一次执行结果,第二项开始是每一个子模式的执行结果。
test(): booleantest()方法用于检测传入的字符串是否包含符合正则规则的子串,如果包含返回true,否则返回false。

String对象的方法

  重用的String对象方法大概有10来个,正则里面一般使用其中的4个。


match()

match()方法接收一个正则对象,用来匹配调用字符串中符合规则的子串。如果正则对象添加了全局标志,那么直接返回所有的匹配结果,否则,返回一个可以被迭代执行的捕获组 。


replace() 

replace()方法接收两个参数,第一个参数是用来匹配调用字符串的正则表达式(字符串会被转化成简单模式的正则规则),第二个参数表示要替换的字符串或者返回字符串的函数。replace()方法不改变源字符串。


search() 

search()方法接收一个正则对象或一个字符串(字符串会转换成简单模式的正则表达式),用来查找调用字符串中符合规则的子串的位置,匹配到了就返回第一次出现的索引,否则返回-1


split() 

split()方法接收两个参数,第一个是一个正则或字符串,表示将要匹配并用于切分的字符,使用第一个参数匹配调用字符串,在符合规则的位置将字符串切分未为数组,并返回。第二个参数限制分割的片段数量。

三、简单的规则

1: 一般写正则表单时,都是先按如下,把格式定好

/^    $/
温馨提示:正则表达式是很精确的,不要有多余的空格

2. 正则表达式定义

正则表达式是用来匹配一串文本中符合规则的子串的字符组合。一段用于匹配的正则表达式通常称为一个模式。


3、正则是区分大小写的

在正则规则里面,大写往往是"非"。比如:\d,匹配数字。\D 匹配非数字。

四、元字符

概念:所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(即位于元字符前面的字符)在目标对象中的出现模式。
元字符的完整列表
字符描述
\

将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。

^

匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。

$

匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 之前的位置。

*

匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。

+

匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。

?

匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 。? 等价于 {0,1}。

{n}

n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。

{n,}

n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。

{n,m}

m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

?

当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。

.

匹配除换行符(\n、\r)之外的任何单个字符。要匹配包括 '\n' 在内的任何字符,请使用像"(.|\n)"的模式。

(pattern)

匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '\(' 或 '\)'。

(?:pattern)

匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。

(?=pattern)

正向肯定预查(look ahead positive assert),在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,"Windows(?=95|98|NT|2000)"能匹配"Windows2000"中的"Windows",但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

(?!pattern)

正向否定预查(negative assert),在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows",但不能匹配"Windows2000"中的"Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

(?<=pattern)反向(look behind)肯定预查,与正向肯定预查类似,只是方向相反。例如,"(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows",但不能匹配"3.1Windows"中的"Windows"。
(?<!pattern)反向否定预查,与正向否定预查类似,只是方向相反。例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows",但不能匹配"2000Windows"中的"Windows"。
x|y

匹配 x 或 y。例如,'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。

[xyz]

字符集合。匹配所包含的任意一个字符。例如, '[abc]' 可以匹配 "plain" 中的 'a'。

[^xyz]

负值字符集合。匹配未包含的任意字符。例如, '[^abc]' 可以匹配 "plain" 中的'p'、'l'、'i'、'n'。

[a-z]

字符范围。匹配指定范围内的任意字符。例如,'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。

[^a-z]

负值字符范围。匹配任何不在指定范围内的任意字符。例如,'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。

\b

匹配一个单词边界,也就是指单词和空格间的位置。例如, 'er\b' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。

\B

匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er',但不能匹配 "never" 中的 'er'。

\cx

匹配由 x 指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。

\d

匹配一个数字字符。等价于 [0-9]。

\D

匹配一个非数字字符。等价于 [^0-9]。

\f

匹配一个换页符。等价于 \x0c 和 \cL。

\n

匹配一个换行符。等价于 \x0a 和 \cJ。

\r

匹配一个回车符。等价于 \x0d 和 \cM。

\s

匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

\S

匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。

\t

匹配一个制表符。等价于 \x09 和 \cI。

\v

匹配一个垂直制表符。等价于 \x0b 和 \cK。

\w

匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。

\W

匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。

\xn

匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,'\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。

\num

匹配 num,其中 num 是一个正整数。对所获取的匹配的引用。例如,'(.)\1' 匹配两个连续的相同字符。

\n

标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为向后引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。

\nm

标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式,则 nm 为向后引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足,若 n 和 m 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm。

\nml

如果 n 为八进制数字 (0-3),且 m 和 l 均为八进制数字 (0-7),则匹配八进制转义值 nml。

\un

匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (?)。


上面这个表是完整的元字符,下面列举几个常用的展开讲讲:
“点号”
/./.exec('liangzai')   // l

转义运算符
/\//.exec('前//端/早茶')   // /
“字符集“
/[liangzai]/.exec('qdzc')   // z
匹配方括号内的任意字符
“位置“
/^\//.exec('//前/端/早/茶')   // /
开头
/\/$/.exec('前端/早茶//')   // /
结尾

“文本控制字符“\f  匹配一个换页符\n 匹配一个换行符\r 匹配一个回车符

五、标记

标记用来修改正则表达式的一些默认行为,包括是否忽略大小写(i),是否全局搜索(g),是否多行搜索(m)。标记不属于元字符,因此不写在正则规则里面,而是写在规则后面

i、g这两个比较通用,广东靓仔就不多讲了。我们来看看这个m

`   
    qdzc#
    gdlz#
    omg!
`.match(/\w+(?=#)/gm) 
// qdzc,gdlz
全局查询,且多行查询Tips: 多行标记m可以让开头和结尾的标记符^, $在多行使用

六、贪婪匹配、懒惰匹配

贪婪匹配:正则表达式趋向于最长匹配。

懒惰匹配:正则表达式趋向于最短匹配(只匹配刚好满足规则的子串)。

// 贪婪匹配
/\w+/.exec('qdzc_ q')   // qdzc_
 
// 惰性匹配
/
\w+?/.exec('qdzc_ q')   // q
正则表达式默认是贪婪匹配,会尽可能地匹配多的符合规则地字符。


正则表达式主要分两个标准:posixpcre

posix是unix遵循的标准。grep,sed支持的正则是posix。

pcre在posix的基础上做了扩展,提供了很多方便的功能。


一段用于匹配的正则表达式通常称为一个模式

七、零宽断言


零宽:只匹配位置,不匹配内容断言: 用来判断某个字符的前后,是否符合某种特定格式。
零宽断言种类?= 正先行断言。匹配符合规则的位置,先行,即匹配断言规则前面的字符?! 负先行断言。匹配不符合规则的位置,先行,即匹配断言规则前面的字符?<= 正向 即匹配符合规则的位置,后发,即匹配断言规则后面的字符?<! 反向 即匹配不符合规则的位置,后发,即匹配断言规则后面的字符

(?=exp):零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。

(?<=exp):零宽度正回顾后发断言,它断言自身出现的位置的前面能匹配表达式exp

(?!exp):零宽度负预测先行断言,断言此位置的后面不能匹配表达式exp。

(?<!exp):零宽度负回顾后发断言来断言此位置的前面不能匹配表达式exp


629064605647a199a28fd01b7dffa87e.webp

面试题库推荐


  百度某部门面试原题d058de07c455c7964ca99759cbd6144a.webp  某中型公司面试原题
78fda2f636ccc0435883a3e124aa8f95.webp  【精品】前端知识梳理78fda2f636ccc0435883a3e124aa8f95.webp


八、最后

相信小伙伴们看完这篇正则文章,对正则一定会有一个全面的了解。平时我们在开发过程中,可以多多使用正则~

关注我,一起携手进阶

欢迎关注前端早茶,与广东靓仔携手共同进阶~

浏览 25
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报