正则表达式:
也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的
- . 表示的是:除了\n以外的任意的一个字符
- [] 表示的是:范围, [0-9] 表示的是0到9之间的任意的一个数字
- [1-7] 表示的是1到7之间的任意的一个数字
- [a-z] 表示的是:所有的小写的字母中的任意的一个
- [A-Z] 表示的是:所有的大写的字母中的任意的一个
- [a-zA-Z] 表示的是:所有的字母的任意的一个
- [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
- [] 另一个函数: 把正则表达式中元字符的意义干掉 [.] 就是一个.
- | 或者 [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
- () 分组 提升优先级 [0-9]|([a-z])|[A-Z]
- ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
- *表示的是:前面的表达式出现了0次到多次
- +表示的是:前面的表达式出现了1次到多次，[a-z][9]+ 小写字母一个后面最少一个9,或者多个9
- ? 表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
- {} 更加的明确前面的表达式出现的次数
- {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
- {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
- {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
- {5,10} 表示的是前面的表达式出现了5次到10次
- {4} 前面的表达式出现了4次
- {,10} 错误的========不能这么写
- ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
- ^[a-z] 以小写字母开始，放在外面是以什么开头
- [^0-9] 取反,非数字，放在里面是取反
- [^a-z] 非小写字母
- [^0-9a-zA-Z_] 特殊符号
- $ 表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束
- ^[0-9][a-z]$ 相当于是严格模式，只能有一个数字和一个字母 "3f2432e"不匹配 "4f"匹配
- ^[0-9][a-z] 必须是以一个数字一个字母开头的 如8a432k
- [0-9][a-z]$ 必须是以一个数字一个字母开头的 如234h9re9a
- \d 数字中的任意一个,
- \D 非数字中的一个
- \s 空白符中的一个
- \S 非空白符
- \w 非特殊符号
- \W 特殊符号
- \b 单词的边界
- 正则表达式中:在/正则/g，最后的g表示的是全局模式匹配，返回的所有匹配的内容，是数组，没有g值返回第一个匹配的内容
- 正则表达式中:在/正则/i ，表示的是忽略大小写
常用正则表达式：
- 身份证：([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])或 ([1-9][0-9]{14})([0-9]{2}[0-9xX])?
- 座机号码：[0-9]{3,4}[-][0-9]{8}或者\d{3,4}[-]\d{8}
010-19876754
0431-87123490 - qq号码：[1-9][0-9]{4,10}或 [1-9]\d{4,10}
- 手机号码： ([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})
- 邮箱：[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
- 中文：^[\u4e00-\u9fa5]{2,6}$ 表示2~6个中文字，其中\u4e00-\u9fa5是表示中文字的正则
[\u4e00-\u9fa5] 对应 [一-龥]
扩展：escape：可对字符串进行编码，格式escape（“字符串内容”）
unescape：可对通过 escape() 编码的字符串进行解码，格式： unescape（“要解码的字符串”）
<script>
console.log(escape("我是"));
console.log(unescape(escape("我是")));
</script>
正则方法
- 正则提取：match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，返回值是数组
- 正则表达式中:g 表示的是全局模式匹配
//把里面所有的数字全部显示出来
var str="中国移动:10086,中国联通:10010,中国电信:10000";
var array=str.match(/\d{5}/g);//加了g，全局模式，提取所有的5位数字，没加只提取第一个
var array1=str.match(/\d{5}/);
console.log(array);//返回一个数组，存了所有的5位数字
console.log(array1);//10086
提取email地址
var str3 = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
var array3 = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array3);
- 分组提取：正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3…来获取
RegExp.$1，提取的是距离最近的上一个的正则表达式的匹配结果
// 提取日期中的日部分
//方法1：
var email="shuaiyangtaishuaile@itcast.com.cn";
email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);//有3个()，分成了3组
console.log(RegExp.$1);//用户名
console.log(RegExp.$2);//126
console.log(RegExp.$3);//域名
//方法2：
var dateStr = '2016-1-5';
var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/;//分成3组
if (reg.test(dateStr)) {
console.log(RegExp.$1);//2016
console.log(RegExp.$2);//1
console.log(RegExp.$3);//5
}
- 正则替换
格式：字符串.replace(正则表达式,替换内容);
//替换某个内容
var str="小明好美,真的是太美了";
str=str.replace(/美/g,"帅");//加了g全部替换，没有g只替换第一个
console.log(str);//小明好帅,真的是太帅了
//去掉所有空白
var str1 = " aa bb ccc";
str1 = str.replace(/\s+/g, "");
console.log("===" + str1 + "===");
- 正则表达式中:i 表示的是忽略大小写
//所有的h都替换成S
var str="HhpphH";
str1=str.replace(/[h]/i,"S");
str2=str.replace(/[h]/gi,"S");
console.log(str1);//ShpphH
console.log(str2);//SSppSS
创建正则表达式对象的方法
- 通过构造函数创建对象
正则对象可以调用test方法验证是否匹配
var reg=new RegExp(/\d{5}/);
//调用方法验证字符串是否匹配
var flag=reg.test("我的电话是10086");
console.log(flag);
- 字面量的方式创建对象
赋值在/内容/的，即创建了正则表达式
就像var arr = []；是数组。var obj = {}；是对象。
var reg=/\d{1,5}/;
var flag=reg.test("238");
console.log(flag);
//也可以合在一起简写
//console.log(/\d{1,5}/.test("238"));
验证密码强度案例
密码: 数字,字母,特殊符号
密码: 只有数字- 或者是只有字母,或者是只有特殊符号—1级—弱
两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中
三者都有: 数字和字母和特殊符号------3级-----强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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>
<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>
document.getElementById("pwd").onkeyup=function () {
//如果密码的长度是小于6的,没有必要判断
document.getElementById("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;//最小的值是1,最大值是3
}
</script>
</body>
</html>
验证邮箱案例
如果输入的是邮箱,那么背景颜色为绿色,否则为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
<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 = "green";
} else {
this.style.backgroundColor = "red";
}
};
</script>
</body>
</html>
表单多个验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
</style>
</head>
<body>
<div class="container" id="dv">
<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座机</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>
//qq的
checkInput(document.getElementById("qq"),/^\d{5,11}$/);
//手机
checkInput(document.getElementById("phone"),/^\d{11}$/);
//邮箱
checkInput(document.getElementById("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机号码
checkInput(document.getElementById("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkInput(document.getElementById("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
function checkInput(input,reg) {
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>
1637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
