明确需求

明确：在实战工作中，经常需要验证用户输入的数据，最典型的场景登录注册

思考：判断输入框内容是都等于空（也就是用户是否输入非常简单）但是如何判断是否是邮箱手机号呢？

回答：uname != ‘’ 得通过正则

正则表达式简介

- 正则表达式（Regular Expression 简称：RegExp） - 又成规则表达式，描述了匹配字符串的规则 - 由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的 - 我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检 测字符串是不是合格

简单概括

概念：正则由用普通字符和特殊字符组成的字符串 作用：检测是否符合规定 留心：字符就是英文、数字、下划线， 字符串一堆字符集合

正则表达式的作用

对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证内容替换、获取（购物车input输入购买商品数量 去掉非数字）网络爬虫（一个网站到另一个网站的页面上去获取对方的相关信息） node

创建正则对象

说明：创建正则表达式的方法有两种，分别叫：隐式创建（字面量）、直接实例化（构造函数）

说明：两种方式的构造函数都是RegExp

1、隐式创建 语法：修饰符 regexp = /正则表达式/可选修饰符

2、直接实例化 语法：修饰符 regexp = new RegExp(“正则表达式”, 可选参数)

3、参数说明

【必须】正则表达式：普通字符串、特殊字符

【可选】修饰符：i 不区分大小写、g 表示多行匹配全局匹配

RegExp对象方法

test

语法：正则对象.test（待校验的数据） 作用：判断数据是否匹配 返回：匹配 -true， 不匹配 - false

<script> // 下述古诗中是否含有“锄禾日当午”？ // “离离原上草，一岁一枯荣。 // 野火烧不尽，春风吹又生。 // 远芳侵古道，晴翠接荒城。 // 又送王孙去，萋萋满别情。” // 1. 创建正则对象 let regexp = /锄禾日当午/ // 包含指定内容 返回 BOOL // 2. 判断 result rs let rs = regexp.test('离离原上草，一岁一枯荣。锄禾日当午，野火烧不尽，春风吹又生。远芳侵古道，晴翠接荒城。又送王孙去，萋萋满别情。') console.log(rs) </script>

exec

语法：正则对象.exec（待校验的数据）作用：匹配符合条件的数据，举例获取字符串中所有数字返回：成功 - 数组 ， 失败 - null // 1. 创建正则对象 g global let regexp = /js/g // 2. 通过exec语法获取数据 // let rs = regexp.exec("js离离原上js草js，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情。") let str = "js离离原上js草js，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情。" // console.log(regexp.exec(str)) // js 0 // console.log(regexp.exec(str)) // js 6 // console.log(regexp.exec(str)) // js 9 // console.log(regexp.exec(str)) // js 29 // console.log(regexp.exec(str)) // js 38 // console.log(regexp.exec(str)) // 找不到 返回 null // 发现：上面写麻烦 // 解决：循环 // 明确：不知道循环次数 用 while // while (成立) { while (temp = regexp.exec(str)) { // 成立 5 最后一次 6 null、undefined、false、假 退出 // 一直成 console.log(temp) }

正则表达式里面的符号

元字符

. ： 匹配非换行的任意字符

\ ： 转译符号，把有意义的 符号 转换成没有意义的字符，把没有意义的字符转换成有意义的 符号\s ： 匹配空白字符（空格/制表符/…）\S ： 匹配非空白字符\d ： 匹配数字\D ： 匹配非数字\w ： 匹配数字字母下划线\W ： 匹配非数字字母下划线

\S ： 匹配非空白字符

var reg = /\s/ var str = 'a b' var str2 = 'ab' console.log(reg.test(str)) // true console.log(reg.test(str2)) // false

\d ： 匹配数字

var reg = /\d/ var str = 'abc1' var str2 = 'abc' console.log(reg.test(str)) // true console.log(reg.test(str2)) // false

\w ： 匹配数字字母下划线

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 次，也就是可以出现 0 ～ 正无穷 次

// 下面正则表示验证数字出现 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 次，也就是可以出现 1 ～ 正无穷 次

// 下面正则表示验证数字出现 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 次，也就是可以出现 0 ～ 1 次

// 下面正则表示验证数字出现 0 ~ 1 次都可以 var reg = /\d?/ var str = 'abc' var str2 = 'abc1' console.log(reg.test(str)) // true console.log(reg.test(str2)) // true

{n} ： 前一个内容重复 n 次，也就是必须出现 n 次

// 下面正则表示验证数字必须出现 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

{n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次

// 下面正则表示验证数字出现 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

{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

// 下面正则表示验证数字只能出现 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就是全局匹配字母数字下划线

综合练习

匹配检测是否是秋秋号，规则：5~11数字，首字母不能是0

let regexp = /^[1-9]\d{4,10}$/

匹配检测是否是手机号，规则：11数字，首字母不能是0

let regexp = /^1\d{10}$/

匹配网站账号是否合法，规则：账号由5~12个数字、字母下划线组成，首字母不能是数字

let regexp = /^[a-zA-Z_]\w{4, 11}$/

邮箱验证

//任意字符 6+ //@ //qq 163 126 //. //com cn net let regexp = /^.{6,}@(qq|163|126)\.(com|cn|net)$/

<input type="text"> <button id="btn1">检测是否是纯数字</button> <button id="btn2">输出所有数字</button> <script> // 1. 获取btn2 let btn2 = document.querySelector('#btn2') // 2. 绑定事件 btn2.addEventListener('click', function() { // 获取值 let input = document.querySelector("input") // 通过正则取出所有数字 let regexp = /\d/g // 输出 while(temp = regexp.exec(input.value)) { console.log(temp) } }) // 1. 获取btn let btn1 = document.querySelector('#btn1') // 2. 点击事件 btn1.addEventListener('click', function() { // 1. 获取 let input = document.querySelector('input') // 2. 创建正则 // let regexp = /^\d+$/ let regexp = /^\d{1,}$/ // 3. 检测 if (regexp.test(input.value)) { alert('是') } else { alert('不是') } }) </script>

字符串对象(部分也可以正则去查找）

search（了解）

作用：获取字符串中指定内容的下标

语法：字符串.search（内容或正则）

返回：字符下标，找不到 -1

练习：

let str = 'abcdefg' console.log(str.search('a')) // 0 console.log(str.search('b')) // 1 console.log(str.search('z')) // -1 console.log(str.indexOf('a')) // 0 console.log(str.indexOf('b')) // 1 console.log(str.indexOf('z')) // -1 console.log(str.search(/\d/)) // -1 let str2 = 'sdfads8f9' console.log(str2.search(/\d/)) // 6

match 作用：获取字符串中匹配的字符

语法：字符串.match（内容或正则）

返回：正则不加g则相当于exec、加了修饰符g返回纯内容数组 !!!

练习：

<script> let str = 'a1b2c3d4e5f6g' // 匹配所有数字 let regexp = /\d/g console.log(str.match(regexp)) //返回所有匹配的结果 </script>

replace*** 作用：内容替换

语法：字符串.replace（旧数据或正则，新数据

返回：匹配后的数据，留心不写正则只能替换一个 写了可以全部

练习：

<script> let str = 'a1b2c3d4e5f6g' // 去掉所有数字 // str = str.replace(1, '') // console.log(str.replace(2, '')) // 正则 console.log(str.replace(/\d/g, '')) // 问：很多 数据的 说法水电 费第三方 // 解： let str2 = '很多 数据的 说法水电 费第三方' console.log(str2.replace(/ /g, ' ')) console.log(str2.replace(/ /g, '<span style="display:inline-block;margin-left:10px;"></span>')) </script>

大总结

正则表达式概念

是什么：由普通字符和特殊字符组成的字符串 能干吗：1-数据验证（登录），2-数据替换（购物车），3-网络爬虫/采集

正则表达式对象语法

创建 var regexp = new RegExp(“正则表达式”, “修饰符”) var regexp = /正则表达式/修饰符 调用 test 检测数据是否匹配 true false exec 匹配正则数据 数组 null

正则符号 初体验 /内容/ 含有锄禾日当午 含有数字8 元字符（具有特殊含义的字符） 检测是否有数字 /\d/ 限定符（限定规则出现次数） 检测是否含有n个数字 /\d{n}/

边界符（限制开头和限制结尾） 检测是否完全匹配（1-个数，2-类型） 手机、用户名、邮箱 特殊符号

元字符

\w 数字、英文、下划线 \W 非 数字、英文、下划线 \d 数字 \D 非数字 \s 空格 \S 非空格 . 任意 \ 转义

限定符

至少1次 {1,} 任意次 {0,} ? 0~1 {0,1}

边界符 ^ $

特殊符号 [内容] [0-9a-zA-Z] [^0-9a-zA-Z]

(a|b)$

多学一招：() 非常厉害内存里面会单独存 正则内：\数字 正则外：RegExp.$数字 替换中：字符串.replace(旧数据，’$1’)

字符串对象用正则

语法：字符串.match（正则或普通内容） 返回：正则加修改符g 则返回纯内容数组，否则和exec一样

语法：字符串.replace（正则或普通内容/g，新数据） 购物车替换非数字