JavaScript中的正则表达式


一、什么是正则表达式

对于前端工程师来说正则表达式最常应用的场景就是表单验证,我们可以通过正则表达式准确的判断某个输入的字符串是否是固定的某种格式,例如邮箱,手机号,座机号,qq号,姓名等各种格式,使用正则表达式的目的是为了防止用户的恶意输入,所以我们需要规定一种严格的格式来限制用户输入字符串的格式。

  • 正则表达式是由一个字符序列形成的搜索模式。
  • 当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。
  • 正则表达式可以是一个简单的字符,或一个更复杂的模式。
  • 正则表达式可用于所有文本搜索和文本替换的操作。

二、正则表达式的创建方式

通过构造函数创建正则表达式对象

语法:var 变量=new RegExp ( [正则表达式] ,[匹配模式] )

var reg=new RegExp();

使用字面量创建正则表达式

语法:var 变量= / 正则表达式 / 匹配模式

var reg=/ /

在实际开发中使用字面量创建正则表达式的方式比较常用

匹配模式包括 : i 忽略大小写, g 匹配全局, m 执行多行匹配


三、正则表达式模式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

var reg=/[^ab]/;

^:表示除了ab以外的所有字符串


四、正则表达式的方法

正则对象的方法:

test方法:用来检查一个字符串是否符合正则表达式的规则,符合返回true,不符合返回false

exec方法:检索字符串指定的值,返回找到的值,并确定其位置

支持正则表达式的string对象的方法:

search:检索与正则表达式相匹配的值
match:找到一个或多个正则表达式的匹配
replace:替换与正则表达式匹配的子串
split:把字符串分割为字符串数组


五、正则表达式的用法

修饰符(匹配模式)的用法

i 修饰符

i 用于执行大小写不敏感的字符串,就是在字符串与正则表达式进行匹配的时候不区分大小写
让我们来看下面代码:

var reg = /abCDE/;
console.log(reg.test("ABcde"));

注意正则表达式与字符串有大小写区分,此时控制台输出的是false
在这里插入图片描述
当我们为正则表达式加上了 i 修饰符也就是忽略大小写的匹配模式

var reg = /abCDE/i;
console.log(reg.test("ABcde"));

在控制台输出的就是true
在这里插入图片描述

g 修饰符

g 用于执行全局匹配,例如我们在使用match方法查找字符串中指定的值,没有g修饰,它只会查找第一次出现的字符串,所以我们需要加上g来匹配所有的字符串。

var str = "hello word!!";
console.log(str.match(/o/));

在没有使用g修饰符的情况下,只会匹配到第一次出现的字符。
在这里插入图片描述

var str = "hello word!!";
console.log(str.match(/o/g));

在这里插入图片描述
当我们使用g修饰符,也就是全局匹配模式,就会将字符串中所有符合条件的字符筛选出来。

[ ]括号的使用

方括号代表的是用于查找某个范围中任意的字符:
1.某个区间内 如 [a-zA-Z0-9]
2.某几个的范围 [abcd]
3.可以在中括号中进行取非的操作. [^a]
4.在中括号中的字符不再有特殊的含义 如经常匹配全部的 .和* [.][*]

()括号的使用

匹配小括号内的字符串,可以是一个,也可以是多个,通常跟“|”(或)符号搭配使用,是多选结构

元字符的使用

元字符是正则表达式中具有特殊意义的专用字符,用来规定其前导字符(即位于元字符前面的字符)在目标对象中的出现模式。
在这里插入图片描述
例:

var reg = /\d/;
console.log(reg.test("1234"));

在这里插入图片描述
使用\d查找字符串是否是数字
如果想要查找指定的数字,只需在\d后加上需要查找的数字

var reg = /\d5/;
console.log(reg.test("12345"));

在这里插入图片描述

量词的使用

{ } 括号的使用

匹配次数,匹配在它之前表达式匹配出来的元素出现的次数,{n}表示正好出现n次、{n,}匹配最少出现n次、{n,m}匹配最少出现n次,最多出现m次

+

表示至少一个,相当于{1,}

*

表示0个或多个,相当于{0,}

?

表示0个或1个,相当于{0,1}

^

表示以指定字符开头

$

表示以指定字符结尾


六、正则表达式实际案例

手机号的正则表达式

题目要求:创建一个正则表达式,判断一个字符串是否是一个合法的手机号

分析:创建一个判断手机号的正则表达式首先需要知道手机号都有什么规则:手机号有11位,手机号以1开头,手机号第二位是3-8,三位以后是9位任意数字

分析完成后,就可以直接上代码了:

var phoneStr = "15624631135";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

在这里插入图片描述

使用正则表达式去除空格

题目要求:使用正则表达式去除用户输入的空格

分析:利用正则表达式去除空格 ,我们需要将字符串中的空格替换为空串,所以我们会用到replace方法

直接上代码:

var str = "         hello word         ";
console.log(str);
str = str.replace(/\s/g, "");
console.log(str);

在这里插入图片描述
上面的方法我们会发现中间的空格也被去除了,所以我们在规定一下只去掉前面和后面的空

var str = "         hel   lo word         ";
console.log(str);
str = str.replace(/^\s*|\s$/g, "");
console.log(str);

在这里插入图片描述
这样就完美了

电子邮箱的正则表达式

题目要求:写一个电子邮箱的正则表达式

分析:将电子邮箱的格式分为三个部分,第一个部分可以是数字字母下划线,第二部分@,第三部分任意字母数字,第四部分任意字母长度在2-5位

代码如下:

var emailReg = /^(\w{3,}\d{3,}\_)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "2390268652@qq.com";
console.log(emailReg.test(email));

在这里插入图片描述


完整正则表达式W3C手册:https://www.w3cschool.cn/jsref/jsref-obj-regexp.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值