学习正则表达式以及其使用方法。
此文是翻译的正则表达式基础学习的文章,萌新手打翻译
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)// 再加上多行标志,则会比较每一行
另外作为补充,当需要多个字符集进行匹配的时候,还有另外三个标志可以提供帮助
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 |
更多语法,请参考中文版的MDN:正则表达式
版权声明:《 [翻译]学习正则表达式 》为DYBOY原创文章,转载请注明出处!
最后编辑:2020-9-19 15:09:46
2020-09-22 17:31
function insertHtml(html) {
var sel, range;
if (window.getSelection) {
// IE9 或 非IE浏览器
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}