one 利用正则来区分密码的强弱程度
<!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>
.box {
margin-top: 8px;
}
span {
width: 70px;
height: 20px;
line-height:20px;
display: inline-block;
font-size: 18px;
text-align: center;
background: deeppink;
}
</style>
</head>
<body>
<input type="password" name="" id="txt">
<div class="box" id="box">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
<script>
/*
1 弱 纯数字或纯字母或纯其他特殊字符
2 中 有两类字符
3 强 包含数字 字母和 特殊字符
*/
function $(id) {
return document.getElementById(id);
}
var regone = /^\d+$/;//纯数字一次到多次;
var regtwo = /^[a-zA-Z]+$/;//纯字母一次到多次;
var regthree = /^[@#!%^_&]+$/;//是纯特殊字符;
var regfour = /\d+/;//包含数字；
var regfive = /[a-zA-z]+/;//包含字母；
var regsix = /[!@#&%^_]+/;//包含特殊字符；
var text = $('txt');
var spans = document.getElementsByTagName('span');
console.log(spans);
text.onkeyup = function(){
// 先让三个span颜色还原
for(var i = 0;i<spans.length;i++){
spans[i].style.background = 'deeppink';
}
var pst = this.value;
if(pst.length<6){
return;
}
if(regone.test(pst) || regtwo.test(pst) || regthree.test(pst)){
$('box').children[0].style.background = 'green';
}else if(regfour.test(pst) && regfive.test(pst) && regsix.test(pst)){
$('box').children[2].style.background = 'green';
}else{
$('box').children[1].style.background = 'green';
}
}
</script>
</body>
</html>
效果如下图
image.png
two 正则捕获的贪婪性的了解
<!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>
</head>
<body>
<script>
/*
正则捕获方法
exec
*/
// var str = "along2018qianduan2019asa123asa";
// var str2 = "hello vue";
// var reg = /\d+?/g; // 此处的问号?不是量词含义 而是表示阻止正则捕获的贪婪性
// console.log(reg.exec(str));
var str = "along{2018}qianduan{2019}asa{123}asa";
var reg = /\{(?:\d+)\}/g; // ?:表示只匹配不捕获
console.log(reg.exec(str)); // 分组捕获
console.log(str.match(reg));
/*
?
1 量词元字符
出现零次或一次
/a?/
2 取消贪婪性
/\d+?/ 只捕获最短匹配的内容
3 只匹配捕获
?:
*/
</script>
</body>
</html>
three 正则的常用方法
<!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>
</head>
<body>
<script>
/*
正则捕获方法
exec
1 假如匹配到 捕获的结果是一个数组
0 ----- 捕获的内容
index 捕获的索引
input 原始检测字符串
假如匹配不到 结果就是null
2 执行一次exec方法只能捕获到第一个与正则匹配的内容 这叫
正则捕获懒惰性
3 正则捕获懒惰性原因就是lastIndex属性不变,手动修改lastIndex
属性也不能改变其懒惰性
4 要想改变正则捕获懒惰性，只能在正则后面加修饰符g,并且反复
调用exec方法
*/
var str = "along2018qianduan2019asa123asa";
var str2 = "hello vue";
var reg = /\d+/g;
console.log(reg.lastIndex);// 0
console.dir(reg.exec(str)); //2018
console.log(reg.lastIndex);//9
console.dir(reg.exec(str)); //2019
console.log(reg.lastIndex); // 21
console.dir(reg.exec(str)); // 123
console.dir(reg.exec(str));//null
console.log(reg.exec(str2));//null
//利用正则的exec的方法将字符串中的数字提取出来放入一个数组的方法
function execAll(reg,str) {
var res = [];
var val = reg.exec(str);
while (val) {
res.push(val[0]);
val = reg.exec(str);
}
return res;
}
console.log(execAll(reg,str));
// 也可以直接用字符串match方法
var res = str.match(reg);
console.log(res);
</script>
</body>
</html>
