假设\B
在前,比如
/\Babc/.test(‘111 abc’) // false
假设\B
在后,比如
/abc\B/.test(‘abc 111’) // false
转义字符\
由于正则表达式中很多字符有特殊含义,比如(
, )
, \
, [
, ]
, +
,如果你真的要匹配它们,必须加上转义符\
。
///.test(‘/’); // true
或 |
实现或的逻辑是比较简单的,正则表达式提供了|
。
要注意的是,|
隔断的是其左右的整个子表达式,而不是单个普通字符。
所以,
/^ab|cd|ef$/.test(‘ab’) // true
/^ab|cd|ef$/.test(‘cd’) // true
/^ab|cd|ef$/.test(‘ace’) // false
还要注意的是,|
具有从左到右的优先级,如果左侧的匹配上了,右侧的就被忽略了,即便右侧的匹配看起来更“完美”。
/a|ab/.exec('ab')
得到的结果是
[“a”, index: 0, input: “ab”, groups: undefined]
量词
==
?
匹配前面的子表达式零次或一次
匹配前面的子表达式一次或多次
*
–
匹配前面的子表达式零次或任意次
{n,m}
匹配前一个普通字符或者子表达式最少n次,最多m次
{n,}
匹配前一个普通字符或者子表达式最少n次
{n}
匹配前一个普通字符或者子表达式n次
贪婪
–
贪婪匹配是尽可能多地匹配,如果能满足匹配条件,就尽可能侵占后面的匹配规则。
贪婪匹配是默认的,比如/\d?/
会尽可能地匹配1
个数字,/\d+/
和/\d*/
会尽可能地匹配多个数字。
举个例子,
‘123456789’.match(/^(\d+)(\d{2,})$/)
以上结果中捕获组的第一项是"1234567"
,第二项是"89"
。
为什么会这样呢?因为\d+
是贪婪匹配,尽可能地多匹配,如果没有后面的\d{2,}
,捕获组第一项会直接是"123456789"
。但是由于\d{2,}
的存在,\d+
会给\d{2,}
留个面子,满足它的最小条件,即匹配2个数字,而\d+
自己匹配7个数字。
非贪婪
非贪婪匹配是尽可能少地匹配,一般是在量词?
, +
, *
之后再加一个?
,表示尽可能少地匹配,把机会留给后面的匹配规则。
还是拿贪婪模式中那个例子举例,稍微改一下,\d+
换成非贪婪模式\d+?
。
‘123456789’.match(/^(\d+?)(\d{2,})$/)
捕获组的第一项是"1"
,第二项变成了"23456789"
。
为什么会这样呢?因为在非贪婪模式下,会尽可能少匹配,把机会留给后面的匹配规则。
分组
==
分组在正则中是一个非常有用的神器,用圆括号()
来包裹的内容就是一个分组,在正则中是这种表示形式:
/(\d*)([a-z]*)/
捕获组()
利用捕获组,我们能捕获到关键字符。
比如
var group = ‘123456789hahaha’.match(/(\d*)([a-z]*)/)
分组1用于匹配任意个数字,分组2用于匹配任意个小写字母。
那么我们在match
方法的返回结果中就可以取到这两个分组匹配的结果,group[1]
是"123456789"
,group[2]
是"hahaha"
。
我们还可以在RegExp
的静态属性$1~$9
取得前9
个分组匹配的结果。RegExp.$1
是"123456789"
,RegExp.$2
是"hahaha"
。但是RegExp.$1~$9
是非标准的,虽然很多浏览器都实现了,尽量不要在生产环境中使用。
这种捕获组的应用在字符串的replace
方法中也是类似,不过在调用replace
方法时,我们需要通过$1
, $2
, $n
这种形式去引用分组。
“123456789hahaha”.replace(/(\d*)([a-z]*)/, “$1”) // “123456789”
利用$1
,我们就可以把源字符串替换为分组1匹配到的字符串,也就是"123456789"
。
非捕获组(?😃
非捕获组是不生成引用的分组,它也由圆括号()
包裹起来,不过圆括号中起头的是?:
,也就是/(?:\d*)/
这种形式。
还是改造下之前的例子来看下:
var group = ‘123456789hahaha’.match(/(?:\d*)([a-z]*)/)
由于非捕获组不生成引用,所以group[1]
是"hahaha"
;同样地,RegExp.$1
也是"hahaha"
。
看到这里,我不禁也产生了疑问,既然我不需要引用非捕获组,那么非捕获组的意义何在?
思考了一阵后,我觉得非捕获组大概有这么一些优势和必要性:
-
与捕获组相比,非捕获组在内存上开销更小,因为它不需要生成引用
-
分组是为了方便加量词。我们虽然可以不生成引用,但是如果没有分组,就不太方便加给一组字符加量词。
‘1a2b3c…’.match(/(?:\d[a-z]){2,3}(.+)/)
引用\num
正则表达式中可以引用前面的具有引用的分组,通过\1
,\2
这种形式可以实现引用前面的子表达式。
比如,我要匹配一个字符串,要求符合这样的规则:
字符串由单引号或双引号开头和结束,中间内容可以是数字,单词。
那我要保证的是首尾要么是单引号,要么是双引号,所以我的pattern写法可以是:
var pattern = /^(["'])[a-z\d]*\1$/
pattern.test(“‘perfect123’”) // true
pattern.test(‘“1perfect2”’) // true
零宽断言
====
说实话,一开始看零宽断言的概念和解释时,我真的完全不懂在说什么。
-
零宽正向先行断言(?=)
-
零宽负向先行断言(?!)
-
零宽正向后行断言(<?=)
-
零宽负向后行断言(<?!)
后面把词汇拆开来看,加入自己的理解,就慢慢有点懂了。
-
零宽:zero width,断言作为必要条件进行匹配,但是不体现在匹配结果中。
-
正向:positive,断言中的字符必须被匹配。
-
负向:negative,断言中的字符不能被匹配。
-
先行:lookahead,必须满足前方的条件,条件在前方,前方等同于右侧。
-
后行:lookbehind,必须满足后方的条件,条件在后方,后方等同于左侧。
零宽正向先行断言(?=)
约束目标右侧必须存在指定的字符。
/123(?=a)/.test(‘123a’) // true
上面的例子约束了123
右侧必须有a
。
零宽负向先行断言(?!)
约束目标右侧不能存在指定的字符。
/123(?!a)/.test(‘123a’) // false
上面的例子约束了123
右侧不能有a
,否则结果为false
。
零宽正向后行断言(<?=)
约束目标左侧必须存在指定的字符。
/(?<=a)123/.test(‘a123’) // true
上面的例子约束了123
左侧必须有a
。
ES2018才支持零宽后行断言,具体见TC39 Proposals[2]
零宽负向后行断言(<?!)
约束目标左侧不能存在指定的字符。
/(?<!a)123/.test(‘a123’) // false
上面的例子约束了123
左侧不能有a
,否则结果为false
注:ES2018才支持此特性。
RegExp
======
说到正则表达式,就不得不提到RegExp
对象。下面我们从原型方法,静态属性,实例属性等几个方面来认识下RegExp
对象。
原型方法
RegExp.prototype.test
test()
是我们平时最常用的正则方法,test()
方法执行一个检索,用来查看正则表达式与指定的字符串是否匹配,返回一个布尔值true
或false
。
如果正则表达式设置了全局标志g
,执行test()
会改变RegExp.lastIndex
属性,用于记录上次匹配到的字符的起始索引。连续执行test()
方法,后续的执行将会从lastIndex
处开始匹配字符串。这种情况下,如果test()
无法匹配到结果,lastIndex
就会重置为0
。
RegExp.prototype.exec
exec()
相较于test()
能得到更丰富的匹配信息,其结果是一个数组,数组的第0个元素是匹配到的字符串,第1~n个元素是圆括号()
分组捕获的结果。
结果数组是数组,数组也是对象类型数据,所以结果数组还有两个属性分别是index
和input
-
index
代表匹配到的字符位于原始字符串的基于0的索引值 -
input
则代表原始字符串
与test()
一致,如果正则表达式设置了g
标志符,那么每次执行exec()
都会更新lastIndex
。
静态属性
静态属性不属于任何一个实例,必须通过类名访问,这一点在上一篇「思维导图学前端」6k字一文搞懂Javascript对象,原型,继承已经提到过。
RegExp.$1-$9
用于获取分组的匹配结果,RegExp.$1
获取的是第一个分组的匹配结果,RegExp.$9
则是第九个分组的匹配结果。
具体见上文分组-捕获组一节。
实例属性
lastIndex
lastIndex
,从语义上理解,就是上次匹配到的字符的起始索引。要注意的是,只有设置了g
标志,lastIndex
才有效。
当还未进行匹配时,lastIndex
自然是0
,代表从第0
个字符串开始匹配。
lastIndex
会随着exec()
和test()
的执行而更新
var reg = /\d/g
reg.lastIndex // 0
reg.test(‘123456’)
reg.lastIndex // 1
reg.exec(‘123456’)
reg.lastIndex // 2
lastIndex
可以手动修改,也就是说,你可以自由控制匹配的细节。
flags
flags
属性返回一个字符串,代表该正则表达式实例启用了哪些标志。
var reg = /\d/ig
reg.flags; // “gi”
global
global
是布尔量,表明正则表达式是否使用了g
标志。
ignoreCase
ignoreCase
是布尔量,表明正则表达式是否使用了i
标志。
multiline
multiline
是布尔量,表明正则表达式是否使用了m
标志。
source
source
,意为源,是正则表达式的字符串表示,不会包含正则字面量两边的斜杠以及任何的标志字符。
String涉及正则的方法
=============
String.prototype.search
search()
方法用正则表达式对字符串对象进行一次匹配,结果返回一个index
,代表正则表达式在字符串中首次匹配项的索引。如果无法匹配,则返回-1
。
search()
方法的参数必须是正则表达式,如果不是也会被new RegExp()
默默转换为正则表达式对象。
“123abc”.search(/[a-z]/); // 3
String.prototype.match
字符串的match
方法用于检索字符串,和正则表达式的exec
方法是相似的。match
方法的参数也要求是正则表达式。match
方法返回一个数组。
与exec()
的不同点在于,如果match
方法传入的正则表达式带了标识g
,则将返回与完整正则表达式匹配的所有结果,但不会返回捕获组。
“123abc456”.match(/([a-z])/g);
// 返回[“a”, “b”, “c”]
var reg = /([a-z])/g;
reg.exec(‘123abc456’);
// 返回数组[“a”, “a”, index: 3, input: “123abc456”, groups: undefined]
reg.exec(‘123abc456’);
// 返回数组[“b”, “b”, index: 4, input: “123abc456”, groups: undefined]
reg.exec(‘123abc456’);
// 返回数组[“c”, “c”, index: 5, input: “123abc456”, groups: undefined]
如果match()
方法传入的正则表达式不带标志g
,表现与exec()
方法一致,只会返回第一个匹配结果和分组捕获到的结果。
如果此时表达式中有圆括号分组,在match()
的结果数组中也是可以获取到这些分组匹配的结果的,这一点在捕获组中也有提到。
“123abc456”.match(/([a-z])/);
// 返回[“a”, “a”, index: 3, input: “123abc456”, groups: undefined]
RegExp.$1; // “a”
String.prototype.replace
replace()
是字符串替换方法,它不要求第一个参数必须是正则表达式。如果第一个参数是正则表达式,并且包含分组,那么在replace()
的第二个参数中,可以通过"$1"
,"$2"
这种形式引用分组匹配结果。
“123456789hahaha”.replace(/(\d*)([a-z]*)/, “$1”) // “123456789”
String.prototype.split
split()
方法是字符串分割方法,也算平时用得很多的一个方法,但是很多人不知道它可以接受正则表达式作为参数。
假设我们得到这样一个不太规律的字符串"1,2, 3 ,4, 5"
,然后需要分割这个字符串得到纯数字组成的数组,直接使用split(",")
是不行的,而利用正则表达式作为分割条件就可以做到。
var str = “1,2, 3 ,4, 5”;
str.split(/\s*,\s*/);
// 返回 [“1”, “2”, “3”, “4”, “5”]
最后
==
正则表达式是一个非常重要却容易被忽视的知识点,在面试中也是一个频繁的考点,所以必须给予它足够的重视。经过上面的知识点梳理,相信能在后续的实战中胸有成竹,不慌不忙。
参考
[1]
正则表达式: https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215?fr=aladdin
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
[“1”, “2”, “3”, “4”, “5”]
最后
==
正则表达式是一个非常重要却容易被忽视的知识点,在面试中也是一个频繁的考点,所以必须给予它足够的重视。经过上面的知识点梳理,相信能在后续的实战中胸有成竹,不慌不忙。
参考
[1]
正则表达式: https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215?fr=aladdin
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-S0waLYNN-1715743868273)]
[外链图片转存中…(img-OxeEh6sq-1715743868273)]
[外链图片转存中…(img-Peyotf60-1715743868274)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!