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),并将用户信息传递过去
