明确需求
使用:100%
明确:在实战工作中,经常需要验证用户输入的数据,最典型的场景登录注册
思考:判断输入框内容是都等于空(也就是用户是否输入非常简单)但是如何判断是否是邮箱手机号呢?
回答:通过正则
■正则表达式简介
1、什么是正则表达式
-
正则表达式(Regular Expression 简称:RegExp)
-
又成规则表达式,描述了匹配字符串的规则
-
由我们自己来书写 “规则”,专门用来检测 字符串 是否符合 “规则” 使用的
-
我们使用一些特殊的字符或者符号定义一个 “规则公式”,然后用我们定义好的 “规则公式” 去检测字符串是不是合格
2、正则表达式的作用
-
对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证
-
内容替换、获取
-
网络爬虫(一个网站到另一个网站的页面上去获取对方的相关信息)
最最最常用:表单验证
■创建正则对象
说明:创建正则表达式的方法有两种,分别叫:隐式创建(字面量)、直接实例化(构造函数)
说明:两种方式的构造函数都是RegExp
1、隐式创建
语法:var regexp = /正则表达式/可选修饰符; (脚下留心:不用引号)
2、直接实例化
语法:var regexp = new RegExp(“正则表达式”,可选修饰符);
留心:参数需要引号,并且不能写斜杠
3、参数说明
【必选】正则表达式:由一些普通字符和元字符组成(就是具有特殊含义的字符)【正则表达式区分大小写】
【可选】修饰符:可以使i、g分别表示多行匹配,i不区分大小写,g全局匹配
思考: /锄禾日当午/ 能创建正则对象吗?
**回答:**可以
**原因:**只要写在【/】和【/】直接的内容就是正则表达式
■RegExp对象方法
-
语法:正则.test(字符串)
-
返回:判断正则表达式是否匹配成功 成功-true,失败-false
-
语法:正则.exec(字符串)
-
返回:匹配符合正则表达式条件的数据 成功-数组,失败-null
■初体验
test
下述古诗中是否含有“锄禾日当午”?
“离离原上草,一岁一枯荣。
野火烧不尽,春风吹又生。
远芳侵古道,晴翠接荒城。
又送王孙去,萋萋满别情。”
<script>
// 正则对象的方法
// 语法:正则对象.test(字符串)
// 作用:判断正则表达式是否匹配成功(匹配返回-true,不匹配-false)
// 语法:正则对象.exec(字符串)
// 作用:匹配符合正则表达式条件的数据 (成功-数组,不成功-null)
// 需求1:判断古诗是否含有【锄禾日当午】
var str = '离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。远芳侵古道,晴翠接荒城。又送王孙去,萋萋满别情。'
// var regexp = /字符/修饰符
// var regexp = /锄禾日当午/
var regexp = /又送王孙去/
// regexp.test(str) 返回结果是bool 所以需要自己打印
console.log(regexp.test(str)) // 去字符串中,判断是否有 正则内容/规则
if (regexp.test(str)) {
alert('有')
} else {
alert('木有')
}
</script>
exec
匹配字符串“js离离原上js草js,一岁一枯荣。野火烧不尽,春风吹又生js。远芳侵古道,js晴翠接荒城。又送王孙去,萋萋满别情。”中的js?
// 需求2:匹配字符串“js离离原上js草js,一岁一枯荣。野火烧不尽,春风吹又生js。远芳侵古道,js晴翠接荒城。又送王孙去,萋萋满别情。”中的js?
// var str = 'js离离原上js草js,一岁一枯荣。野火烧不尽,春风吹又生js。远芳侵古道,js晴翠接荒城。又送王孙去,萋萋满别情。'
// var regexp = /js/
// console.log(regexp.exec(str)) // 去str中匹配文字js并返回 数组
// console.log(regexp.exec(str)) //
// console.log(regexp.exec(str)) //
// 发现:上述代码默认只第一个
// 解决:使用修饰符(i不区分大小写, g匹配全局)
var str = 'js离离原上js草js,一岁一枯荣。野火烧不尽,春风吹又生js。远芳侵古道,js晴翠接荒城。又送王孙去,萋萋满别情。'
var regexp = /js/g
// console.log(regexp.exec(str))
// console.log(regexp.exec(str))
// console.log(regexp.exec(str))
// console.log(regexp.exec(str))
// console.log(regexp.exec(str))
// console.log(regexp.exec(str))
var data;
while (data = regexp.exec(str)) {
console.log(data)
// 明确:循环有循环变量声明,循环变量初始化,循环变量更新
// 思考:目前代码循环变量更新了吗?
// 回答:更新了就是条件里面 找不到会返回null null就为假 退出
}
■正则表达式里面的符号
- 知道了怎么创建一个正则表达式以后,我们就来详细的说一下正则表达式里面涉及到的一些符号了
元字符
-
.
: 匹配非换行的任意字符 -
\
: 转译符号,把有意义的 符号 转换成没有意义的 字符,把没有意义的 字符 转换成有意义的 符号 -
\s
: 匹配空白字符(空格/制表符/…) -
\S
: 匹配非空白字符 -
\d
: 匹配数字 -
\D
: 匹配非数字 -
\w
: 匹配数字字母下划线 -
\W
: 匹配非数字字母下划线 -
有了元字符我们就可以简单的制定一些规则了
var reg = /\s/ var str = 'a b' var str2 = 'ab' console.log(reg.test(str)) // true console.log(reg.test(str2)) // false
var reg = /\d/ var str = 'abc1' var str2 = 'abc' console.log(reg.test(str)) // true console.log(reg.test(str2)) // false
var reg = /\w/ var str = 'a1' var str2 = '#@$' console.log(reg.test(str)) // true console.log(reg.test(str2)) // false
限定符
-
*
: 前一个内容重复至少 0 次,也就是可以出现 0 ~ 正无穷 次 -
+
: 前一个内容重复至少 1 次,也就是可以出现 1 ~ 正无穷 次 -
?
: 前一个内容重复 0 或者 1 次,也就是可以出现 0 ~ 1 次 -
{n}
: 前一个内容重复 n 次,也就是必须出现 n 次 -
{n,}
: 前一个内容至少出现 n 次,也就是出现 n ~ 正无穷 次 -
{n,m}
: 前一个内容至少出现 n 次至多出现 m 次,也就是出现 n ~ m 次 -
限定符是配合元字符使用的
// 下面正则表示验证数字出现 0 ~ 正无穷次都可以 var reg = /\d*/ var str = 'abc' var str2 = 'abc1' var str3 = 'abc123' console.log(reg.test(str)) // true console.log(reg.test(str2)) // true console.log(reg.test(str3)) // true
// 下面正则表示验证数字出现 1 ~ 正无穷次都可以 var reg = /\d+/ var str = 'abc' var str2 = 'abc1' var str3 = 'abc123' console.log(reg.test(str)) // false console.log(reg.test(str2)) // true console.log(reg.test(str3)) // true
// 下面正则表示验证数字出现 0 ~ 1 次都可以 var reg = /\d?/ var str = 'abc' var str2 = 'abc1' console.log(reg.test(str)) // true console.log(reg.test(str2)) // true
// 下面正则表示验证数字必须出现 3 次 var reg = /\d{3}/ var str = 'abc' var str2 = 'abc1' var str3 = 'abc123' console.log(reg.test(str)) // false console.log(reg.test(str2)) // false console.log(reg.test(str3)) // true
// 下面正则表示验证数字出现 3 ~ 正无穷次 var reg = /\d{3,}/ var str = 'abc' var str2 = 'abc1' var str3 = 'abc123' var str4 = 'abcd1234567' console.log(reg.test(str)) // false console.log(reg.test(str2)) // false console.log(reg.test(str3)) // true console.log(reg.test(str4)) // true
// 下面正则表示验证数字只能出现 3 ~ 5 次 var reg = /\d{3,5}/ var str = 'abc' var str2 = 'abc1' var str3 = 'abc123' var str4 = 'abc12345' console.log(reg.test(str)) // false console.log(reg.test(str2)) // false console.log(reg.test(str3)) // true console.log(reg.test(str4)) // true
边界符
-
^
: 表示开头 -
$
: 表示结尾 -
边界符是限定字符串的开始和结束的
// 下面表示从开头到结尾只能有数字,并且出现 3 ~ 5 次 var reg = /^\d{3,5}$/ var str = 'abc' var str2 = 'abc123' var str3 = '1' var str4 = '1234567' var str5 = '123' var str6 = '12345' console.log(reg.test(str)) // false console.log(reg.test(str2)) // false console.log(reg.test(str3)) // false console.log(reg.test(str4)) // false console.log(reg.test(str5)) // true console.log(reg.test(str6)) // true
特殊符号
-
()
: 限定一组元素 -
[]
: 字符集合,表示写在[]
里面的任意一个都行 -
[^]
: 反字符集合,表示写在[^]
里面之外的任意一个都行 -
-
: 范围,比如a-z
表示从字母 a 到字母 z 都可以 -
|
: 或,正则里面的或a|b
表示字母 a 或者 b 都可以 -
现在我们就可以把若干符号组合在一起使用了
邮箱验证
// 下面是一个简单的邮箱验证
// 非_$开头,任意字符出现至少6次,一个@符号,(163|126|qq|sina)中的任意一个,一个点,(com|cn|net)中的任意一个
var reg = /^[^_$].{6,}@(163|126|qq|sina)\.(com|cn|net)$/
标示/修饰符
i
: 表示忽略大小写- 这个 i 是写在正则的最后面的
/\w/i
- 就是在正则匹配的时候不去区分大小写
g
: 表示全局匹配- 这个 g 是写在正则的最后面的
/\w/g
- 就是全局匹配字母数字下划线
■元字符
明确需求
练习:判断字符串“Nice to meet you, how old are you? I’m 8.”中是否含有数字“3”?
var str = 'Nice to meet you, how old are you? I'm 8';
var regexp = /3/;
regexp.test(str)
思考: 如何判断字符串中是否含有数字?
回答:通过元字符
概念
就是一些具有特殊含义的字符
语法
- . : 匹配非换行的任意字符
\
: 转译符号,把有意义的 符号 转换成没有意义的 字符,把没有意义的 字符 转换成有意义的 符号\s
: 匹配空白字符(空格/制表符/…)\S
: 匹配非空白字符\d
: 匹配数字\D
: 匹配非数字\w
: 匹配数字字母下划线\W
: 匹配非数字字母下划线
练习
<script>
/*
/中国/ 匹配是否含有中国
/八戒/ 匹配是否含有八戒
/空格/ 匹配是否含有空格文字
/s/ 匹配是否含有s文字(普通字符)
/\s/ 匹配是否含有\s是具有特殊含义的元字符 也就是看内容里面有没有空格
/\./ 看字符串中有没有点 比如 匹配邮箱的时候 xxx@qq.com
1234 5
什么叫元字符
回答:就是具有特殊含义的字符
种类:
\s 匹配是否含有空格 space
\S 匹配是否没有空格
\d 匹配是否含有数字
\D 非数字
\w 匹配0-9a-zA-Z_ 数字 字母(含大小写) 下划线
\W 取反
. 代表任意字符
\. 通过反斜杠将特殊字符串 转换成 普通字符串
*/
// var str = "Nice to meet you, how old are you? I'm 012345678."
// var regexp = /3/
// console.log(regexp.test(str))
// var regexp = /1/
// console.log(regexp.test(str))
// var regexp = /0123456789/ // 这个不是判断是否有数字 而是判断是否有0123456789
// console.log(regexp.test(str)) // 返回false因为字符串中每9
// 需求:判断字符串中是否含有数字
var str = 'asdf;lajdsfsdfdf'
// var regexp = /0123456789/
var regexp = /\d/
console.log(regexp.test(str)) // 判断字符串是否匹配
console.log(/\d/.test('asdf;lajdsfsdfdf')) // false
console.log(/\d/.test('abcefg1')) // true
console.log(/\d/.test('ab666cefg')) // true
</script>
■限定符
明确需求
思考:如何判断字符串中是否含有指定数量数字
回答:通过限定符
概念
用于限制指定字符串出现连续次数,出现了指定次数返回true,反之返回false
语法
*
: 前一个内容重复至少 0 次,也就是可以出现 0 ~ 正无穷 次+
: 前一个内容重复至少 1 次,也就是可以出现 1 ~ 正无穷 次?
: 前一个内容重复 0 或者 1 次,也就是可以出现 0 ~ 1 次{n}
: 前一个内容重复 n 次,也就是必须出现 n 次{n,}
: 前一个内容至少出现 n 次,也就是出现 n ~ 正无穷 次{n,m}
: 前一个内容至少出现 n 次至多出现 m 次,也就是出现 n ~ m 次
练习
<script>
/*
限定符:用来限制字符出现个数
栗子:用户名、手机号、手机号
种类
* 0到任意次数
+ 至少1次
? 0到一次
{6} 只能规则重复6次
{6,} 至少6次
{6,10} 只能6到10次
*/
// 需求:判断字符串中是否有3个a
// console.log(/aaa/.test('abcdefg')) // false
// console.log(/aaa/.test('abcdaefga')) // false
// console.log(/aaa/.test('aaabcdaefga')) // true
// console.log(/a{3}/.test('aaabcdaefga')) // true
// console.log(/a{5}/.test('aaabcdaefga')) // false
// console.log(/aaaaaa/.test('aaabcdaefga')) // false
// 需求:判断字符串中是否有数字
// var str = 'asdfd6sf'
// var regexp = /\d/
// console.log(regexp.test(str))
// 需求:判断字符串中是否有3个连续数字
// var regexp = /\d{3}/
// var str = 'asdfd6sf'
// console.log(regexp.test(str)) // false
// var str = 'asdfd669sf'
// console.log(regexp.test(str)) // true
// 最后练习
var str = 'asdfadsf'
var regexp = /\d*/ // * 0到多次
console.log(regexp.test(str)) // 没有也是true
</script>
■边界符
明确需求
在工作中,经常要限制内容全部是数字或英文等等,例如手机号,用户名
思考:如何实现呢
回答:通过边界符
概念
用于来特殊字符,来匹配数据的行首和行位
语法
^
: 表示开头$
: 表示结尾
只有^ 代表数据比须以规则开头
只有$ 代表数据必须以规则结果
既^又$ 代表数据内容必须按照规则来 并且 个数也一样
练习
<script>
// 明确:刚才写的代码都是含有,但实际工作限制指定内容 例如只能是数字 手机号
// 回答:得通过边界符
/*
什么是边界符:特殊的字符
种类:^开始 $结束
只写^ 代表必须按照正则/规则开头
只写$ 代表必须按照正则/规则结尾
既^又$ 代表必须就是你写的规则(内容&个数)
*/
// 需求:判断字符串是否以数字开头
var str = '毛爷爷说好好学习天天逃课'
var str2 = '666毛爷爷说好好学习天天逃课'
// var regexp = /\d/ // 里面是否含有数字
var regexp = /^\d/ // 是否用数字开头
// console.log(regexp.test(str)) // false
// console.log(regexp.test(str2)) // true
// 需求:判断字符串是不是数字结束
var str = '东方教主洪福齐天'
var str2 = '东方教主洪福齐天 666'
// var regexp = /0213456789/ 判断字符串中是否含有字符 0123456789
// var regexp = /\d/ // 判断是否含有数字
var regexp = /\d$/ // 判断是数字结尾
// console.log(regexp.test(str)) // false
// console.log(regexp.test(str2)) // true
// 需求:只能是指定规则(判断必须全部是数字)
var str = 'a123'
var str2 = '1a23'
var str3 = '6565'
// var regexp = /^\d$/ // 匹配1个字符 是数字
var regexp = /^\d{4}$/
console.log(regexp.test(str)) //false
console.log(regexp.test(str2)) //false 脚下留心:只要^和$同时出现 就必须所有内容按照规则来
console.log(regexp.test(str3)) //true
console.log('------------')
// 需求:判断内容必须都是 数字英文下划线
var regexp = /^\w{2}$/
var str = 'sa'
var str2 = '_1'
var str3 = '哈哈'
console.log(regexp.test(str)) // true
console.log(regexp.test(str2)) // true
console.log(regexp.test(str3)) // false
</script>