JS(正则、简单邮箱验证、正则小练习)

明确需求

使用: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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页