正则表达式
一、概念
1.元字符
① · 表示的是除了\n以外的任意一个字符
② [] 第一个含义表示的是范围，[0-9]表示的是0到9之间的任意一个数字
[a-z]表示的是所有的小写字母的任意一个
[A-Z]表示的是所有得大写字母的任意一个
[0-9a-zA-Z]表示的是所有的数字大小写字母的任意一个
第二个含义表示的是把正则表达式中元字符的意义去掉,比如[·]表示一个·
③ | 表示或者,比如[0-9]|[a-z]表示要么是一个数字,要么是一个小写字母
④ () 表示的是分组,提升优先级
⑤ * 表示:前面的表达式出现了0次到多次(也是限定符)
⑥ + 表示:前面的表达式出现了1次到多次(也是限定符)
⑦ ? 第一个含义表示:前面的表达式出现了0次到1次(也是限定符)
⑧ ? 第二个含义阻止贪婪模式
2.限定符
① {0,} 表示:前面的表达式出现了0次到多次,等同于 *
② {1,} 表示:前面的表达式出现了1次到多次,等同于 +
③ {0,1} 表示:前面的表达式出现了0次到1次,等同于 ?
④ {4} 表示:前面的表达式出现了4次
⑤ {5,10} 表示:前面的表达式出现了5次到10次
⑥ {,100} 不能这种写
⑦ ^ 第一个含义表示:以什么开始,如^[0-9]表示以数字开头
第二个含义表示:取非(取反),如[^0-9]表示非数字
⑧ $ 表示以什么结束,如[0-9]$表示以数字结束
⑨注意:^[0-9][a-z]$相当于严格模式,表示只能以数字开头,小写字母结束,比如"5f"这样
3.特殊
① \d 数字中的任意一个-------- \D 非数字的任意一个
② \s 空白符的一个--------- \S 非空白符的一个
③ \W 特殊符号 --------- \w 非特殊符号,等价于[0-9a-zA-Z_]
④ \b 单词的边界
二、案例（身份证、座机号码、QQ号、手机号码、邮箱）
<!-- 1.身份证的正则表达式(15位或者18位) ([1-9][1-9]{14})|([1-9][0-9]{16}[0-9xX]) ([1-9][0-9]{14})([0-9]{2}[0-9xX])? 2.座机号码的正则表达式 比如:010-123456789 0123-12345678 [0-9]{3,4}[-][0-9]{8} \d{3,4}[-]\d{8} 3.QQ号码的正则表达式 [1-9][0-9]{4,10} \d{5-11} 4.手机号码的正则表达式 130 131 132 133 134 135 136 137 138 139 143 147 150 151 152 153 154 155 156 157 158 159 170 171 173 176 177 180 181 182 183 184 185 186 187 188 189 ([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8}) \d{11} 5.邮箱的正则表达式-----记住 [0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2} -->
三、创建正则表达式对象
<script> //创建正则表达式对象:通过构造函数的方式 //var reg=new RegExp("\d{5}");----这种写法错误 //var reg=new RegExp("\\d{5}");----正确,也可以下面这样写 var reg=new RegExp(/\d{5}/); var str="我的手机号码是:10010" var flag=reg.test(str); console.log(flag);//true-----有则为真 //创建正则表达式对象:字面量的方式 var reg=/\d{1,5}/; var flag=reg.test("我的手机号码是:10086"); console.log(flag);//true </script>
四、案例（验证密码强度、验证邮箱、验证中文名、验证表单）
-
验证密码强度
<style> #strength{ float: left; height: 20px; } #strengthlevel{ float: left; } .strengthLv0{ width: 300px; height: 20px; } .strengthLv1{ width: 100px; height: 20px; border: 2px solid red; background: red; } .strengthLv2{ width: 200px; height: 20px; border: 2px solid red; background: yellow; } .strengthLv3{ width: 300px; height: 20px; border: 2px solid red; background: blue; } </style>
<label for="pwd">密码</label> <input type="text" id="pwd" maxlength="16"> <div> <em id="strength">密码强度:</em> <div id="strengthlevel" class="strengthLv0"></div> </div> <!--说明:有数字或者字母或者特殊符号的一种----1级强度 有数字或者字母或者特殊符号的两种-----2级强度 有数字或者字母或者特殊符号的三种-----3级强度 --> <script> //获取文本框注册键盘抬起事件 document.getElementById("pwd").onkeyup=function(){ document.getElementById("strengthlevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value):0); }; //getLvl函数-----给我密码,我返回对应的级别 function getLvl(pwd){ var lvl=0;//默认0级 //判断密码中是否有数字 if(/[0-9]/.test(pwd)){ lvl++; } //判断密码中是否有字母 if(/[a-zA-Z]/.test(pwd)){ lvl++; } //判断密码中是否有特殊符号 if(/[^0-9a-zA-Z_]/.test(pwd)){ lvl++; } return lvl;//1或2或3 } </script>
-
验证邮箱
<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="yellow"; }else{ this.style.backgroundColor="red"; } };
-
验证中文名
请输入你的名字:<input type="text" value="" id="userName"/> <!-- 是中文名字,则黄色,否则红色 --> <script> document.getElementById("userName").onblur=function(){ var reg=/^[\u4e00-\u9fa5]{2,6}$/; if(reg.test(this.value)){ this.style.backgroundColor="yellow"; }else{ this.style.backgroundColor="red"; } }; </script>
-
验证表单
<div class="container" id="dv"> <label for="qq"></label>Q Q <input type="text" name="" id="qq"><span></span><br> <label for="phone"></label>手机 <input type="text" name="" id="phone"><span></span><br> <label for="email"></label>邮箱 <input type="text" name="" id="email"><span></span><br> <label for="telphone"></label>座机 <input type="text" name="" id="telphone"><span></span><br> <label for="fullname"></label>姓名 <input type="text" name="" id="fullname"><span></span><br> </div> <script> //函数---验证当前的文本框是否匹配并显示结果 function checkInput(input,reg){ input.onblur=function(){ if(reg.test(this.value)){ this.nextElementSibling.innerText="正确"; this.nextElementSibling.color="yellow"; }else{ this.nextElementSibling.innerText="错误"; this.nextElementSibling.color="red"; } } } //调用 //QQ checkInput(document.getElementById("qq"),/^\d{5,11}$/); //手机 checkInput(document.getElementById("phone"),/^\d{11}$/); //邮箱 checkInput(document.getElementById("email"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/); //座机 checkInput(document.getElementById("telphone"),/^\d{3,4}[-]\d{7-8}$/); //姓名 checkInput(document.getElementById("fullname"),/^[\u4e00-\u9fa5]{2,6}$/); </script>
五、和正则表达式相关的方法(match、提取数组、replace、exec)
<script> //1.match()方法----字符串的方法.既可以传入字符串,也可以传入正则,返回的是数组 var str1="中国移动:10086,中国联通10010,中国电信:10000"; var arr1=str1.match(/\d{5}/g);//g表示全局 console.log(arr1);//["10086", "10010", "10000"]
//2.如何提取组 var str2="2018-5-27"; var arr2=str2.match(/(\d{4})[-](\d{1})[-](\d{2})/g); console.log(arr2);//["2018-5-27"] console.log(RegExp.$1);//2018 console.log(RegExp.$2);//5 console.log(RegExp.$3);//27
//3.replace()方法------字符串的方法 var str3="源于开发者2017，服务开发者2017"; var arr3=str3.replace(/\d{4}/g,"2018"); console.log(arr3);//源于开发者2018，服务开发者2018 var str4="ahdfHgFhgHHgh"; var arr4=str4.replace(/h/gi,"Z");//i表示忽略字母大小写 console.log(arr4);//aZdfZgFZgZZgZ
//4.exec()方法-----正则表达式调用的方法,不是字符串 //如果匹配成功，exec() 方法返回一个数组，并更新正则表达式对象的属性。 //返回的数组将完全匹配成功的文本作为第一项，将正则括号里匹配成功的作为数组填充到后面。 //如果匹配失败，exec() 方法返回 null。 var str5="中国移动:10086,中国联通10010,中国电信:10000"; var reg=/\d{5}/g; var arr5= reg.exec(str5); console.log(arr5);//["10086", index: 5, input: "中国移动:10086,中国联通10010,中国电信:10000", groups: undefined] </script>
六、数组和伪数组的区别
- 真数组的长度可变,伪数组的长度不可变
- 真数组可以使用数组方法------因为这些方法是来自Array的原型方法
<script> var trueArr=[1,2,3,4,5]; var flaseArr={ 0:1, 1:2, 2:3, 3:4, 4:5, length:5 } //长度是否可变 trueArr[5]=6; flaseArr[5]=6; console.log(trueArr.length);//6 console.log(flaseArr.length);//5 //是否可以使用方法 console.log(trueArr.push(6));//7----push方法返回长度 console.log(false.push(6));//报错 </script>
【转载文章务必保留出处和署名，谢谢！】
