不得不说,正则表达式的可读性却是比较差,但是作为开发人员,掌握正则表达式能够高效解决某些匹配问题,因此非常有必要学习正则表达式的语法及用途,本文将以一个实例带领大家轻松记忆正则语法!
![懵逼正则 b7ff9c797ea0be593d953cd853899aea.png](https://i-blog.csdnimg.cn/blog_migrate/5106afd2844682592166a58edbd16a74.png)
此文是翻译的正则表达式基础学习的文章,萌新手打翻译
0x00 正则表达式简介
作为一名程序猿,相信你可能已经在程序中看到过正则表达式,你可能会对于类似下面的字符串感到非常困惑。
/^\w+([\.-]?\w)+@\w+([\.]?\w)+(\.[a-zA-Z]{2,3})+$/
此时,你可能已经在试图揣测这串儿正则表达式的意思...
正则表达式(Regex或RegExp)在加速算法游戏中十分有用,利用正则表达式,我们能够解决很多问题。初次看到正则表达式的语法结构可能会被吓到,但非常值得你掌握并在工作中正确使用正则表达式。
0x01 什么是Regex?很重要?
Regex(正则表达式)是一种通过“匹配”方式用于帮助你从任意字符串数据中提取有效信息的对象。无论是数字、字母、标点符号或者空格,Regex可以让你检查并匹配字符串中的任意字符组合。
例如,假设你现在需要从文本中获取社会保险号码或者是电子邮箱地址。那么,你可以使用Regex来检查被检索文本中是否存在相关信息,并且你还可以利用Regex替换他们,或者用于验证另一个截取的子字符串。把Regex当作是你的搜索栏——你可以根据需求约定你的的搜索规则,然后Regex会帮您搜索所需要的信息。
0x02 正则表达式的两种创建方式
1.正则字面量:
若要创建正则字面量,你只需要使用两个 \
(反斜线) 来包裹Regex Pattern。
const regexLiteral = /helloworld/;
语法:/pattern/flags
2.正则表达式构造函数:
使用正则表达式构造函数将为你生成一个正则表达式
const greeting = 'hello';
const regexConstr = new RegExp(greeting);
语法:new RegExp(pattern[, flags])
**使用经验:**如果你的正则表达式是一个不变的常量,那么使用正则字面量将会有更好的性能。但如果该正则表达式经常改变,则最好使用正则表达式构造函数来动态生成。
0x03 正则表达式的使用
test()
、match()
和 replace()
是三种常用的正则使用方法,因此你应当熟练使用它们。
3.1 RegExp.prototype.test()
.test()
方法会返回一个布尔值——被检索的字符串中是否存在符合pattern的信息
const str1 = "i love regex";
const str2 = "it is cool";
const hasRegex = /regex/;
hasRegex.test(str1);
// expected output: true
hasRegex.test(str2);
// expected output: false
3.2 String.prototype.match()
可以使用 .match()
方法来代替 只返回是否匹配布尔值的.test()
方法。.match()
方法可以返回在当前字符串中所有满足匹配条件的结果数组。尽管使用 .test()
方法来判断是否存在符合条件的信息的确很方便,但有时候,我们也会试控制在整个搜索匹配的过程。
这种情况下,.match()
方法就派上了用场,根据你正则规则返回符合条件的结果数组,如下是一个基本使用案例。然后,你会看到当我们同时使用标志符时,.match()
将会是一个给力的方法。
const str = "I love JavaScript";
const result = str.match(/JavaScript/);
console.log(result)
// expected output: ['JavaScript']
3.3 String.prototype.replace()
.replace()
方法会在字符串中搜索一个指定的值(或者指定的正则表达式),然后会返回一个被替换了指定值的新字符串。
const sentence = 'I love dogs more than cats.';
const regex = /dogs/;
console.log(sentence.replace(regex, 'bunnies'));
// expected output: "I love bunnies more than cats."
**注意:**当使用指定值时,字符串中如果存在多个指定的值,但仅会替换第一个匹配到的值,如果想要替换多个,那么可以指定正则表达式。
const str = "Hello World World!";
const replacement = str.replace("World", "Planet");
console.log(replacement)
// expected output: “Hello Planet World!”
0x04 中括号表达式
在中括号表达式中,你可以设置用于指定需要匹配的任意字符或字符集合。
例如,const regex=/[A-Z]/
。如此,将搜索匹配字母表中所有的大写字母。
[a-z] 匹配字母表中所有小写字母
[A-Z] 匹配字母表中所有大写字母
[abcd] 在字符串中匹配小写字母a、b、c或d
[a-d] 同上,即可指定每个值,也可以使用“短横线”连接的字符集合
[a-gA-C0-7] 匹配字符串中的小写字母a~g集合,大写字母A~C集合或数字0~7集合中的任意字符
[^a-zA-Z] 匹配字符串中非英文大小写字母的字符 (在指定字符集合中,使^字符,意味着匹配指定字符集的补集)
0x05 标志
在正则表达式的反斜杠后,我们可以指定一个标志或者标志的组合。正则表达式借助标志(flags)作为如何正确检索和匹配pattern中自定义字符的标准。
const sentence = 'The Cat in the Hat is not a cat.'
const regex = /[A-Z]/;
const found = sentence.match(regex);
console.log(found);
// expected output: ['T']
“标志”是一个非必须指定的内容。没有指定标志,正则表达式会匹配第一个符合规则(pattern)返回true的字符。在如上的例子中,我们的程序会返回 ['T']
,因为在句子中找到了第一个大写字母T。
g
:global(全局),其作用是将字符串中满足表达式的所有结果均返回。换句话说,不仅仅返回满足条件的第一项,而是返回所有存在的匹配项。参考上面的例子,现在我们把g
标志添加到反斜杠的后边,就像这样,const regex = /A-Z/g
,然后,上面的match()方法将返回所有满足pattern(大写字母)的字符数组。因此,先检查sentence
,“The Cat in the Hat is not a cat.”,然后会返回三个大写字母的数组['T', 'C', 'H']
i
:insensitive(不敏感),其作用是大小写不敏感。例如,const regex = /[TheCatInTheHat]/ig
可以同时使用global和insensitive,这个表达式将会返回上面sentence
中的每一个字符在返回的数组中['T', 'h', 'e', 'C', 'a', 't', 'i', 'n', 't', 'h', 'e', 'H', 'a', 't', 'i', 'n', 't', 'a', 'c', 'a', 't']
m
:multi-line(多行),其作用是配合^
和$
标志作为匹配的起点和终点,而不是整个字符串(原作者列举的例子不太好说明区别)。我的理解是,m标志用于指定多行输入的字符串应该被当作多个行。如果使用了m标志,则会根据^
和$
来确定字符串开始匹配和结束匹配的区间,没有的话,就默认是整个字符串(如果没有^
或$
符号,则没必要加标志m
),理解还是很抽象,看看下面这个例子吧。
const sentence = '123\n456\nabc\nDEF\naa1';
sentence.match(/\d$/) // 匹配字符串末尾是数字的情况
sentence.match(/\d$/m) // 多行的情况下匹配第一个满足行末尾是数字的情况
sentence.match(/\d$/g) // 加上全局标志,返回所有末尾是数字的数组
sentence.match(/\d$/gm)// 再加上多行标志,则会比较每一行
![示例 d41fef489514761744e90988b1755f57.png](https://i-blog.csdnimg.cn/blog_migrate/5663b64a77b7ca5473258b945dbaeff2.png)
另外作为补充,当需要多个字符集进行匹配的时候,还有另外三个标志可以提供帮助
const sentence = 'There are 350 dogs and 17 cats in the house.'
const regex = /\d/
const found = sentence.match(regex);
console.log(found);
// expected output: ['3']
d
:\d
匹配数字类型字符,与[0-9]
相同,因此在上面例子中将返回第一个匹配的数字,返回结果为['3']
w
:\w
匹配任意的字母数字和下划线,与[0-9a-zA-Z_]
相同s
:\s
匹配空白类型字符,如果将例子中改为const regex = /\w\s/
,那么返回的结果就是['e']
,是There空格
匹配返回的结果,空白字符有\n
,空格
,\t
,
\d
、\w
和\s
的补集是\D
、\W
、\S
\D匹配所有非数字(等同于
[^0-9]
)\W匹配所有非数字字母和下划线字符(等同于
[^0-9a-zA-Z_]
)\S匹配所有非空白的字符(等同于
[^\s]
)
0x06 量词
量词(quantifiers)是正则表达式中的基本符号,具有特殊意义
* 前一字符的匹配数量为0或更多
+ 前一字符的匹配数量为1或更多
? 前一字符的匹配数量为0或1个;前一个字符(item,项)可有可无
^ 字符串的起始符号
$ 字符串的结尾符号
. 匹配任意字符,换行符除外
{m, n}: m是0或一个正整数,表明了至少匹配的数目, n是一个大于或等于m的正整数,表明了至多匹配数目
接下来,通过下面这个例子来看看我们所理解的Regex。
const str = 'for__if__rof__fi'
const regex = /[a-z]+/g;
console.log(found);
显而易见,正则表达式会去匹配所有的小写字母的字符,并且使用了+
符号来修饰前一个规则,以匹配所有满足前一个规则的所有字符,上面的代码将打印输出:['for', 'if', 'rof', 'fi']
。
再看看,如果正则表达式中没有符号+
的结果会是怎样
const regex = /[a-z]/g;
那么返回值将会是:['f','o','r','i','f','r','o','f','f','i']
.
0x07 灵活运用
还记得我们在文章一开始就提到的那一串难以理解的字符串吗?
/^\w+([\.-]?\w)+@\w+([\.]?\w)+(\.[a-zA-Z]{2,3})+$/
这是一个常用于邮件格式化的正则表达式,现在我们已经学会了Regex的基本用法和术语,下面我们来一步步拆分理解一下这个正则表达式
const email = 'student-id@alumni.school.edu’
const regex = /^\w+([\.-]?\w)+@\w+([\.]?\w)+(\.[a-zA-Z]{2,3})+$/
const found = regex.test(email);
console.log(found);
// expected output: true
1.首先,我们一部份一部份地去理解这个表达式。在字符串的开始是一个
^\w+
。^
符号表明从字符串的开头开始匹配,然后\w
会匹配所有的字母、数字和下划线,符号+
表明至少有一个满足前一规则。在例子,这第一部分的规则会从email
中匹配到student
2.然后,第二部分的规则是
([\.-]?\w)+
。一对括号包裹起来作为第一个捕获组,在括号里有一个字符集,该字符集将匹配.
或-
,而?
表明前一个字符有无.
或-
都可以,是可选的。然后是\w
,只会匹配一个字母、数字或下划线字符。外边的+
表明前面的组合规则在字符串中至少有一项满足。所以第二部分规则,将返回-id
。如果email是有两个连接符的student — id@alumni.school.edu
,那么会被认为是一个不合法的邮箱3.第三部分是
@\w+
,会检查有一个符号@
,并且其后w+
表明有一个或多个字母、数字,将会匹配例子中的@alumni
。4.接下来是
([\.]?\w)+
,这部分和第二部分的规则类似,它只会检查点号的有无,这将会匹配到.school
5.下一部分是
(\.[a-zA-Z]{2,3})+
,是检查邮件格式的重要部分。这部分将匹配邮箱地址中的顶级域名,会匹配到域名中的后缀,例如com
、org
或net
。首先会寻找到一个.
,然后是2~3个无论大小写的英文字母。在这个例子中,将匹配到.edu
最后是一个
$
符号,表明字符串结尾
这部分个人觉得作者说的有部分不符合规则,在第4步,该规则应该是会匹配到
.school.edu
![]()
运行结果
这就是Regex!现在我们已经知道如何使用正则来校验邮箱地址。此外,你可以在正则表达式中使用中括号,标志符,量词来完善我们正则中可能没考虑到的极端用例。
0x08 总结
对于开发人员来说,学会Regex的知识应该非常有用。如上所示,Regex最常用于需要安全校验的情况。当开发人员需要匹配URL或通过某些文本进行解析或提取某些信息(例如yyyy-mm-dd的日期格式)时,也可以用正则来实现该功能。正则表达式无处不在!
正则表达式看起来似乎非常难以理解,有的人并以此为不去学习Regx的理由。但没必要这样,学习正则表达式是一个难度渐增的过程,今天学习的基础知识就是一个起点
0x09 参考文章和资源
Regex Cheatsheet
Regular Expression Editor
Regex Crossword Puzzle
MDN Documentation for Regex 这个非常棒
RegEx Golf
原文链接:《Understanding Regex 101》
翻译备注:在某需求驱使下看到此文,虽然有点基础,但是笔者为了练习翻译,与此同时也希望能够对学习正则语法的同学有所帮助。
0xFF 补充:常用的正则语法
符号 | usage | 说明 |
---|---|---|
* | a* | 前一个元素0个或多个,贪婪 |
? | a? | 前一个元素0个或1个 |
+ | a+ | 前一个元素1个或多个 |
[] | [abc] | 前一个元素是a或b或c |
() | (abc) | 捕获“abc”,Capture everything enclosed |
\ | \n | 转义其后字符 |
^ | [^a-z] | 前一个字符不是a~z中任意一个字符 |
\n | Newline | |
\t | Tab | |
\0 | Null character | |
- | [a-z] | A character in the range a~z |
\s | Any whitespace character | |
\S | Any non-whitespace character | |
\d | Any digit | |
\D | Any noe-digit | |
\w | Any word character [0-9a-zA-Z] | |
\W | Any none-word character | |
(?:..) | Match everything enclosed, but won't capture | |
| | (a|b) | Match either a or b |
{} | a{1} ,a{2,} ,a{3,5} | Exactly 1 of a, 2 or more of a, between3 and 5 of a |
最后送大家一个键盘(复制后在Console运行👀):
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`
❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更多高质量文章
关注公众号“DYBOY”,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔!