JS 正则表达式^$详解,^与$同时写表示什么意思?

更新日期: 2019-12-19阅读: 2k标签: 正则

对于初学正则的同学来说,^$这两个看似简单的字符却在使用中总让匹配结果超出我们的预期,^什么时候表示行首什么时候表示反义?^ $两个一起写表示什么含义?今天我们就来详细聊聊这两个字符。


关于^与$

先解释^与$概念,很简单的两句话,先留个印象。

^ 脱字符:匹配开头,若存在多行匹配多行的行头。

$ 美元符:匹配尾部,若存在多行匹配多行的尾部。

我们知道正则是一种匹配模式,要么匹配字符,要么匹配位置。这里我们得从这两种匹配情况分别解释这两个字符。


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,字符的开头结尾被固定死了。一般在验证表单输入是否正则,我们都会加上^$。


链接: https://www.fly63.com/article/detial/6949

javascript较全常用的表达正则验证,js中采用test()方法

正则表达式是一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。本文整理了JS较全且实用正则表达式。

js使用正则过滤emoji表情符号

手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错,原因是:UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去。

一次记住js的6个正则方法

来记忆一些常用特殊字符,这个是正则本身的范畴了,是不是总觉得记不住?其实我也记不住,每次都是去搜索和online验证来完成一些任务。我也困恼过,其实最后还是因为自己写的少吧,唯手熟尔。。。

密码强度的正则表达式(JavaScript)总结

本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定。

JavaScript判断字符串包含中文字符的方法总结

JS中判断一个字符串是否包含汉字,下面就介绍2中常用的实现方法:用正则表达式判断、用 Unicode 字符范围判断。

js常用正则表达式验证大全(整理详细且实用)

正则表达式对象用来规范一个规范的表达式,本文讲的是JS正则表达式大全(整理详细且实用),包括校验数字、字符、一些特殊的需求等等

javascript 正则表达式之分组与前瞻匹配详解

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识。分组匹配:捕获性分组匹配、非捕获性分组匹配。前瞻匹配:正向前瞻匹配: (?=表达式) 后面一定要匹配有什么、反向前瞻匹配: (?!表达式) 后面一定不能要有什么

利用正则表达式去除所有html标签,只保留文字

后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字。利用正则表达式去除所有html标签,只保留文字

正则表达式后行断言 • 探索 ES2018 和 ES2019

先后行断言(Lookaround Assertion)是正则表达式中的一个构造,明确了当前位置的前后字符序列,但没有其他副作用。当前 JavaScript 唯一支持的 Lookaround Assertion 是 先行断言,其匹配当前位置接下来的字符序列

循环下的正则匹配?说说正则中的lastIndex

正则有一个属性叫lastIndex,它表示正则下一次匹配时的起始位置。一般情况下我们是使用不到它的,但在正则中包含全局标志g时,正则的test和exec方法就会使用到它

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!