正则——RegExp
●正则也叫正则表达式，又名 “规则表达式”
●正则是JS中的数据类型, 是一个复杂数据类型
●由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的
●我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格
var reg = /\d+/
var str1 = '123'
var str2 = 'abc'
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // false
●上面的变量 reg 就是定制好的规则
●检测 str1 这个字符串的时候，符合规则
●检测 str2 这个字符串的时候，不符合规则
创建一个正则表达式
●想制定 “规则”，必须要按照人家要求的方式来制定
●把一些字母和符号写在 // 中间的东西，叫做正则表达式，比如 /abcdefg/
●创建正则表达式有两个方式 字面量 和 构造函数创建
字面量创建
// 下面就是字面量创建一个正则表达式
var reg = /abcdefg/
●这个正则表达式就可以去检测字符串了
●这个正则表达式的意义是字符串中的必须要包含'abcdefg'这个片段
构造函数创建
// 下面就是构造函数创建一个正则表达式
var reg = new RegExp('abcdefg')
console.log(reg) // /abcdefg/
●使用构造函数方式创建的和字面量创建的，得到的结果一样
两种创建方式的区别
●语法不一样
●书写标识符的时候
○字面量方式直接书写在正则的后面
○内置构造函数, 以第二个参数的方式传递
●拼接字符串
○字面量方式不接受拼接字符串
○内置构造函数方式, 可以拼接字符串
●基本元字符书写
○字面量方式的时候, 直接书写 \s\d\w
○内置构造函数书写的时候, 需要书写 \s\d\w
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//书写标识符的区别
var reg = /abcd/gi
console.log(reg)
var reg2 = new RegExp('abcd', 'gi')
console.log(reg2)
// 拼接字符串的区别
var s = 'HH'
var s2 = 'MM'
// 不能解析变量
var reg = /(s|s2)/ //会报错 不能解析变量
// var reg = /(HH|MM)/
console.log(reg)
// 因为第一个参数就是需要你以 字符串 的形式传递 所以可以拼接字符串
var reg2 = new RegExp('(' + s + '|' + s2 + ')')
console.log(reg2)
// 基本元字符的书写的区别
var reg = /\s\d\w/
console.log(reg)
var reg2 = new RegExp('\\s\\d\\w')
console.log(reg2)
</script>
</body>
</html>
正则表达式的方法
●正则提供了一些方法给我们使用
●用来检测和捕获字符串中的内容的
test()方法——匹配
●作用：test方法是用来检测字符串是否符合我们正则的标准
●语法： 正则.test(字符串)
●返回值： boolean
○如果该字符串符合正则的规则, 那么就是 true
○如果该字符串不符合正则的规则, 那么就是 false
console.log(/\d+/.test('123')) // true
console.log(/\d+/.test('abc')) // false
exec()方法——捕获
●作用：exec方法是把字符串中满足条件的内容捕获出来
●语法： 正则.exec(字符串)
●返回值： 把字符串中符合正则要求的第一项以及一些其他信息，以数组的形式返回
○原始字符串中没有符合正则要求的字符串片段
■null
○原始字符串中有符合正则要求的片段
■正则没有 () 也没有 全局标识符g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 不管捕获多少次, 每次都是从原始字符串的索引 0 开始检索
■正则有全局标识符 g
●返回值是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●注意: 第二次捕获是从第一次的结束位置开始向后查询, 直到最后捕获不到为止, 再下一次的时候, 又从字符串的 索引0 开始检索
■有 ()
●返回的是一个数组
●索引 0 是从字符串中捕获出来的满足正则条件的第一个内容
●从索引 1 开始, 依次是每一个小括号的单独内容
●注意: 按照小括号的开始标志, 来数是第几个小括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. 没有符合要求的片段
var str = 'vgfdrtyuijkhvgfrtyu'
var reg = /\d{3}/
var res = reg.exec(str)
console.log(res)
//2. 有符合要求的片段
//2-1. 没有 () 没有 g
var str = 'tfyu123gvh456gfh789gyhj'
var reg = /\d{3}/
var res = reg.exec(str)
console.log(res)
//2-2. 有全局标识符 g
var str = 'tfyu123gvh456gfh789gyhj'
var reg = /\d{3}/g
var res = reg.exec(str)
console.log(res)
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
console.log(reg.exec(str))
//2-3. 有 ()
var str = '11010820030223001x'
var reg = /(\d{2})(\d{2})(\d{2})((\d{4})(\d{2})(\d{2}))\d{2}(\d)(?:\d|x)/
var res = reg.exec(str)
console.log(res)
</script>
</body>
</html>
●扩展: () 有两个意义
○一个整体
○单独捕获
○如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
○你可以写成 (?:)表示匹配但不捕获
// 单独捕获
var reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)/
var res = reg.exec('13072220041010301x')
console.log(res);
正则表达式里面的符号
●知道了怎么创建一个正则表达式以后，我们就来详细的说一下正则表达式里面涉及到的一些符号了
元字符
基本元字符
●. ： 匹配非换行的任意字符 表示字符串中至少要有一个非换行的内容
●\ ： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号
●\s ： 匹配空白字符(空格/缩进/制表符/...)表示字符串中至少包含一位 空白 内容
●\S ： 匹配非空白字符
●\d ： 匹配数字 表示字符串中至少包含一位 数字(0-9)
●\D ： 匹配非数字 表示字符串中至少包含一位 非数字 内容
●\w ： 匹配数字字母下划线 表示 一位 数字(0-9)字母(a-zA-Z)下划线(_) 中的任意一个
●\W ： 匹配非数字字母下划线 表示 一位 非数字字母下划线 中的任意一个
●有了元字符我们就可以简单的制定一些规则了
// 基本元字符
// \d
// 表示验证的字符串内必须包含一位数字
var reg = /\d/
console.log(reg.test('sfdgdfgfdhfgh'));
console.log(reg.test('sfdgdfgfg4dhfgh7'));
console.log(reg.test('123sfdgdfgfg4dhfgh7'));
// \D
// 表示验证的字符串中必须包含一位非数字
var reg = /\D/
console.log(reg.test('45613165465'));
console.log(reg.test('45613 165465'));
console.log(reg.test('45613d165465'));
console.log(reg.test('45613%165465'));
// \s
// 表示验证的字符串中必须要包含一位空白内容
var reg = /\s/
console.log(reg.test('sgsdfhfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test('sgsdf hfgh'));
console.log(reg.test(`sdgs
dfg`));
// \S
// 表示验证的字符串中必须要包含一位非空白内容
var reg = /\S/
console.log(reg.test(' '));
console.log(reg.test(' d '));
console.log(reg.test(' # '));
console.log(reg.test(' . '));
// \w
// 表示验证的字符船串中必须要包含一位数字字母和下划线
var reg = /\w/
console.log(reg.test('@#%#$%&^*&(*'));
console.log(reg.test('@#%#$%&^2*&(*'));
console.log(reg.test('@#%#$%&^b*&(*'));
console.log(reg.test('@#%#$%&^_*&(*'));
// \W
// 表示验证的字符串中必须要包含一位非数字字母和下划线
var reg = /\W/
console.log(reg.test('asgd353454__'));
console.log(reg.test('asgd353 454__'));
console.log(reg.test('asgd353$454__'));
// .
// 表示验证的字符串中必须要包含一位非换行以外的内容
var reg = /./
console.log(reg.test('\n'));
console.log(reg.test('\ns'));
console.log(reg.test('\n '));
console.log(reg.test('\n@'));
// \
// 表示把有意义的点转成了没有意义的点
var reg = /\d\.\d/
console.log(reg.test('1.5'));
console.log(reg.test('1#5'));
限定符
注意: 一个限定符只能修饰符号前面的一个内容的出现次数
●* ： 前一个内容重复至少 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 都可以
●现在我们就可以把若干符号组合在一起使用了
// ()
var reg = /^(abc){2}$/
console.log(reg.test('abcabc'));
console.log(reg.test('aabbcc'));
console.log(reg.test('abcc'));
// |
var reg = /^abc|def$/
console.log(reg.test('abcabc'));
console.log(reg.test('abc'));
console.log(reg.test('def'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('sddhdggfhdgsf'));
var reg = /^(abc|def)$/
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
console.log(reg.test('abcsddhdggfhdgsf'));
console.log(reg.test('sddhdggfhdgsdef'));
console.log(reg.test('abc'));
console.log(reg.test('def'));
// []
var reg = /^[abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));
// [^]
var reg = /^[^abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('e'));
// -
var reg = /^[0-9]$/
console.log(reg.test('01'));
console.log(reg.test('1'));
console.log(reg.test('2'));
console.log(reg.test('3'));
console.log(reg.test('4'));
console.log(reg.test('5'));
console.log(reg.test('6'));
console.log(reg.test('7'));
console.log(reg.test('8'));
console.log(reg.test('9'));
标识符(修饰符)
●书写在正则表达式的外面, 专门用来修饰整个正则表达式的符号
●i ：ignore的简写 表示忽略大小写
○这个 i 是写在正则的最后面的
○/\w/i
○就是在正则匹配的时候不去区分大小写
●g ： global的简写 表示全局匹配
○这个 g 是写在正则的最后面的
○/\w/g
○就是全局匹配字母数字下划线
var reg = /^[a-z]$/i
console.log(reg.test('s'));
console.log(reg.test('g'));
console.log(reg.test('y'));
console.log(reg.test('u'));
console.log(reg.test('A'));
// 有全局修饰符 g
var str = 'sda123fdhm456fnbvb789gdghj345khmgn666bxcvxb'
var reg = /\d{3}/g
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
字符串和正则合用的方法
●字符串中有一些方法也是可以和正则一起使用的
search
●作用：search 是查找字符串中是否有满足正则条件的内容
●语法：
○字符串.search(正则)
○字符串.search(字符串片段)
●返回值 ： 有的话返回开始索引，没有返回 -1
var reg = /\d{3}/
var str = 'hello123'
var str2 = 'hello'
console.log(str.search(reg)) // 5
console.log(str2.search(reg)) // -1
match
●作用：match 找到字符串中符合正则条件的内容返回
●语法：
○字符串.match(正则)
○字符串.match(字符串片段)
●返回值 ：
○没有标示符 g 的时候，是和 exec 方法一样
○有标示符 g 的时候，是返回一个数组，里面是匹配到的每一项
var reg = /\d{3}/
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", index: 5, input: "hello123wor456", groups: undefined]
console.log(str2.match(reg)) // null
var reg = /\d{3}/g
var str = 'hello123world456'
var str2 = 'hello'
console.log(str.match(reg))
// ["123", "456"]
console.log(str2.match(reg)) // null
replace
●作用：replace 是将字符串中满足正则条件的字符串替换掉
●语法：
○字符串.replace('换下字符', '换上字符')
○字符串.replace(正则表达式, '换上字符')
●返回值 ： 替换后的字符串
○当你的第一个参数传递字符串的时候, 只能替换一个
○当你的第一个参数传递正则表达式的时候, 只能替换一个
○但是如果你的正则表达式有全局标识符 g, 那么有多少替换多少
<script>
var str = 'fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf'
console.log(str) //fctyHHguHHijHHknHHjgHHhfMMctMMdrMMf
var r1 = str.replace('HH', '**')
console.log(r1) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf
var r2 = str.replace(/HH/, '**')
console.log(r2) //fcty**guHHijHHknHHjgHHhfMMctMMdrMMf
var r3 = str.replace(/HH/g, '**')
console.log(r3) //fcty**gu**ij**kn**jg**hfMMctMMdrMMf
</script>
案例——密码强度校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 200px;
border: 10px solid pink;
margin: 20px auto;
padding: 20px;
}
input {
width: 100%;
height: 50px;
font-size: 24px;
padding-left: 20px;
box-sizing: border-box;
}
p {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
p>span {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #fff;
font-size: 24px;
}
p>span:nth-child(1).active {
background-color: red;
}
p>span:nth-child(2).active {
background-color: orange;
}
p>span:nth-child(3).active {
background-color: green;
}
</style>
</head>
<body>
<div>
<input type="text">
<p>
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</div>
<script>
// 密码强度校验
// + 规则:
// => 密码的规则: 数字 字母 符号(@#%&)
// => 强度的规则:
// -> 弱: 有一类
// -> 中: 有两类
// -> 强: 全包含
// 获取元素
var inp = document.querySelector('input')
var spans = document.querySelectorAll('span')
// 准备正则
// 只要包含一位数字就可以
var r1 = /\d/
// 只要包含一位字母就可以
var r2 = /[a-z]/i
// 只要包含一位符号就可以
var r3 = /[@#%&]/
// 1. 给 inp 绑定 input 事件
// 随着输入或者删除内容实时触发
inp.oninput = function() {
// 2. 拿到 inp 内输入的内容
var text = inp.value
// 3. 准备一个表示级别的变量, 默认是 0
var level = 0
// 3-1. 依次使用正则校验
if (r1.test(text)) level++
if (r2.test(text)) level++
if (r3.test(text)) level++
// 在每一次添加类型之前, 给所有 span 清除掉类名
for (var i = 0; i < spans.length; i++) {
spans[i].classList.remove('active')
if (i < level) spans[i].classList.add('active')
}
}
</script>
</body>
</html>
案例——表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
form {
width: 400px;
border: 10px solid pink;
padding: 20px;
}
label {
display: block;
height: 80px;
position: relative;
}
input {
height: 30px;
font-size: 24px;
padding-left: 20px;
}
label>span {
position: absolute;
left: 0;
top: 35px;
font-size: 20px;
color: red;
display: none;
}
</style>
</head>
<body>
<form>
<label>
用户名: <input class="username" type="text">
<span>请按照规则填写用户名</span>
</label>
<label>
密码: <input class="password" type="text">
<span>请按照规则填写密码</span>
</label>
<label>
手机号: <input class="phone" type="text">
<span>请按照规则填写手机号</span>
</label>
<label>
邮箱: <input class="email" type="text">
<span>请按照规则填写邮箱</span>
</label>
<input type="button" value="完善资料">
</form>
<script>
// 方案2: 统一验证
// 1. 给每一个 input 起一个单独的类名(或者标识, 用来区分)
// 2. 准备正则, 以对象的形式准备正则, 对象的 键就使用 文本框的独立标识, 值就使用 正则
// 当你的文本框 className === 'username' 的时候, 就使用 regObj 内的一个叫做 username 对应的正则去验证
var regObj = {
username: /^[0-9a-z]\w{5,11}$/i,
password: /^\w{6,12}$/,
phone: /^\d{11}$/,
email: /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/
}
// 3. 获取到所有的文本框
var inps = document.querySelectorAll('form input')
// 3-2. 给每一个 input 绑定 表单输入 事件
inps.forEach(function(item) {
item.oninput = function() {
// 4-1. 拿到你正在输入的这个 input 文本框内的文本
var text = item.value
// 4-2. 拿到验证该文本框需要使用的正则
var reg = regObj[item.className]
// 4-3. 拿到应该显示的那个对应的 span 标签
var span = item.nextElementSibling
// 4-4. 操作显示和隐藏
span.style.display = reg.test(text) ? 'none' : 'block'
// if (reg.test(text)) {
// span.style.display = 'none'
// } else {
// span.style.display = 'block'
// }
}
})
</script>
</body>
</html>
正则预查(扩展)
正向预查
●正向肯定预查:(?=)
●正向否定预查:(?!)
负向预查
●负向肯定预查:(?<=)
●负向否定预查:(?<!)
var str = 'windows2012windows2000windowsXPwindowsVistawindows98windows'
// 1. 正向肯定预查
// 需求: 我需要的是 windows, 但是是后面带有数字的 widnows
// var reg = /windows(?=\d+)/g
// 2. 正向否定预查
// 需求: 我需要的是 windows, 但是后面不是数字的 windows
// var reg = /windows(?!\d+)/g
// 3. 负向肯定预查
// 需求: 我需要的是 windows, 但是前面是数字的 windows
var reg = /(?<=\d+)windows/g
// 4. 负向否定预查
// 需求: 我需要的是 windows, 但是前面不是数字的 windows
var reg = /(?<!\d+)windows/g
京公网安备 11010802030320号