JS正则表达式^$详解,^与$同时写表⽰什么意思?
对于初学正则的同学来说,^$这两个看似简单的字符却在使⽤中总让匹配结果超出我们的预期,^什么时候表⽰⾏⾸什么时候表⽰反义?^ $两个⼀起写表⽰什么含义?今天我们就来详细聊聊这两个字符。
关于^与$
先解释^与$概念,很简单的两句话,先留个印象。
^ 脱字符:匹配开头,若存在多⾏匹配多⾏的⾏头。
$ 美元符:匹配尾部,若存在多⾏匹配多⾏的尾部。
我们知道正则是⼀种匹配模式,要么匹配字符,要么匹配位置。这⾥我们得从这两种匹配情况分别解释这两个字符。
js中文正则表达式1.从匹配字符⾓度
当⽤于匹配字符时,^与$更多是作为匹配出精准结果的辅助条件,我们先看个简单的例⼦:
'123'.match(/\d/g);//[1,2,3]
很好理解,全局(注意结尾有个g)匹配单个任意数字,很明显1,2,3都符合条件,所以这⾥到了三个匹配结果;我们分别添加 ^ 与 $再看:
'123'.match(/^\d/g);//[1]
'123'.match(/\d$/g);//[3]
此时 ^\d 只能匹配到1,⽽ \d$ 只能匹配到3,你肯定就纳闷了,不对啊,我正则后⾯不是有个g表⽰全局匹配吗,怎么只匹配⼀个了呢?以^\d为例,此时的匹配条件其实是开头位置后的⼀个任意数字,\d$ 表⽰匹配结尾前的⼀个任意数字。开头和结果对于⼀个不换⾏的字符串都只有⼀个,所以⾃然只能到⼀个数字了,现在能理解前⾯所说的^$作为辅助条件的意思了吗。
那么我们现在将数字换⾏,再看:
'12\n34'.match(/^\d/mg);//[1,3]
'12\n34'.match(/\d$/mg);//[2,4]
由于存在换⾏,导致现在有两个开头位置和两个结尾位置(注意匹配中使⽤了m,表⽰换⾏匹配),所以匹配结果也变成了两个,不难理解吧。
2.从匹配位置⾓度
正则除了根据规则匹配对应的字符,还有⼀个强⼤的功能就是匹配位置。什么是位置呢?以字符 1234 为例,每个箭头都代表⼀个位置,其中第⼀个箭头的位置就是脱字符 ^,结果位置就是美元符$,如下图:
所以当我们在匹配位置时,^$也成为了我们需要匹配的结果,例如,我需要将 1234 ⾸尾位置加上花朵:
'1234'.replace(/^|$/g, '?');// "?1234?"
当然,在匹配位置时^与$也是帮助我们精确位置的辅助条件,⽐如常⽤的千位分隔符正则:
'12345678'.replace(/(?!^)(?=(\d{3})+$)/g, ',');// "12,345,678"
这段正则的意思,就是从右往左,每隔三位数字前⾯的位置替换成逗号,同时排除字段头部位置,因为当不排位开头位置,只要字符长度是三的倍数,就会导致头部也会出现逗号的尴尬局⾯,例如:
'123456789'.replace(/(?=(\d{3})+$)/g, ',');// ",123,456,789"
所以针对千位分隔符正则中的 ^ 与 $ ⽽⾔,^起到了排除开头位置的作⽤,⽽$起到了改变正则匹配的⽅向,由默认的从左到右变成了从右到左每隔三位的查。
3.反义字符组
^除了作为脱字符表⽰从头匹配,开头位置两个含义外,还能作为反义字符使⽤,例如,我想匹配除了123之外的任意字符:
/[^123]/.test(1); //false
/[^123]/.test(2); //false
/[^123]/.test(3); //false
/[^123]/.test(4); //true
这⾥[^123]就表⽰除了123之外的意思,那么我们怎么知道^什么时候表⽰反义,什么时候表⽰开头位置呢?很简单,因为当它只有放在字符组中时才叫反义字符组,所以当然是只有出现在[]中时才是反义的意思。
4.^与$同时出现在正则前后表⽰什么?
对于新⼿⽽⾔,^$同时出现确实有点误解⼈,毕竟我们前⾯说^表⽰从左到右,$能起到从右到左的作⽤,同时出现难道匹配左右夹击?其实同时写时只是限制字符的起点与终点,我们来看个例⼦:
/123/.test(' 123 '); //true
/^123$/.test(' 123 '); //false
第⼀个输出true,这是因为被检测的字段只要有123这三个字段就⾏了,不关⼼你123前后还有什么。⽽第⼆个我们利⽤^$限时了字符的两端,也就是说如果你test想为真,那么你的字符开头后⾯必须是1,结尾前⾯必须是3,字符的开头结尾被固定死了。⼀般在验证表单输⼊是否正则,我们都会加上^$。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论