前言
大部分人都觉得这块比较杂乱(我也是这样觉得的 (✿◡‿◡))。毕竟元字符太多了,看起来没有系统性,不好记 。所以本文就不说那么多的 官方的话,咱就用大白话聊聊来正则,为了加强大家的记忆,在文中做了三次的小结,用来加深大家的记忆。本文是属于js正则文章中的一篇非常基础的文章,后期会继续更新的,文章中有不足的地方还希望大佬们多指点(本人菜的抠脚),如果觉得这篇文章对您有帮助的话,还希望您能够给文章点个赞,
更多技术文章,大家可以关注公众号,一起学前端
什么是正则表达式
正则表达式(RegExp):就是一种用来处理字符串的一种规则。
正则 说白了就是一条规则,用不同的符号代表着不同的含义去做一些匹配模式 目标就是字符串 不是匹配字符就是匹配字符的位置
创建正则表达式
JavaScript通过内置对象RegExp
支持正则表达式。有两种方法实例化该对象:构造函数
和 字面量
接下来咱就聊聊如何使用这里两种方式去创建正则表达式
构造函数的方式
RegExp
是一个对象,和Date一样都是对象 ,在使用的时候需要 我们来 new一下来给对象进行实例化
let reg = new RegExp();
//有两个参数,第一个参数,是正则表达式的主体(我们写的正则表达式)
// 第二个参数,是修饰符(可选的)
请看下面的小案例:
let str='My name is symbol Lu';
let reg =new RegExp("a");//最简单的正则表达式,将匹配字母a
let res=reg.test(str);//test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log(res);//true
在上面的代码中,使用了正则去匹配了字母 a
并且使用了 RegExp
对象中的 test()
方法去检索 字符串中是否有指定的字符 a
,在字符串 My name is symbol Lu
中是含有字符 a
所以返回了 true
。
明白了 RegExp
对象使用一个参数的案例,接下看看使用两个参数的案例:
let str='My name is symbol Lu';
let reg=new RegExp("A","i");//第二个参数里面的i 就是一个修饰符,表示匹配时不分大小写
let res=reg.test(str);
console.log(res);//true
这个案例是上一个案例的升级,我们使用了 RegExp
对象中的第二次参数(修饰符),具体啥是修饰符,咱们下面再聊哈不要着急哈,let reg=new RegExp("A","i");
这句代码的 第二个参数 i
就是一个修饰符,它表示的是 匹配时不分大小写
(也就是 a和A 是一样的),上面的字符串中 有 a
正则中的是 A
由于使用了 修饰符i
所以a
和 A
也就是一样的啦,所以返回的是 true
。
字面量方式
它的语法如下:
let reg=/pattern/fages;
//这是他的语法格式,其中的pattern 就对应着使用构造函数方式中的第一个参数(正则表达式主体)
//fages对应着构造函数方式中的第二个参数(修饰符)
接下来,我们使用字面量的方式,再完成上面构造函数的方式的两个小案例,来体验一下它们直接的异同
let str='My name is symbol Lu';
let reg =/a/;//最简单的正则表达式,将匹配字母a
let res=reg.test(str);//test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log(res);//true
let str='My name is symbol Lu';
let reg =/A/i;//最简单的正则表达式,将匹配字母a
let res=reg.test(str);//test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log(res);//true
那这两种方式还有什么区别呢???
- 在 JS 中,正则表达式的两种声明方式对于
\d
、\D
(后面会聊的哈?)之类的匹配模式中的区别
构造函数的方式:需要进行转义,如:let reg=new RegExp("\\d");
字面量的方式:不需要转义,如:let reg=/\d/;
- 各自的优点
构造函数的方式:支持字符串拼接,支持变量,更加灵活,如:
let str="dsf12345678fdfa123456hggf123";
let variable='{2,6}';
let reg=new RegExp("\\d"+variable);
let res=str.match(reg);
console.log(res)
//Tips:这里只是举个例子,可以这样去使用,大家具体的使用还是根据自己的业务需求进行使用
字面量的方式:对于固定的表达式,书写起来方便快捷、更加直观。如:let reg=/\d{6}/
Tips:区别里面的举例中的正则看不懂没关系,下面会聊的,这里只是举个栗子?
修饰符
在上面的案例中,我们使用了 修饰符,那修饰符究竟是干什么用的呢??
其实修饰符的作用就是 对匹配过程进行限定 ,常用修饰符呢有三种(其他的修饰符下篇文章再聊),分别是 i
g
m
他们可以同时出现,并且没有前后顺序之分 (也就是 gi
和 ig
是一样的)
修饰符 | 说明 |
---|---|
i | ignoreCase 忽略大小写匹配 |
g | global 全局匹配,即是匹配一个后继续匹配,直到结束 |
m | multiline 多行匹配,即是遇到换行后不停止匹配,直到结束 |
RegExp 对象的方法
上面也聊了,正则是一个对象,对象里面有方法, RegExp
对象中常用的有 3 个方法:test()
、exec()
以及 compile()
。
test()
test()
方法检索字符串中的指定值。返回值是 true
或 false
。
let str='My name is symbol Lu';
let reg =/a/;//最简单的正则表达式,将匹配字母a
let res=reg.test(str);//test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log(res);//true
我们要检索的字符串 My name is symbol Lu
中含有 我们指定的字符串 a
所以返回了 true
exec()
exec()
方法检索字符串中的指定值。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null
let str='My name is symbol Lu';
let reg =/z/;
let res=reg.exec(str);
console.log(res);//null
我们要检索的字符串 My name is symbol Lu
中不含有 我们指定的字符串 z
没有找到匹配 所以返回了 null
let str='My name is symbol Lu and I love to write code';
let reg =/I/g;//回顾一下修饰符(加深一下印象)
let res=reg.exec(str);
console.log(res);
![b3ef419475549271c121bcad5b846be0.png](https://i-blog.csdnimg.cn/blog_migrate/23ccb6821d25cf039ce38a8013eab0c1.png)
我们在字符串 My name is symbol Lu and I love to write code
中全局检索 指定的字符 I
字符串中含有 I
所以返回 匹配结果的数组
compile()
compile()
方法用于改变 RegExp
。可以改变检索模式,也可以添加或删除第二个参数。
let str='My name is symbol Lu and I love to write code';
let reg =/I/g;
console.log(reg.test(str));//true
reg.compile("W");
console.log(reg.test(str));//false
由于字符串中存在 "I",而没有 "W",所以第一次输出的是true第二次输出的是false
在字符串 My name is symbol Lu and I love to write code
中第一次检索的字符是 I
所以第一次输出的是 true
,接着 使用 reg.compile("W");
对正则表达式中要检索的字符更改为了 W
然而 字符串中没有字符W
所以第二次输出的结果是 false
。
聊了这么久,咱还没上正菜,还没开始js正则中的那些规则呢,等不及了,稍等一下,马上开始哈
字符串中可以使用正则的方法(常用)
match()
match()
方法使用正则表达式对字符串进行查找 并将查找的结果作为数组返回
let str="132dfdf465gaer465fgds654gfa";//随便来个字符串
let reg=/\d+/g;//什么是 \d 下面的案例中有讲解哦,这里可以先记住,它表示的是数字
let res=str.match(reg);
console.log(res);//["132", "465", "465", "654"]
使用match()
方法 对字符串 132dfdf465gaer465fgds654gfa
中 出现一次或多次的数字进行全局(修饰符g) 查找,将查找的结果以数组的形式返回。
下面是没有使用 修饰符g 的代码:
let str="132dfdf465gaer465fgds654gfa";
let reg=/\d+/;
let res=str.match(reg);
console.log(res)
//结果:["132", index: 0, input: "132dfdf465gaer465fgds654gfa", groups: undefined]
没有使用修饰符g 进行全局查找,也就是,只要有一次查找到 满足正则条件的字符,就会结束查找,在上面的案例中,132
就是一个出现一次或多次的的 数字,满足查找的条件 所以就结束了正则查找 ,将查找到的结果以数组的形式返回。
通过这两个的案例对比,大家有没有觉得对 修饰符g 的理解更深一步了,哈哈
replace()
replace() 方法通过用 newChar 字符替换字符串中出现的所有 oldChar 字符,并返回替换后的新字符串
let str="SymbolLu";
let reg=/Lu/;
let res=str.replace(reg,"卢");
console.log(res)//Symbol卢
对字符串 SymbolLu
使用正则 /Lu/
进行匹配 Lu
字符 ,将 匹配到的字符 Lu
使用 字符 卢
进行了替换,
所以输出的结果 就是 Symbol卢
。
聊完了 正则的创建两种方式和一些RegExp对象常用的方法,那么接下来就是,正则的一些规则了,接着往下看?????。。。
一些常见的规则
这些规则就是一些特殊的字符组成的规则,大家是不是总觉得记不住,可能这也是大家觉得正则难的一些原因之一了吧,没关系, 咱们接着往下看一点点的深入浅出(有点装逼了
上栗子?
let str='521Symbol卢2121';//自恋一下,哈哈?
//再回顾一下,创建正则的两种方法,大家根据喜好自行选择哈
//let regExp=new RegExp('[0-9]+','g');
let regExp =/[0-9]+/g;
//再回顾一下,加深印象 math 方法以数组的形式返回 满足正则表达式匹配的内容
console.log(str.match(regExp));
//结果为["521", "2121"]
上面例子?中的 正则 [0-9]+
里面的 [0-9]
表示的是 匹配从0到9的任意一个数字 也可以用 \d 表示
+
是一个量词 (啥是量词咱们后面再聊),表示至少出现一次,或多次
知道了他们的含义, 那我们上面的例子中的 /[0-9]+/g
匹配的就是至少出现一次或者多次的数字,从全局进行匹配 ,在第一次匹配的时候 匹配到得到结果是 521
第二次匹配到的结果是 2121
(不要忘记这里我们使用的是 g
全局匹配哦) 。
这个?吃完了,咱们再来个?
let str="1232546qwe1323147";//随便来个字符串☺
console.log(str.match(/[0-9]+/g));
//结果为["1232546", "1323147"]
//来说出你的结果 ,看看和下面的结果一样嘛,
console.log(str.match(/123/g));
console.log(str.match(/12+/g));
console.log(str.match(/[123]/g));
思考中。。。。。(ˇˍˇ) 想~
想好了,那咱就上结果。。。
console.log(str.match(/123/g));//["123"]
console.log(str.match(/12+/g));//["12"]
console.log(str.match(/[123]/g));//["1", "2", "3", "2", "1", "3", "2", "3", "1"]
在字符串 1232546qwe1323147
中使用 str.match(/123/g)
只是将 匹配的字符 123
(字符串的开头),可以匹配的到,所以返回的结果是 ["123"]
; str.match(/12+/g)
是对字符串进行了全局的匹配 匹配出现一次或多次的字符 12
由于字符中的 自由开头的 12
符合匹配的规则 所以返回的结果是 ["12"]
;
console.log(str.match(/[123]/g));
这个的结果感觉和你的答案不一样,没关系,咱就来聊聊它
这里面的 [ ]
表示的是 大括号里面的 任意一个字符
能够匹配上,都是可以的
所以里面的 1 2 3 任意一个匹配上了 就会输出他的结果,进行的全局的匹配
所以结果是 : ["1", "2", "3", "2", "1", "3", "2", "3", "1"]
任意字符出现就可以匹配上,那我不让它出现(感觉和取反差不多)怎么办,也就是排除它,
上例子:
let str="asd42134dfjasdjfi3458fasdn";//还是随便来个字符串
//再回顾一下,加深印象 math 方法以数组的形式返回 满足正则表达式匹配的内容
console.log(str.match(/[^0-9]+/g));
//结果 ["asd", "dfjasdjfi", "fasdn"]
排除 [^]
大括号里面的任意字符都不能出现
上面的字符串 是有 字母和数组组成的 , [0-9]
表示的是数字 那 [^0-9]
表示的就是 不是数字 ,
那 [^0-9]+
这个正则就是 多次不是数字的字符 我们使用了全局匹配 所以就得到了上面的结果
好了,到这里,我们对上面的内容做个小结,再加深一下印象。
小结----------印象+1
- 创建正则的两种方式:
//1.构造函数的方式
let reg = new RegExp("A","i");
//有两个参数,第一个参数 是正则表达式的主体(我们写的正则表达式)
// 第二个参数,是修饰符(可选的)
//2.字面量的方式
let reg =/A/i;//最简单的正则表达式,将匹配字母a
//let reg=/pattern/fages;
//这是他的语法格式,其中的pattern 就对应着使用构造函数方式中的第一个参数(正则表达式主体)
//fages对应着构造函数方式中的第二个参数(修饰符)
- 修饰符--------它们没有前后顺序之分
可以同时出现,并且没有前后顺序之分 (也就是 gi
和 ig
是一样的)
修饰符 | 说明 |
---|---|
i | ignoreCase 忽略大小写匹配 |
g | global 全局匹配,即是匹配一个后继续匹配,直到结束 |
m | multiline 多行匹配,即是遇到换行后不停止匹配,直到结束 |
- RegExp 对象的方法
- test() 方法检索字符串中的指定值。返回值是 true 或 false。
- exec() 方法检索字符串中的指定值。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
- compile() 方法用于改变 RegExp 可以改变检索模式,也可以添加或删除第二个参数。
- String中可以使用正则的常用方法
- match() 方法使用正则表达式对字符串进行查找 并将查找的结果作为数组返回。
- replace() 方法通过用 newChar 字符替换字符串中出现的所有 oldChar 字符,并返回替换后的新字符串。
- 部分规则
[0-9]
: 匹配从0到9的任意一个数字 也可以用\d
表示+
:是一个量词
(啥是量词咱们后面再聊),表示至少出现一次,或多次[ ]
:表示的是 大括号里面的任意一个字符
能够匹配上,都是可以的[^]
:大括号里面的任意字符都不能出现 与[ ]
是相反的
量词
量词 ,顾名思义就是 匹配数量的 ,也就是一个(或者是一组) 字符出现的次数,可能是零次,一次,多次,n次等等。接下来咱们就从少到多的用一些? 来聊聊量词
例子
let str="1232546qwe1323147";
let reg=/8*/g;
//let reg=/8{0,}/g;
//加深一下印象 test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log(reg.test(str));//true
这里我们使用到了量词 *
:表示的是 零次到(或)多次,也可以使用 {0,}
来代替 ,在我们例子中 字符串 1232546qwe1323147
中没有 8
也就是说 8
在字符串中出现了 零次 所以在 使用 test()
的时候 返回的结果是 true
接着来例子?
let str="1232546qwe1323147";
let reg=/7?/g;
// let reg=/7{0,1}/g;
console.log(reg.test(str));//true
这里我们使用到了量词 ?
:表示的是 零次到(或)一次,也可以使用 {0,1}
来代替 ,在我们例子中 字符串 1232546qwe1323147
中 7
出现了 1次 ,满足 零次到(或)一次
所以在 使用 test()
的时候 返回的结果是 true
例子
let str="1232546qwe1323147";
let reg=/8+/g;
// let reg=/8{1,}/g;
console.log(reg.test(str));//false
这里我们使用到了量词 +
之前的例子已经使用过了,现在再温故知新一下哈:它表示的是 一次到(或)多次,也可以使用 {1,}
来代替 ,在我们例子中 字符串 1232546qwe1323147
中没有 8
也就是说 8
在字符串中出现了 零次,不满足 一次到(或)多次 所以在 使用 test()
的时候 返回的结果是 false
我们已经聊了 零次到多次,零次到一次 和 一次到多次,能不能确定他的次数呢??
答案当然是可以的啦!直接上例子
let str="1232546qwe132311147";
let reg=/1{3}/g;
console.log(reg.test(str));//true
{n} 匹配确定的 n 次,如{18},连续匹配18次 连续匹配
动手尝试
{n,} 至少匹配n 次,如{1,},代表最少匹配1次
{n,m} 最少匹配 n 次且最多匹配 m 次,如{1,7}代表最少匹配1最多匹配7次
这两个量词的小案例,大家可以自行的写例子去理解一下(多尝试,多练习哦)
范围类
这个是我的一个记忆规则 表示的一个一个的范围 比如0~9是一个范围 a~z也是一个范围
在js的正则中 [0-9]
表示的是 数字 它是 [0123456789]
的一个简写也可以使用 \d
表示,聪明的我们,自然也能联想到了字母
a~z这个范围的正则 那就是 [a-z]
是小写的英文那字母 abcd.....z ,那大写的A~Z也是同样的道理了,没错就是它
[A-Z]
,其实还有一个就是 [a-zA-Z]
就是小写的a ~ z和大写的A ~ Z
let str="45drfgadf44545g455sd454fgs44542df415g445";//又是一个随机的字符串
let reg=/[0-9]+/g;
//let reg=/\d+/g;
//再回顾一下,加深印象 math 方法以数组的形式返回 满足正则表达式匹配的内容
let res=str.match(reg);
console.log(res);// ["45", "44545", "455", "454", "44542", "415", "445"]
/[0-9]+/g
对字符串 45drfgadf44545g455sd454fgs44542df415g445
中出现一次或多次的数字 进行全局匹配([0-9]
数字,+
一次或多次 , g
全局匹配), str.match(reg)
将匹配到的结果 以数组的形式返回,所以得到的结果是 ["45", "44545", "455", "454", "44542", "415", "445"]
接着上栗子?
let str="546dfdsSFGDSF1232qweai爱前端";
let reg=/[0-9a-zA-Z]+/g;
//回顾一下,replace() 将匹配到的字符进行替换 返回新的字符串
let res=str.replace(reg, 'Symbol卢');
console.log(res);//Symbol卢爱前端
/[0-9a-zA-Z]+/g
对 数字,字母(大小写) 出现 一次或多次 进行全局匹配,所以在字符串 546dfdsSFGDSF1232qweai爱前端
中 匹配到的字符就是 546dfdsSFGDSF1232qweai
,接着 str.replace(reg, 'Symbol卢');
将匹配到的字符替换成了 Symbol卢
所以输出的结果就是 Symbol卢爱前端
小结----------印象+2
----------------量-----词-----------
* 匹配前面的子表达式零次或多次,0到多,可以使用{0,}代替
+ 匹配前面的子表达式一次或多次,1到多,可以使用{1,}代替
? 匹配前面的子表达式零次或一次,0或1,可以使用{0,1}代替
{n} 匹配确定的 n 次,如{18}, 连续 匹配18次
{n,} 至少匹配n 次,如{2,},代表最少匹配2次
{n,m} 最少匹配 n 次且最多匹配 m 次,如{1,7}代表最少匹配1最多匹配7次
---------------范-------围---------类------------
[0-9] 表示数字 可以使用 \d 表示
[a-z] 表示小写的英文字母 a~z
[A-Z] 表示大写的英文字母 A~Z
[a-zA-Z] 表示英文字母的 a~z和A~Z
[0-9a-zA-z] 表示数字和英文字母
边界类
边界 就是临界值差不多的意思,开头,结尾这些 也有些同学喜欢称之为 定位类 和位置有关 ,接下来咱们要聊的边界类就是 开头和结尾了
开头
^
匹配输入字符串的开始位置(以哪个字符或哪些开始)
直接上例子
let tel='17811114455';//为了隐私,中间的部分使用1替换了?
//一个经典的案例,验证手机号是否合法
let reg=/^1[34578]\d{9}/g;
if(reg.test(tel)){test() 方法检索字符串中的指定值。返回值是 true 或 false
console.log("手机号合法")
}else{
console.log("手机号不合法")
}
//结果:手机号合法
/^1[34578]\d{9}/g
以 1
开头(手机号是以 1
开头的) ,第二的字符是 3,4,5,7,8 中的任意一个,后面有数字
有 9
个,(总共11位)进行全局的匹配,字符串 17811114455
满足 1
开头,第二个字符为 7
也满足 3 4 5 7 8中的任意一个,后面的9位字符也是 数字,所以 reg.test(tel)
的结果是 true
,输出的结果是 手机号合法
结尾
$
匹配输入字符串的结束位置(以哪个字符或哪些结束)
例子:
let fileName='68468fgdsdfs.jpg';
let reg=/\.jpg$/g;//需要转意 . 是通配符(后面会聊的) 所以要进行转意
if(reg.test(fileName)){
console.log("图片合法")
}else{
console.log("图片不合法")
}
//结果:图片合法
/\.jpg$/g
匹配的是 以 .jpg
结尾( $
) 的 字符 ,由于 .
是一个通配符(规则里面的一种哦) 所以这样要使用 \
对 .
进行转意,让它表示的就是一个 点( .
) ,而不是通配符 ;字符串 68468fgdsdfs.jpg
满足 .jpg
结尾 所以 reg.test(fileName)
的结果是 true
,输出的结果是 图片合法
其实在 边界类里面 还有两个 就是 单词边界和非单词边界,为了方便记忆,这里将他们放在了 预定义类中 再聊
预定义类
数字 digital
在之前 上面的内容我们知道 [0-9] 表示的是数字,可以使用 \d 表示
[^ ] 表示的是大括号里面相反的 那 [ ^ 0-9 ] 表示的就是 非数字 在js正则中
非数字 可以使用 \D 表示 (小伙伴是不是发现了 \D 和 \d 的范围都是相反的呢)
好了,上例子
let str="123qwe45lu7876";
let reg=/\d+/g;
let res=str.match(reg);//再回顾一下,加深印象 math 方法以数组的形式返回 满足正则表达式匹配的内容
console.log(res)//结果:["123", "45", "7876"]
let str="123qwe45lu7876";
let reg=/\D+/g;
let res=str.match(reg);//再回顾一下,加深印象 math 方法以数组的形式返回 满足正则表达式匹配的内容
console.log(res)//结果: ["qwe", "lu"]
单词 word
英文单词 有数字 \w
匹配任意单词字符(数字、字母、下划线),等价于 [A-Za-z0-9_]
let str="dfa425@fg*gfd+djfakj#df_jla";
let reg=/\w+/g;
let res=str.match(reg);
console.log(res)// ["dfa425", "fg", "gfd", "djfakj", "df_jla"]
在字符串 dfa425@fg*gfd+djfakj#df_jla
中包含的字符有 数字,字母,下划线和特殊符号 ,上面也聊到了,单词( \w
) 包含的是 数字,字母和下划线,上方的案例中 ,/\w+/g
全局匹配 一次或多次出现的单词(数字,字母,下划线) ,所以 得到的结果就是 ["dfa425", "fg", "gfd", "djfakj", "df_jla"]
。
回顾之前关于数字规则,\d
表示的是 数字, \D
表示的是非数字
那在这里同样也是 \w
表示的是单词, \W
表示的是非单词 等价于 [^a-zA-z0-9_]
这样有没有觉得更好记忆一点呢(沾沾自喜☺)
let str="dfa425@fg*gfd+djfakj#df_jla";
let reg=/\W+/g;
let res=str.match(reg);
console.log(res)//["@", "*", "+", "#"]
这里匹配的是非单词 ,所以返回的是 ["@", "*", "+", "#"]
中文
/[\u4e00-\u9fa5]/
正则只能匹配中文,匹配汉字是不正确;
/\p{Unified_Ideograph}/u
是正确的,不需要维护,匹配所有汉字。
空白
ASCII表
空白 包括有 键盘上的tab键(制表字符),换行,回车,换页,空格 对于正则中该怎么表达它们呢,大家可以参考上面的 ASCII表 其中 tab键就是 \t
,换行就是 \n
,回车就是 \r
,换页就是 \f
, 空格就是 \v
。
那 [\t\n\r\f\v]
表示的就是所有的空格和空白了,也可以使用 \s
来表示,即\s
= [\t\n\r\f\v]
还是同样的道理 \S
表示的就是 非空格或者是空白
了。
let str=" symbol 卢 ";
function trim(str){
return str.replace(/\s/g,"");
}
console.log(str,"原来的字符串");
console.log(trim(str),"去除空格后的字符串");
//结果见下图
![19b7a8ad9037f878dabdeabf1f4cf861.png](https://i-blog.csdnimg.cn/blog_migrate/7e5cd2afb4d920bcbb7d810c5d5665a1.png)
通配符
.
匹配任意字符(除了回车 \r
和换行 \f
)
单词边界 boundary
在正则表达式中单词边界(字符串开头、结尾、空格、逗号、点号等符号)是用 \b
表示,是指单词和非单词之间的位置,并非指字符,或者位于字符\w和字符串的开头或者结尾之间的位置,从文章中之前的经验,\B
匹配的是非单词边界
let str="sdfgsd fldy [js]_fasd.exerqp-0441";
let reg=/\b/g;
let res=str.replace(reg,"*");
console.log(str,"原来的字符串")
console.log(res,"替换后的字符串");
//结果见下图?????
在上面的代码中,将字符串
sdfgsd fldy [js]_fasd.exerqp-0441
中的 单词边界 \b
匹配到的内容使用 *
进行了替换,这样可以让大家更好的去感受到 \b
(单词边界)所匹配到的内容,更好的去理解它(单词边界其实并不是很好理解,所以才没有将它放在前面的范围类里面和大家聊)。接着向下,咱再看看\B
(非单词边界),上代码
let str="sdfgsd fldy [js]_fasd.exerqp-0441";
let reg=/\B/g;
let res=str.replace(reg,"*");
console.log(str,"原来的字符串")
console.log(res,"替换后的字符串");
//结果见下图?????
![c3e4a4e18d345527612331436e738b7d.png](https://i-blog.csdnimg.cn/blog_migrate/7aab126d466b264dfb16edf7115f40db.png)
【此处应该有仔细揣摩 \b
(单词边界) 和 \B
(非单词边界)的区别】
知道了/b
(单词边界) 和 \B
(非单词边界),接下来,咱就来个小案例练练手,来吧 come on !!!
let str = "My name is symbol Lu";
let reg=/\b\w+\b/g;
let res= str.match(reg);//提取字符串中所有单词
console.log(res)//结果 ["My", "name", "is", "symbol", "Lu"]
在上面的案例中,/\b\w+\b/g
从全局匹配出现一次或多次的单词(单词的前后是单词边界),所以,输出的是
["My", "name", "is", "symbol", "Lu"]
, 其实 用 /\w+/g
所匹配出来的结果一样的。
小结一下-----印象+3
----------开头和结尾------------------
^ 匹配输入字符串的开始位置(以哪个字符或哪些开始)
$ 匹配输入字符串的结束位置(以哪个字符或哪些结束)
-----------数字----------------------
[0-9] 表示的是数字,可以使用 \d 表示
[ ^ 0-9 ] 表示的非数字,可以使用 \D 表示 (成对的记忆)
-----------单词----------------------
\w 匹配任意单词字符(数字、字母、下划线),等价于 [A-Za-z0-9_]
\W 匹配的是非单词
------------中文----------------------
/[\u4e00-\u9fa5]/ 正则只能匹配中文,记住是中文,匹配汉字是不正确;
/\p{Unified_Ideograph}/u是正确的,不需要维护,匹配所有汉字。
------------空白----------------------
\s 等同于 [\t\n\r\f\v] 匹配的是空格和空白
\S 匹配的是非空格和空白
------------通配符--------------------
. 匹配任意字符(除了回车 \r 和换行 \f)
------------单词边界------------------
\b 匹配的是单词边界(字符串开头、结尾、空格、逗号、点号等符号)是指单词和非单词之间的位置
\B 匹配的是非单词边界
js常用正则表达式
用户名正则
用户名正则,4到16位(字母,数字,下划线,减号)
let reg = /^[a-zA-Z0-9_-]{4,16}$/;
邮箱正则
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
手机号正则
let reg = /^1[34578]\d{9}$/;
身份证正则
身份证号(18位)正则
let reg= /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
QQ号正则
QQ号正则,5至11位
let reg = /^[1-9][0-9]{4,10}$/;
微信号正则
微信号正则,6至20位,以字母开头,字母,数字,减号,下划线
let reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
中国邮政编码
中国邮政编码为6位数字)
let reg=/[1-9]\d{5}(?!\d)/;
去除前后空格
let str=' SymbolLu ';
function trim(str){
let reg=/^\s+|\s+$/g;
return str.replace(reg,'');
};
console.log(trim(str))
历史好文
js垃圾回收机制原理给你聊的明明白白
ES11来了,不进来看看嘛
秒懂js作用域与作用域链