文章目录
1.正则表达式(RegExp)的介绍
1-1.介绍
1. 正则表达式英文全文是Regular Expression
1-2.正则的作用
1. 用来检验字符串是否符合规则
2. 从字符串里面获取一部分符合规则的片段
1-3.正则的语法
1. 使用一些特定的符号,来组合成一个表达式
2. 使用表达式去验证字符串,或者从字符串中获取内容片段
2.正则表达式的创建
2-1.字面量形式创建
- var reg = / qwer /;
2-2.内置的构造函数方法创建
- var reg = new RegExp( ‘qwer’ );
代码演示:
// 第一种字面量创建
var reg = /qwer/;
console.log(reg);
// 第一种构造函数创建
var reg1 = new RegExp('qwer');
console.log(reg1);
结果展示:
3.正则提供的两个方法
3-1.匹配:验证字符串是不是符合正则规则
1. 语法:正则.test(要检测的字符串)
2. 返回值:布尔值
代码演示:
// 1. 语法:正则.test(要检测的字符串)
const reg = /qwer1234/;
const res = reg.test('qwer12341234');
console.log(res);
结果展示:
3-2.捕获:.exec
3-2-1.基础捕获
1. 语法:正则.exec(你要捕获的字符串)
2. 返回
值:字符串没有符合规则的片段返回null
3. 返回值:字符串有符合规则的片段返回一个数组
代码演示:
// 2. 语法:正则.exec(你要捕获的字符串)
const res1 = reg.exec('23qwer1234qwety');
console.log(res1);
结果展示:
3-2-2.当表达式有()的时候
1. 返回值是一个数组
2. 从索引[1]开始依次对小括号单独捕获
3-2-3.当正则有全局标识符g的时候
1. 第二次捕获会从第一次捕获的结束位置开始捕获
2. 找不到了返回null
3. 然后再从[ 0 ] 位置开始查找
4.基础元字符
4-1.什么是元字符
1. 组成正则表达式的基本符号
2. 以符号的形式来代替文本的内容
3. 把所有的文本内容归根于一些符号来代替
4-2.常用的基础元字符
1. \s 表示一个空格
2. \S 表示一个非空格
3. \t 表示一个制表符,tab不是空格
4. \d 表示一个数字字符
5. \D 表示一个非数字字符
6. \w 表示一个数字字母下划线,任选其一
7. \W 表示一个数字字母下划线以外的任意一个
8. . 表示一个非换行内容
9. \ 表示转义符,把没有意义的内容转换成有意义的,把有意义的转换为没有意义的
代码演示:
// 1. \s 表示一个空格
const reg0 = /\s/;
console.log(reg0.test('qwer 1234'));
// 2. \S 表示一个非空格
const reg1 = /\S/;
console.log(reg1.test('qwer1234'));
// 3. \t 表示一个制表符,tab不是空格
const reg2 = /\t/;
console.log(reg2.test(' qwer1234'));
// 4. \d 表示一个数字字符
const reg3 = /\d/;
console.log(reg3.test('qwer1234'));
// 5. \D 表示一个非数字字符
const reg4 = /\D/;
console.log(reg4.test('qwer1234'));
// 6. \w 表示一个数字字母下划线,任选其一
const reg5 = /\w/;
console.log(reg5.test('_qwer1234'));
// 7. \W 表示一个数字字母下划线以外的任意一个
const reg6 = /\W/;
console.log(reg6.test('_qwer1234'));
// 8. . 表示一个非换行内容
const reg7 = /./;
console.log(reg7.test('_qwer1234'));
// 9. \ 表示转义符,把没有意义的内容转换成有意义的,把有意义的转换为没有意义的
const reg8 = /\./;//表示不是一个非换行内容而是一个普通的点
console.log(reg8.test('_qwer1234.'));
结果展示:
4-3.边界元字符
1. ^ 表示字符串开始
2. ^\d 表示以一个数字开头的字符串
3. $ 表示字符串要以什么结尾
4. \d $表示以一个数字结尾的字符串
代码演示:
// 1. ^ 表示字符串开始, ^\d 表示以一个数字开头的字符串
const reg = /^\d/
console.log(reg.test('2qwer'));
// 3. $ 表示字符串要以什么结尾, \d $表示以一个数字结尾的字符
const reg1 = /\d$/
console.log(reg1.test('2qwer11'));
结果展示:
4-4.限定元字符
1. ’ * ’ 表示出现0–多次
2. ’ + ’ 表示出现1–多次
3. ’ ?’ 表示出现0或1次
4. {n} 表示出现n次
5. {n,} 表示n–多次
6. {n,m} 表示n–m次
代码演示:
// 1. ' * ' 表示出现0--多次
const reg0 = /\d*/
console.log(reg0.test('22qwer'));
// 2. ' + ' 表示出现1--多次
const reg1 = /\d+/
console.log(reg1.test('22qwer'));
// 3. ' ?' 表示出现0或1次
const reg2 = /\d?/
console.log(reg2.test('qwer'));
// 4. {n} 表示出现n次
const reg3 = /\d{3}/
console.log(reg3.test('22qwer'));
// 5. {n,} 表示n--多次
const reg4 = /\d{3,}/
console.log(reg4.test('222qwer'));
// 6. {n,m} 表示n--m次
const reg5 = /\d{1,2}/
console.log(reg5.test('22qwer'));
结果展示:
4-5.正则的贪婪和非贪婪
1. 非贪婪就是所有限定字符后面加上一个 ’ ? ’
2. 贪婪就是按照最高标准去捕获字符串
3. 非贪婪就是按照最低标准去捕获字符串
代码演示:
// 1.贪婪就是在你捕获字符串内容的时候尽可能多的去捕获
const reg = /\d+/;
console.log(reg.exec('qwer1234'));//捕获的所有数字
// 2.非贪婪就是在你捕获字符串内容的时候尽可能少的去捕获
const reg1 = /\d+?/;//捕获的最低要求一个数字
console.log(reg1.exec('qwer1234'));
结果展示 :
4-6.正则的特殊字符
1. ()表示一个整体
2. (?:)表示匹配但不捕获
3. | 表示 或
4. [ ] 表示里面的任意一个都行
5. [^] 表示不是括号里面的任意一个都行
6. – 表示至 到的意思
代码演示:
// 1. ()表示一个整体
const reg = /(qwer)/;
console.log(reg.exec('qwer1'));
// 2. (?:)表示匹配但不捕获
const reg1 = /(?:qwer)/;
console.log(reg1.exec('qwer1'));
// 3. | 表示 或
const reg2 = /^(qwer)|(1234)$/;
console.log(reg2.test('1234'));
console.log(reg2.test('qwer'));
// 4. [ ] 表示里面的任意一个都行
const reg3 = /[qwer]/;
console.log(reg3.test('q'));
// 5. [^] 表示不是括号里面的任意一个都行
const reg4 = /[^qwer]/;
console.log(reg4.test('1'));
// 6. -- 表示至 到的意思
const reg5 = /^[a-z]$/;
console.log(reg5.test('h'));
结果展示:
5.正则的预查
5-1.正向预查
1. 正向肯定预查(捕捉内容的时候后面跟着的必须是我预定的),(?=)
2. 正向否定预查(捕捉内容的时候后面跟着的除了我预定的内容其他都可以),(?!)
代码演示:
// 1. 正向肯定预查(捕捉内容的时候后面跟着的必须是我预定的)
// 例子:ES2013 ES2014 ES2016如果说想要捕获2013和2014的ES,后面就要跟着
const reg = /ES(?=2013|2014)/
console.log(reg.exec('ES2013'));
console.log(reg.exec('ES2014'));
console.log(reg.exec('ES2016'));
// 2. 正向否定预查(捕捉内容的时候后面跟着的除了我预定的内容其他都可以)
const reg1 = /ES(?!2016)/
console.log(reg1.exec('ES2013'));
console.log(reg1.exec('ES2014'));
console.log(reg1.exec('ES2016'));
结果展示:
5-2.负向预查
1. 负向肯定预查,(捕获内容的时候前面必须是我选择的某一个)(?<=)
2. 负向否定预查,(捕获内容的时候前面除了是我选择的都可以)(?<=)
代码演示:
// 1. 负向肯定预查,(捕获内容的时候前面必须是我选择的某一个)(?<=)
// 举例:要在2013ES,2014ES,2016ES中选择2013和2014
const reg = /(?<=2013|2014)ES/;
console.log(reg.exec('2013ES'));
console.log(reg.exec('2014ES'));
console.log(reg.exec('2016ES'));
// 2. 负向否定预查,(捕获内容的时候前面除了是我选择的都可以)(?<=)const reg = /(?<=2013|2014)ES/;
const reg1 = /(?<!2016)ES/;
console.log(reg1.exec('2013ES'));
console.log(reg1.exec('2014ES'));
console.log(reg1.exec('2016ES'));
结果展示:
6.重复出现符号
6-1.\num
1. \num 表示重复出现第几个()里出现的内容
2. \1 、\2 表示重复出现可被捕获的第n个()里字中出现字符
代码演示:
// 重复出现第一个字符
const reg = /(qwer|tyui)1234\1/
console.log(reg.test('qwer1234qwer'));
// 重复出现第二个字符,\2要跟第二个()里面出现的内容一样
const reg1= /([qwer])\d+([qwer])\d+\2/
console.log(reg1.test('q1234e1234e'));
结果展示:
7.正则的标识符
7-1.简介
1. i 表示忽略大小写
2. g 表示全局
3. y 表示粘性全局
4. 是写在正则表达式的外面,用来修饰正则的
5. 语法:/qwer/igy
6. new RegExp(‘qwer’,‘igy’)
7-2. i 忽略大小写
代码演示:
// 如果说匹配qwer时,有一个时大写,就会输出false
const reg = /qwer/;
console.log(reg.test('QWEr'));//false
// 但是如果正则表达式外面加上i在进行匹配就会时true
const reg1 = /qwer/i;
console.log(reg1.test('QWEr'))//true
结果展示:
7-3. g全局
1. 匹配和捕获的时候都只能捕获或者匹配第一个
2. 当有全局标识符的时候,第二次捕获会从第一次的结束位置开始查找
3. 当找不到了就返回null
4. 然后找不到过后再进行捕获又从第一个位置开始捕获
5. exec和test的使用都影响着开始位和结束位
代码演示:
// 匹配和捕获的时候都只能捕获或者匹配第一个
const reg2 = /\d{3}/g;
console.log(reg2.exec('qwer123qwer456qwer789'));
// 当有全局标识符的时候,第二次捕获会从第一次的结束位置开始查找
console.log(reg2.exec('qwer123qwer456qwer789'));
// 当找不到了就返回null
console.log(reg2.exec('qwer123qwer456qwer789'));
console.log(reg2.exec('qwer123qwer456qwer789'));
// 然后找不到过后再进行捕获又从第一个位置开始捕获
console.log(reg2.exec('qwer123qwer456qwer789'));
结果展示:
7-4. y粘性全局
1. 粘性布局必须要连续跟着的捕获,中间不能有其他字符
2. 当有粘性标识符的时候,第二次捕获会从第一次的结束位置开始查找跟查找到的字符一样属性的字符
3. 当找不到了就返回null
4. 然后找不到过后再进行捕获又从第一个位置开始捕获
代码演示:
// 粘性布局必须要连续跟着的捕获,中间不能有其他字符
const reg3 = /\d{3}/y
console.log(reg3.exec('123456789'));//123
console.log(reg3.exec('123456789'));//456
console.log(reg3.exec('123456789'));//789
console.log(reg3.exec('123456789'));//null
console.log(reg3.exec('123456789'));//123
结果展示:
8.两种创建表达式的区别
8-1.字面量创建
- 不能进行字符串拼接
- 书写元字符直接写\x
8-2.内置构造函数创建
- 可以进行字符串拼接
- 书写元字符写\x
9.字符串和正则合作的几个方法
9-1.search()
代码演示:
// 1.search(字符串片段或者正则)
const str = 'qwer1234';
console.log(str.search(/\d{3}/));//返回对应的索引
结果展示:
9-2.replace()
代码演示:
// 2.replace(字符串片段或者正则)
const str1 = 'qwer1234qwer1234';
console.log(str1.replace(/\d{4}/g,'****'));
结果展示:
9-3.match()
代码演示:
// 3.match(字符串片段或者正则)
// 返回满足条件的片段,返回值和exec一样
const str2 = '我是刘备';
console.log(str2.match('刘备'));
结果展示:
10.表单验证实例
10-1.HTML部分
<!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>
<link rel="stylesheet"
href="https://at.alicdn.com/t/c/font_3573043_y2r119vl44.css?spm=a313x.7781069.1998910419.46&file=font_3573043_y2r119vl44.css">
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="./css/normalize.css">
</head>
<body>
<div class="container">
<div class="backImg"></div>
<div class="login">
<form action="get">
<h1>注册页面</h1>
<!-- 用户名注册 -->
<label class="user"> <span>用户名: </span> <input type="text">
<i class="iconfont"></i>
<p>用户名必须是以字母数字开头,不能以下划线开头</p>
</label>
<!-- 密码强度验证 -->
<label class="pwd">
<span>密码:</span><input type="text" name="pwd">
<p class="low">弱</p>
<p class="mid">中</p>
<p class="strong">强</p>
</label>
</form>
</div>
</div>
</body>
<script src="./js/login.js"></script>
</html>
10-2.login.css部分
body{
background:rgb(173, 173, 190);
}
.container{
width: 1000px;
height: 500px;
background-color: aquamarine;
margin: 0 auto;
position: relative;
top: 60px;
border-radius: 80px;
}
.backImg{
width: 500px;
height: 500px;
position: absolute;
background-color: aqua;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-image: url(../img/631d10a029073485f773a0158b4a4d78.jpeg);
background-repeat: no-repeat;
background-size: 500px 600px;
}
.login{
width: 500px;
height: 500px;
position: absolute;
background-color: #6f6c6c;
left: 500px;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
}
.login > form{
width: 360px;
height: 400px;
background-color: white;
margin: 0 auto;
border-radius: 20px;
position: relative;
margin-top: 50px;
}
form > h1{
width: 200px;
text-align: center;
margin: 0 auto;
position: relative;
top: 10px;
}
.user , .pwd{
display: block;
width: 320px;
height: 70px;
/* background-color: aqua; */
margin: 0% auto;
margin-top: 40px;
font-size: 22px;
}
.user > input , .pwd > input{
outline: none;
width: 200px;
height: 30px;
position: absolute;
margin-left: 80px;
}
.user > span ,.pwd >span{
width: 98px;
display: block;
position: absolute;
}
.user >i{
display: block;
width: 20px;
height: 20px;
position: absolute;
margin-left: 290px;
margin-top: 5px;
}
.user > p{
font-size: 12px;
color: red;
position: absolute;
margin-top: 40px;
margin-left: 18px;
display: none;
}
.icon-zhengque{
color: greenyellow;
font-size: 24px;
}
.icon-cuowu{
color: red;
font-size: 24px;
}
/* 密码验证 */
.pwd > p{
position: absolute;
margin-top: 40px;
display: block;
width: 80px;
height: 30px;
background-color: #ccc;
text-align: center;
line-height: 30px;
font-size: 18px;
}
.mid{
left: 140px;
}
.strong{
left: 260px;
}
/* 增加颜色 */
.low.active{
background-color: red;
}
.mid.active{
background-color: orange;
}
.strong.active{
background-color: green;
}
10-3.normalize.css部分
/* 重置样式表 */
/* 重置内外边距 */
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* 去除图片底部4px白边 */
img{
vertical-align: middle;
}
/* 去除li的点 */
ul{
list-style: none;
}
/* 重置a标签的默认样式 */
a{
text-decoration: none;
color: black;
}
10-5.font.css部分
@font-face {
font-family: "iconfont"; /* Project id 3573043 */
src: url('../iconfont/iconfont.woff2') format('woff2'),
url('../iconfont/iconfont.woff') format('woff'),
url('../iconfont/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zhengque:before {
content: "\e6a6";
}
.icon-cuowu:before {
content: "\e6a8";
}
10-5.login.js部分
// 获取input
let inp = document.querySelector('input');
// 获取i标签
let i = document.querySelector('i');
// 获取错误信息p
let p = document.querySelector('p');
// 创建正则
let reg = /^[0-9a-zA-Z]\w{5,11}$/
// 添加事件
inp.addEventListener('input',function(){
if(reg.test(this.value)){
// 正确显示,提示正确信息
console.log('符合');
p.innerText = '用户名符合要求';
p.style.color = 'green';
i.classList.remove('icon-cuowu')
i.classList.add('icon-zhengque')
}else{
// 错误显示,提示信息
console.log('不符合');
p.innerText = '必须以字母数字开头,不能以下划线开头的5-11位数';
p.style.color = 'red';
i.classList.remove('icon-zhengque')
i.classList.add('icon-cuowu')
p.style.display = 'block';
}
})
// 密码验证
// 只有字母或者数字或特殊符号,强度为弱
// 有两者以上为中等
// 三者都有为强
// 准备正则
const numReg = /\d+/;
const zimuReg = /[a-z]/i;
const labelReg = /[@#%&\*\$]/;
// 获取事件
let pwdInp = document.querySelector('input[name=pwd]');
let pwdP = document.querySelectorAll('.pwd > p')
// 添加事件
pwdInp.addEventListener('input',function(){
let runk = 0;
if(numReg.test(this.value)){runk++};
if(zimuReg.test(this.value)){runk++};
if(labelReg.test(this.value)){runk++};
console.log(runk);
// 给对应的强度添加active
for(let i = 0 ; i < runk ; i++){
for(let j = 0 ; j < pwdP.length ; j++){
pwdP[j].classList.remove('active');
}
pwdP[i].classList.add('active');
}
})