js下 Day15、正则表达式

一．正则表达式简介

什么是正则表达式

正则表达式，也叫规则表达式, 是对字符串操作的一种逻辑公式。

为什么要使用正则？

1、使用极简单的方式，去匹配字符串

2、速度快，代码少

3、在复杂的字符串中快速精准的匹配想要的字符

正则表达式创建:

字面量: var reg = / 规则/修饰符;

实例化: var reg = new RegExp( 规则，修饰符 );

基本语法

1.修饰符

i	忽略大小写
g	全局匹配
m	多行匹配

2.元字符

\d	匹配数字
\D	匹配非数字
\w	匹配数字字母下划线
\W	匹配非数字字母下划线
\s	匹配空字符
\S	匹配非空字符
\b	匹配单词边界
\B	匹配非单词边界
[\u4e00-\u9fa5] 有事100，有酒发我	匹配中文

3.特殊字符

**	转义字符,将在正则中有特殊含义的字符转为普通字符
[]	中括号中的字符匹配任意一个
^	以什么开始
$	以什么结束
[^]	取反,除了中括号里以外的字符
.	除了换行以外的任意字符
\|	或
()	分组

4.限定符

{n,m}	匹配n-m个
{n}	匹配n个
{n,}	最少匹配n个
+	一个或多个，相当于{1,}
*	0个或多个，相当于{0,}
?	0个或一个，相当于{0,1}

#二．常见正则

**1. ** 手机号正则

以数字1开头

第二位不能是[012]

后9位任意数字

**2. ** 邮箱正则

开头可以多个是数字字母下划线

中间有@符

@符后也是多个数字字母下划线

接着匹配 .

后面跟常见尾缀**(com | cn | net)**

**3.QQ ** 正则

不能以0开头

长度为5-11位

**4. ** 网址正则

http开头,s可有可无,后面是://

@前是数字字母下划线

@后.前是数字字母下划线

.后是尾缀

**5. ** 匹配前后空格

只匹配开头或结尾，不管中间

#三．课堂小案例

1.敏感词替换( **replace(reg, ** ’’) )

2.找数字加2( replace(reg,function($0){}) )

3.转小驼峰( replace(reg,function($0,$1){}) )

4.字符串 match() 方法

语法: 字符串.match(正则)

返回值: 数组

**match()**方法返回匹配项组成的数组(支持全局匹配)

5.正则exec()方法

语法: 正则.exec(字符串)

返回值: 数组

**exec()**方法返回匹配项组成的数组(不支持全局匹配)

不加g永远只能找到第一个

加g该方法调用一次匹配第一个，再调用一次匹配第二个，以此类推，找不到返回null

6.字符串的split()方法

split方法支持使用正则当做分隔符

#四．课堂小结

1.修饰符: **i ** 忽略大小写 g全局匹配

2.元字符: **\d ** 数字 \w数字字母下划线 \s空字符 \b单词边界

3.特殊字符: **\ ** 转义 |或 []任意一个 [^]除了 ^开头 $结尾 .任意 ()分组

4.限定符: **+ 1 ** 或多 * 0或多 ? 0或1 {}

5.正则方法: test() 返回布尔值 exec() 返回数组,不支持全局匹配

6.字符串方法: replace() 替换 macth（）返回数组,支持全局匹配

#五．作业 -- 表单验证

效果图:

功能思路分析:

1. 用户名验证

\1. 给用户名文本框绑定失去焦点事件(blur)

\2. 编写手机号正则和邮箱正则

\3. 验证文本框的内容是否符合手机号正则或邮箱正则

\4. 验证通过返回true，并且隐藏错误提示

5. 验证失败返回false，并且显示错误提示

2. 密码验证

\1. 给密码文本框绑定失去焦点事件(blur)

\2. 编写非纯数字和非纯字母正则

\3. 验证文本框的内容是否符合非纯数字并且和纯字母正则，并且长度3-6

\4. 验证通过返回true，并且隐藏错误提示

5. 验证失败返回false，并且显示错误提示

3. 验证码验证

\1. 给验证码文本框绑定失去焦点事件(blur)

\2. 判断文本框里的内容是否与验证码盒子中的内容一致

\3. 验证通过返回true，并且隐藏错误提示

\4. 验证失败返回false，并且显示错误提示

4. 切换验证码

\1. 封装一个获取随机验证码的方法

\2. 给换一换按钮绑定点击事件(click),调用随机验证码方法

5. 登录验证

\1. 给登录按钮绑定点击事件

\2. 调用用户名、密码和验证码的失去焦点事件，当他们返回值都为真是，跳转页面(location.href),并将用户信息传递过去