当前位置: 首页 > Web前端 > HTML5

正则系列—JavaScript正则表达式基础语法巩固

时间:2023-04-05 15:04:44 HTML5

上一章内容:正则表达式实战知识复习前两章学习了正则表达式的入门技巧以及遇到正则需求时如何分析问题。还有一些正则表达式实战的场景讲解。本章内容偏理论。建议大家点击开头的链接进入前两章学习入门技巧,然后再阅读本章的内容,这样就不会那么迷茫了。我一直认为,工程师首先要学会做事,才能学会理解理论。先学理论再学做事的,一般都是纸上谈兵,一遇到实战就一头雾水。BasicGrammarConsolidation当正则表达式引擎根据正则模式匹配字符时,它会检查索引。RegExpconstructorJavaScript正则表达式的编写有两种方式:第二种方式比较常用。当一些replace替换涉及到变量时,可以使用第一种方式。如果后面的例子有这个需求,再说吧。1、下面的RegExp其实写法都是一样的,一个用“regular”,一个用/regular/。注意,使用字符串写法时,必须对特殊字符进行转义。varr=newRegExp("\\d+",'g')//r.test('123')true//或varr=newRegExp(/\d+/,'g')//r.test('123')true如果不对特殊字符进行转义,那么正则就是错误的,例如://我错了varr=newRegExp("\d+",'g')//r.test('123')false2,/regular/也可以直接使用/regular/的写法。/\d+/g.test('123')//true和RegExp相关的几个方法,compile(),exec(),test(),相比于search(),match(),replace(),split(),为了方便记忆,我称他们为“三妻四妾”。3wife是RegExp的原始方法,4concubine是字符串方法。1.原版3老婆不错,可以直接用正则表达式调用。varr=/2/r.compile(r)//重新编译regex,不常用r.exec('123')//获取regex匹配的字符位置r.test('123')//最流行的老婆,判断一个字符串是否符合某种规律,trueorfalse2,四妃和四妃不是RegExp的方法,而是string的方法。在控制台输入''.__proto__,可以在字符串原型中看到这4个方法,又因为都和正则表达式有关,所以被称为RegExp的4个妃子。varr=/2/'123'.search(r)//返回匹配字符的位置,范围0-n,不存在则返回-1。'123'.match(r)//返回一个数组,该方法常用于提取字符串中的某些字符。'123'.replace(r,'4')//最基本的用法是替换正则表达式匹配的字符串。还有一个高级用法,后面会讲到。'123'.split(r)//表示切掉字符串,这里切掉2,'123'变成["1","3"].//通常我们用它来切掉字符串中的空格或者回车,然后贴图渲染。'12\n3'.split(/[\s\n]/g).map(v=>v)//["1","2","3"].map()修饰符JavaScript有3个常用的修饰语,i,g,m,还有你可能经常看到g。'Aasb'.match(/a/i)//i表示忽略大小写,匹配第一个A'Aasb'.match(/a/ig)//如果要匹配所有a,需要加上去g全局搜索["A","a"]m:多行匹配,具体用法不懂元字“元”是元始天尊,“元字”是元始天尊制作的基本符文,使用这些基本符文可以组合成各种高级正则表达式。.:查找单个字符,换行符和行终止符除外。\w:查找字母和数字。\d:查找数字。\D:查找非数字字符。\s:查找空白字符。\S:查找非空白字符。\b:匹配单词边界。\B:匹配非单词边界。\n:查找换行符。\f:查找换页符。\r:查找回车。\t:查找制表符。\v:查找垂直制表符。这是对上面常用的元字符的解释,用于查找单个字符,换行符和行终止符除外。您可能知道换行符,但终止符是什么?在字符串的末尾,肉眼看不到的地方,有一个结束符号。在101网站上用/.*/测试可以看到'第一段\n第二段'.match(/./g)//["No.","One","Paragraph","No.","Second","Paragraph"]//使用.+后,匹配效果与分割切割相同。'FirstParagraph\nSecondParagraph'.match(/.+/g)//["FirstParagraph","SecondParagraph"]查找字母和数字'aA1'.match(/\w/g)//["a","A","1"]'aA1'.match(/\w+/g)//["aA1"]其他角色自己去101网站测试玩,很有意思。括号中的正则表达式我们经常看到[]、()、{}这几种括号穿插在正则表达式中,让人眼花缭乱。但其实质是非常简单易懂的。需要注意[^abc]中的^和/^abc$/的区别。[abc]:查找方括号之间的任意字符。[^abc]:查找任何不在方括号之间的字符。[0-9]:查找0到9之间的任意数字。([0-9]|\d):查找任意指定选项。[0-9]{1}:找一个数字一次。看几个例子例1:例2:例3:例4:量词量词表示时间。我们之前用过一些量词符号,比如+,?,*,{n,m},^x$,finally还有零宽度断言?=n,?!nn+:匹配任意包含至少一个的字符串名词n*:匹配任何包含零个或多个n的字符串。n?:匹配任何包含零或一个n的字符串。n{X}:匹配包含Xn序列的字符串。n{X,}:X为正整数。匹配前面模式n的至少X个连续出现。n{X,Y}:X、Y为正整数。匹配前面模式n的至少X次和最多Y次连续出现。n{X,}:匹配包含至少Xn个序列的字符串。n$:匹配任何以n结尾的字符串。^n:匹配任何以n开头的字符串。?=n:匹配紧跟指定字符串n的任意字符串。?!n:匹配任何没有紧跟指定字符串n的字符串。这段内容无法用文字描述清楚,请自行测试https://regex101.com,只有实践才能理解理论。当你练习足够多的时候,你会发现这些量词不需要刻意去背,手写就可以了。综上所述,正则表达式理论的知识点很多。这一章的内容就像读天上的书一样。最重要的是找到感觉,就像刚开始学react,vue,angular的时候,根本找不到方向。慢慢的,写了很多,突然觉得。regex还行,没有太多复杂的概念,就是符号多了一点,常用的能背下来。复杂的符号就上网搜索吧,比如汉字的正则化,实在想不起来了。..常规系列文章已经整理到github:https://github.com/hyy1115/Re...