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位任意数字

js下 Day15、正则表达式

**2. ** 邮箱正则

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

中间有@符

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

接着匹配 .

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

js下 Day15、正则表达式

**3.QQ ** 正则

不能以0开头

长度为5-11位

js下 Day15、正则表达式

**4. ** 网址正则

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

@前是数字字母下划线

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

.后是尾缀

js下 Day15、正则表达式

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

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

js下 Day15、正则表达式

#三.课堂小案例

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

js下 Day15、正则表达式

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

js下 Day15、正则表达式

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

js下 Day15、正则表达式

4.字符串 match() 方法

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

返回值: 数组

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

js下 Day15、正则表达式

5.正则exec()方法

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

返回值: 数组

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

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

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

js下 Day15、正则表达式

6.字符串的split()方法

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

js下 Day15、正则表达式

#四.课堂小结

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

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

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

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

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

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

#五.作业 -- 表单验证

效果图:

js下 Day15、正则表达式

功能思路分析:

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

上一篇:5.19 Day15


下一篇:day15_继承