JS高级学习:正则表达式
2019-04-26 本文已影响0人
Merbng
正则表达式
- . 表示除了/n以外的任意的一个字符
- [] 表示的是范围，[0-9]表示0到9之间的任意一个数字
- [a-z] 表示 所有的小写字母中的任意的一个
- [A-Z] 表示 所有的大写字母中的任意的一个
- [0-9a-zA-Z] 表示 所有的数字或者字母中的一个
- []另一个涵义，把正则表达式中元字符的意义干掉。[.] 就表示一个.
- | 或者 [0-9]|[a-z] 表示的是要么是一个数字，要么是一个小写字母
- () 分组，提升优先级 [0-9]|([a-z])|[A-Z]
- ([0-9])([1-5])([a-z]) 三组， 从最左边开始计算
- * 表示的是 前面的表达式出现了0次到多次
- [a-z][0-9]* 小写字母中任意一个，后面 要么没有数字，要么是多个数字
- + 表示的是 前面的表达式出现了1次到多次
[a-z][9]+ 小写字母一个后面最少一个9，或者多个9 - ? 表示的是:前面的表达式出现了0次到1次，最少是0次，最多1次，另一个涵义：阻止贪婪模式
限定符
-
{}更加明确前面的表达式出现的次数
-
{0,} 表示的是前面的表达式出现了0次到多次，和*一样
-
{1,} 表示的是前面的表达式出现了1次到多次，和+ 一样
-
{0,1} 表示前面的表达式出现了0次到1次， 和？ 一样
-
{5,10}表示前面的表达式出现了5次到10次
-
{4}前面的表达式出现了4次
-
^ 表示的是以开始，或者是取非（取反） ^[0-9] 以数字开头
^[a-z] 以小写字母开始
[^0-9] 取反， 非数字 [^a-z] 非小写字母
[^0-9a-zA-Z_] 特殊符号 _不算特殊符号 -
以小写字母结束
-
^[0-9][a-z]$ 严格模式，必须是一个数字跟一个字母
-
\d 数字中的任意一个 相当于[0-9]
-
\D 非数字中的任意一个
-
\s 空白符的一个
-
\S 非空白符
-
\w 非特殊符号
-
\W 特殊符号
-
\b 单词的边界
身份证正则表达式：
15位或18位
([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])
([1-9][0-9]{14})([0-9]{2}[0-9xX])?
座机号码
010-6012141
0531-6127014
[0-9]{3,4}[-][0-9]{8}
\d{3,4}[-]/d{8}
QQ号码
[1-9][0-9]{5,10}
手机号码
([1][358][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})
\d{11}
邮箱正则表达式
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]){1,2}
案例：验证密码的强度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv {
width: 300px;
height: 200px;
position: absolute;
left: 300px;
top: 100px;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
</head>
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16">
<!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="../js/common.js"></script>
<script type="text/javascript">
// 获取文本框键盘抬起事件
my$('pwd').onkeyup = function() {
// 每次键盘抬起都要获取文本框的内容,验证文本框中有什么东西,
// 得到一个级别,然后下面的div显示对应的颜色
my$('strengthLevel').className = "strengthLv" + (this.value.length >= 6 ? getLvl(this.value) : 0);
};
// 给我密码,返回对应的级别
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;
};
</script>
</body>
</html>
案例：验证用户输入的是否是邮箱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请输入邮箱地址：<input type="text" name="" id="email" />
<script type="text/javascript">
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="green";
}else{
this.style.backgroundColor="red";
}
}
</script>
</body>
</html>
案例：验证输入的是不是中文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请输入名字：<input type="text" name="" id="name" value="" />
</body>
</html>
创建正则表达式对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 两种方式创建
// 对象创建
var reg = new RegExp(/\d{5}/);
var str = "我的100000";
var flag = reg.test(str);
console.log(flag);
// 字面量方式创建正则表达式对象
var reg = /\d{1,5}/;
var flag = reg.test("我的书：10000");
console.log(flag);
</script>
</body>
</html>
