阅读 2046

用大白话轻松搞定正则(上)

前言

大部分人都觉得这块比较杂乱(我也是这样觉得的 (✿◡‿◡))。毕竟元字符太多了,看起来没有系统性,不好记 。 所以本文就不说那么多的 官方的话,咱就用大白话聊聊来正则,为了加强大家的记忆,在文中做了三次的小结,用来加深大家的记忆。本文是属于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 所以aA 也就是一样的啦,所以返回的是 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
复制代码

那这两种方式还有什么区别呢???

  1. 在 JS 中,正则表达式的两种声明方式对于 \d\D (后面会聊的哈😄)之类的匹配模式中的区别

构造函数的方式:需要进行转义,如:let reg=new RegExp("\\d");

字面量的方式:不需要转义,如:let reg=/\d/;

  1. 各自的优点

构造函数的方式:支持字符串拼接,支持变量,更加灵活,如:

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 是一样的)

修饰符说明
iignoreCase 忽略大小写匹配
gglobal 全局匹配,即是匹配一个后继续匹配,直到结束
mmultiline 多行匹配,即是遇到换行后不停止匹配,直到结束

RegExp 对象的方法

上面也聊了,正则是一个对象,对象里面有方法, RegExp 对象中常用的有 3 个方法: test() exec() 以及 compile()

test()

test() 方法检索字符串中的指定值。返回值是 truefalse

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);
复制代码

我们在字符串 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对象常用的方法,那么接下来就是,正则的一些规则了,接着往下看👇👇👇👇👇。。。

一些常见的规则

这些规则就是一些特殊的字符组成的规则,大家是不是总觉得记不住,可能这也是大家觉得正则难的一些原因之一了吧,没关系, 咱们接着往下看一点点的深入浅出(有点装逼了img

上栗子🌰

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 是一样的)

修饰符说明
iignoreCase 忽略大小写匹配
gglobal 全局匹配,即是匹配一个后继续匹配,直到结束
mmultiline 多行匹配,即是遇到换行后不停止匹配,直到结束
  • RegExp 对象的方法
  1. test() 方法检索字符串中的指定值。返回值是 true 或 false。
  2. exec() 方法检索字符串中的指定值。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
  3. compile() 方法用于改变 RegExp 可以改变检索模式,也可以添加或删除第二个参数。
  • String中可以使用正则的常用方法
  1. match() 方法使用正则表达式对字符串进行查找 并将查找的结果作为数组返回。
  2. replace() 方法通过用 newChar 字符替换字符串中出现的所有 oldChar 字符,并返回替换后的新字符串。
  • 部分规则
  1. [0-9] : 匹配从0到9的任意一个数字 也可以用 \d 表示
  2. + :是一个 量词 (啥是量词咱们后面再聊),表示至少出现一次,或多次
  3. [ ] :表示的是 大括号里面的 任意一个字符 能够匹配上,都是可以的
  4. [^] : 大括号里面的任意字符都不能出现 与 [ ] 是相反的

量词

量词 ,顾名思义就是 匹配数量的 ,也就是一个(或者是一组) 字符出现的次数,可能是零次,一次,多次,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} 来代替 ,在我们例子中 字符串 1232546qwe13231477 出现了 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次

这两个量词的小案例,大家可以自行的写例子去理解一下(多尝试,多练习哦)

范围类

这个是我的一个记忆规则 表示的一个一个的范围 比如09是一个范围 az也是一个范围

在js的正则中 [0-9] 表示的是 数字 它是 [0123456789] 的一个简写也可以使用 \d 表示,聪明的我们,自然也能联想到了字母

az这个范围的正则 那就是 [a-z] 是小写的英文那字母 abcd.....z ,那大写的AZ也是同样的道理了,没错就是它

[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}/g1 开头(手机号是以 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),"去除空格后的字符串");
//结果见下图
复制代码

通配符

. 匹配任意字符(除了回车 \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,"替换后的字符串");
//结果见下图👇👇👇👇👇
复制代码

【此处应该有仔细揣摩 \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))
复制代码

历史好文

  1. js垃圾回收机制原理给你聊的明明白白

  2. ES11来了,不进来看看嘛

  3. 秒懂js作用域与作用域链

文章分类
前端
文章标签