正则简单学习
浅拷贝----复制对象引用地址
<!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>
<script>
/*浅拷贝：拷贝就是复制，就相当于把一个对象中的所有内容，复制一个给另一个对象，
直接复制，或者说，就是吧一个对象的地址给了另一个对象，他们指向相同，两个对象
之间的属性或者方法，都可以使用
*/
var obj1 = {
age:10,
sex:'男',
car:["奔驰","宝马","法拉利"]
}
var obj2 = {}
//写一个函数，作用，将一个对象的属性赋值到另一个对象中，浅拷贝
function extend(a,b){
// 循环时，空对象的key直接使用key
for(var key in a){
b[key]=a[key];
}
}
extend(obj1,obj2)
console.dir(obj2);
console.dir(obj1);
</script>
</head>
<body>
</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>
<script>
var obj1 ={
age:10,
sex:"男",
car:["兰博基尼","法拉利","比亚迪","吉利"],
computer:{
name:"dell",
age:6,
color:"黑白色"
}
};
var obj2 ={};
//通过函数实现，把对象a中的所有的数据深拷贝到对象b中
function extend(a,b){
for(var key in a){
//先获取a对象中每个属性的值
var item = a[key];
if(item instanceof Array){
//如果是数组，那么在b对象中添加一个新的属性，并且属性的值也是数组
b[key]=[];
//调用这个方法，吧a对象这个数组的属性一个一个复制到b对象的这个数组属性中
extend(item,b[key]);
}
else if(item instanceof Object){
b[key]={};
extend(item,b[key]);
}
else{
b[key]=item
}
}
}
extend(obj1,obj2);
for(var i in obj2){
console.log(obj2[i]);
}
</script>
</head>
<body>
</body>
</html>
正则
正则表达式：页脚规则表达式，按照一定的规则组成一个表达式，这个表达式的作用主要匹配字符串的
正则表达式：页脚规则表达式，按照一定的规则组成一个表达式，这个表达式的作用主要匹配字符串的
正则表达式的作用：匹配字符串的
大多编程语言都可以使用
正则表达式的组成：由元字符或者限定符组成的一个式子
元字符：
.表示的是：除了\n以外的任意的一个字符 "fdsf25";
[]表示的是：范围，[0-9]表示的是0-9之间任意的一个数字，“789"[0-9]
[a-z]表示的是：所有的小写的字母中的任意的一个
[A-Z]表示的是：所有的大写的字母中的任意的一个
[a-zA-Z]表示的是：所有的字母中的任意的一个
[0-9a-zA-z]表示的是：所有的数字或者字母中的一个
[]另一个函数：把正则表达式中元字符的意义干掉
[.]就是一个.
|或者 [0-9]|[a-z]表示的是要么是一个数字，要么是一个小写的字母
()分组 提升优先级 [0-9]|([a-z])|[A-Z] 先算中间的
- 表示的是：前面的表达式出现了0次到多次
[a-z][0-9]* 小写字母中的任意一个，后面是要么没有数字，要么是多个数的
都是元字符，但是也可以叫限定符，下面的这些
- 表示的是：前面的表达式出现了1次到多次
[a-z][9]+ 小写字母一个后面最少一个9，或者多个9
? 表达的是：前面的表达式出现了0次到1次，最少是0次，最多1次,另一个义：组织贪婪模式
[4][a-z]? "1115544aj"
限定符：限定前面的表达式出现的次数
{0,} 表示的是前面的表达式出现了0次到多次，和*一样
{1,} 表示的是前面的表达式出现了1次到多次，和+一样
{0,1} 表示的是前面的表达式出现了0次到1次，和?一样
{5,10} 表示的是前面的表达式出现了5次到10次
^表示的是以什么开始，或者是取非 [1]以数字开头
[^0-9]取反，非数字
[^a-z]取反，非小写字母
[^a-zA-Z]
$ 表示已什么结束 [0-9][a-z]$必须以小写字母结束
\d 数字中的任意一个
\D 非数字中的一个
\s 空白符的一个
\S 非空白符的一个
\w 非特殊符号 _
\W 特殊符号
\b 单词的边界
简单例子
<!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>
<script>
/*
经验：1、找规律 2、不要追求完美
身份证的正则表达式
15位或者18位
([1-9][0-9]{14})|([1-9][0-9]{16}[0-9Xx])
([1-9][0-9]{14})([0-9]{2}[0-9Xx])?
1、座机号码正则表达式
010-1984555
5075-5635555
[0-9]{3,4}[-][0-9]{8}
\d{3,4}[-]\d{8}
2、QQ号的正则表达式
[1-9][0-9]{4,11}
\d{5,11}
3.手机号码的正则表达式
([1][358][0-9][0-9]{8})|([1][4][0-9]{8})
4.邮箱的正则表达式
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+[.]([a-zA-Z]+){1,2}
*/
</script>
</head>
<body>
</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>
.slevel0{
margin-left: 80px;
width: 120px;
height: 14px;
border: 1px solid #CCC;
}
.slevel1{
margin-left: 80px;
width: 50px;
height: 14px;
background-color: red;
}
.slevel2{
margin-left: 80px;
width: 100px;
height: 14px;
background-color: orange;
}
.slevel3{
margin-left: 80px;
width: 150px;
height: 14px;
background-color: green;
}
</style>
</head>
<body>
<label for="">请输入密码</label>
<input type="text" id="password">
<br/>
<label for="">密码强度</label>
<div id="slevel" class="slevel0"></div>
<script>
window.onload=function(){
function my$(id){
return document.getElementById(id);
}
/*
思路：
1、先定义一个方法获取输入的密码级别
2、对键盘抬起进行级别判断
3、给相应的密码强度
密码强度：数字 字母 特殊符号
1 数字| 字母 |特殊符号
2 数字 字母|字母 特殊符号|数字特殊符号
3 数字 字母 特殊符号
*/
//获取文本框键盘注册键盘抬起事件
my$("password").onkeyup=function(){
//优化代码----因为返回的级别对应class的级别，所以
if(this.value.length>=6){
var levl = getLevl(this.value);
my$("slevel").className = "slevel"+levl;
}else{
my$("slevel").className = "slevel0"
}
//---更加优化
// my$("slevel").className = "slevel"+(this.value.length>=6?getLevl(this.value):0) ;
// //每次键盘抬起都要获取文本框的内容，验证文本框中的内容，根据内容显示级别
// if(this.value.length>=6){
// var levl = getLevl(this.value);
// if(levl==1){
// //弱
// my$("slevel").className = "slevel1";
// }
// else if(levl==2){
// my$("slevel").className = "slevel2";
// }
// else if(levl==3){
// my$("slevel").className = "slevel3";
// }
// }else{
// my$("slevel").className = "slevel0";
// }
}
//给我密码 ，我返回对应的级别
function getLevl(pwd){
//默认级别
var levl = 0;
//判断密码中是否有数字|字母|特殊符号
if(/[0-9]/.test(pwd)){
levl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
levl++;
}
//判断密码中是否有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
levl++;
}
return levl;
}
}
</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>
</head>
<body>
请您输入邮箱地址：<input type="text" value="" id="email">
<script>
//获取文本框，注册失焦事件
document.getElementById("email").onblur=function(){
var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
if(reg.test(this.value)){
this.style.backgroundColor = "pink";
}
else{
this.style.backgroundColor = "red";
}
}
</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>
</head>
<body>
请输入名字:
<input type="text" id="name">
<script>
//escape()
document.getElementById("name").onblur=function(){
var reg = /^[\u4e00-\u9fa5]+$/;
if(reg.test(this.value)){
this.style.backgroundColor= "red";
}else{
this.style.backgroundColor= "yellow";
}
}
</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>
</head>
<body>
<label for="">QQ</label><input type="text" id="qq"><span></span><br/>
<label for="">手机</label><input type="text" id="e_phone"><span></span><br/>
<label for="">邮箱</label><input type="text" id="e_Email"><span></span><br/>
<label for="">座机</label><input type="text" id="e_temlete"><span></span><br/>
<label for="">姓名</label><input type="text" id="e_name"><span></span><br/>
<script>
//
function my$(id){
return document.getElementById(id);
}
//qq
checkInput(my$("qq"),/^\d{5,9}$/) ;
//手机
checkInput(my$("e_phone"),/^\d{11}$/) ;
//邮箱
checkInput(my$("e_Email"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/) ;
//座机
checkInput(my$("e_temlete"),/^\d{3,4}[-]\d{7,8}$/) ;
//
checkInput(my$("e_name"),/^[\u4e00-\u9fa5]+$/) ;
//定义一个方法 传如input的id和正则表达式
function checkInput(input,reg){
//为input注册失焦事件
input.onblur=function(){
if(reg.test(this.value)){
this.nextElementSibling.innerText = "正确了";
this.nextElementSibling.style.color ="green";
}
else{
this.nextElementSibling.innerText = "错误了";
this.nextElementSibling.style.color ="red";
}
}
}
</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>
<script>
//正则表示中，/g表示全局
// /i表示忽略大小写
var str = "中国移动：10086，中国联通10010，中国电信10000";
var att = str.match(/\d{5}/g);
console.log(att);
//提取这里的日
var str1 = "2019-01-03";
var arr = str1.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
//自动提取
console.log(RegExp.$3);
//替换
var str2 = "小航好帅哦，真的是太帅了，帅，就是真帅";
str2 = str2.replace(/帅/g,"猥琐");
console.log(str2);
//删除空白符
var str3 = "哦嘛噶 ，好开心啊 啊啊啊 ";
str3 = str3.replace(/\s+/g,"");
console.log(str3);
//所有的h都替换成S /ig
var str4 = "Hhpph";
str4 = str4.replace(/[h]/ig,"S");
console.log(str4);
//exec方法
var str6 = "中国移动：10086，中国联通10010，中国电信10000";
//var att = str.match(/\d{5}/g);
var reg = /\d{5}/g;
var arr5 = reg.exec(str6);
while(arr5!=null){
console.log(arr5[0]);
arr5=reg.exec(str6)
}
console.log(arr5);
</script>
</head>
<body>
</body>
</html>
真数组和伪数组的区别
//伪数组和数组的区别
//真数组的长度可变的
//伪数组的长度不可变
//真数组的可以使用数组中的方法
//伪数组的不可以使用数组中的方法
var arr = [10,20,30];
var obj = {
0:10,
1:20,
2:30
}
//遍历数组
arr.forEach(function(item){
console.log(item)
})
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
</script>
0-9 ↩︎
javascript css html jquery bootstrap vue webpack es6
