[翻译]学习正则表达式

学习正则表达式以及其使用方法。

懵逼正则

此文是翻译的正则表达式基础学习的文章,萌新手打翻译

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。

  • gglobal(全局),其作用是将字符串中满足表达式的所有结果均返回。换句话说,不仅仅返回满足条件的第一项,而是返回所有存在的匹配项。参考上面的例子,现在我们把g标志添加到反斜杠的后边,就像这样,const regex = /A-Z/g,然后,上面的match()方法将返回所有满足pattern(大写字母)的字符数组。因此,先检查sentence,“The Cat in the Hat is not a cat.”,然后会返回三个大写字母的数组 ['T', 'C', 'H']

  • iinsensitive(不敏感),其作用是大小写不敏感。例如,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']

  • mmulti-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})+,是检查邮件格式的重要部分。这部分将匹配邮箱地址中的顶级域名,会匹配到域名中的后缀,例如comorgnet。首先会寻找到一个.,然后是2~3个无论大小写的英文字母。在这个例子中,将匹配到.edu

  • 最后是一个$符号,表明字符串结尾

这部分个人觉得作者说的有部份不符合规则,在第4步,该规则应该是会匹配到.school.edu

运行结果

这就是Regex!现在我们已经知道如何使用正则来校验邮箱地址。此外,你可以在正则表达式中使用中括号,标志符,量词来完善我们正则中可能没考虑到的极端用例。

0x08 总结

对于开发人员来说,学会Regex的知识应该非常有用。 如上所示,Regex最常用于需要安全校验的情况。 当开发人员需要匹配URL或通过某些文本进行解析或提取某些信息(例如yyyy-mm-dd的日期格式)时,也可以用正则来实现该功能。 正则表达式无处不在!

正则表达式看起来似乎非常难以理解,有的人并以此为不去学习Regx的理由。 但没必要这样,学习正则表达式是一个难度渐增的过程,今天学习的基础知识就是一个起点

0x09 参考文章和资源

原文链接: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:正则表达式

发表评论 / Comment

用心评论~

金玉良言 / Appraise
幻想家LV 2
2020-09-22 17:31
/*光标处插入html代码,参数是String类型的html代码,例子:"<p>猪头诺</p>"*/
    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);
        }
    }

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/blog.dyboy.cn/content/templates/dyblog/footer.php:56) in /www/wwwroot/blog.dyboy.cn/include/lib/view.php on line 23