1.认识元字符：学习正则表达式之前我们先认识一下的元字符
\ | 表示转义字符 |
. | 表示一个任意字符 |
*+? | 表示字符个数（*表示：0到多个，+表示1到多个，？表示0个或1个） |
{n,m} | 表示字符个数（n:表示至少n个，m 表示至多m个）：\{n\} 匹配 n 个元字符 , \{n,\} 匹配至少 n 个元字符 [^] 表示非：[^fgh] 不与 fgh 之中的任意一个字符匹配 [abcde] 匹配 abcde 之中的任意一个字符 ，[a-h] 匹配 a 到 h 之间的任意一个字符 |
^$ | 表示开始与结束 |
\b | 单词的开始或者结尾，以字符串“ 123a 345 789d ”作为示例字符串，如果正则表达式是“ \b\d{2}\b ”，则仅能匹配 345 |
\d | 表示1个数字：匹配任何 0 到 9 之间的单个数字，相当于 [0-9] |
\D | 不匹配任何 0 到 9 之间的单个数字，相当于 [^0-9] |
[\u4e00-\u9fa5] | 匹配任意单个汉字（这里用的是 Unicode 编码表示汉字的 ) |
\W | 不匹配大小写英文字符及数字 0 到 9 之间的任意一个，相当于 [^a-zA-Z0-9_] |
\w | 表示一个字符（不包含中文）:匹配大小写英文字符及数字 0 到 9 之间的任意一个及下划线，相当于 [a-zA-Z0-9_] |
\s | 表示一个空白字符：匹配任何空白字符，相当于 [ \f\n\r\t\v] |
\S | 匹配任何非空白字符，相当于 [^\s] |
() | 表示优先级，提取组 |
| | 表示或（|表示位或，||表示逻辑或）：例如 [a|jb|c] 表示匹配 a 、 b 、 c之中的任意一个字母。正则表达式元字符 |
2.什么是正则表达式？
3.正则可以做什么（重点）：（匹配/替换/提取）
4.功能展示：
4.1：正则表达式构造对象的方法（只是用第二种就行）：
//方式一：var regObj=new RegExp('\\d{5}');
//方式二：var regObj=/\d/;
//推荐使用第二种方式，这种方式是js中专为正则表达式提供的语法，不需要考虑转义字符的影响4.2匹配功能（test）：
4.2.1：邮政编码匹配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnTest').onclick = function () {
//构造表达式对象
var regExp = /^\d{6}$/;//邮政编码应该为6个数字，{}表示限定为6个数字，如果是手机号可以限定11个数字
//获取用户输入的邮政编码
var txtMsg = document.getElementById('txtMsg').value;
//信息提示：成功与失败
if (regExp.test(txtMsg)) {
alert('输入成功')
} else {
alert('邮政编码应该为6位数字')
}
};
};
</script>
</head>
<body>
<input type="text" id="txtMsg" />
<input type="button" id="btnTest" value="匹配test" />
</body>
</html>效果展示：
4.2.2邮箱匹配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnTest').onclick = function () {
//构造表达式对象
var regExp =/\w+@[a-z0-9]+\..+/ //电子邮箱725@, 或者是6561@ \.表示.这个符号
//获取用户输入的邮政编码
var txtMsg = document.getElementById('txtMsg').value;
//信息提示：成功与失败
if (regExp.test(txtMsg)) {
alert('输入成功')
} else {
alert('邮箱格式不正确，请重新输入')
}
};
};
</script>
</head>
<body>
<input type="text" id="txtMsg" />
<input type="button" id="btnTest" value="匹配test" />
</body>
</html>效果展示：
4.3提取功能 exec(string) 注意://g表示全局模式，如果不加g,表示提取第一组数字，加g表示提取所有数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnExec').onclick = function () {
var txtMsg = document.getElementById('txtMsg').value;
//g表示全局模式，如果不加g,表示提取第一个，加g表示提取所有
var reg = /\d+/g; //提取str字符串里面所有的数字
//信息提示：成功与失败，如果没有匹配到结果，返回null,匹配成功返回匹配的值，类型是数组
while (true) {
var result = reg.exec(txtMsg);//执行提取功能
if (result == null) {
break;
alert('匹配失败');
}
}
};
};
</script>
</head>
<body>
<input type="text" id="txtMsg" />
<input type="button" id="btnExec" value="匹配exec" />
</body>
</html>效果显示：提取字符串中的数字
提取一部分：假如提取每一个数字组内的第二个数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnExec').onclick = function () {
var txtMsg = document.getElementById('txtMsg').value;
//g表示全局模式，如果不加g,表示提取第一个，加g表示提取所有
var reg = /\d(\d)\d*/g; //提取用户字符串里面所有的数字组里面的第二个数字 （）表示特定位置数字
//信息提示：成功与失败，如果没有匹配到结果，返回null,匹配成功返回匹配的值，类型是数组
while (true) {
var result = reg.exec(txtMsg);//执行提取功能
if (result == null) {
break;
alert('匹配失败');
}
}
};
};
</script>
</head>
<body>
<input type="text" id="txtMsg" />
<input type="button" id="btnExec" value="匹配exec" />
</body>
</html>效果展示：提取每一组中特定的数字
4.4替换功能：例如替换掉某一点字符串中的空格，替换功能是字符串对象的replace的方法，是字符串的方法哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
document.getElementById('btnReplace').onclick = function () {
//g表示全局模式，如果不加g,表示替换字符串开始
var str = " fjxwpz ";//定义一个有空格的字符串
var reg = /\s+/g;
document.getElementById('txtMsg').value=str.replace(reg,'');
};
};
</script>
</head>
<body>
<input type="text" id="txtMsg" />
<input type="button" id="btnReplace" value="清除空格" />
</body>
</html>效果展示：有无g(全局模式)的区别
5.实战练习：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
onload = function () {
//为文本框注册失去焦点事件，失去焦点（onlur）时，进行密码验证
document.getElementById('txtPwd').onblur = function () {
var msg = this.value;//获得文本框里面的值
//获取提示框
var msgPwd = document.getElementById('msgPwd');
if (msg.length < 6) {
msgPwd.innerText = '弱';
} else {
//纯字符：弱，两种混合：中，三种混合：强
var pwd = 0;
if (/[a-zA-Z]/.test(msg)) {
pwd++;//有一个字母
}
if (/[0-9]/.test(msg)) {
pwd++;//有一个数字
}
if (/[!@#$%^&*()]/.test(msg)) {
pwd++;//有一个特殊字符
}
//提示结果
switch (pwd) {
case 1:
msgPwd.innerText = '弱';
break;
case 2:
msgPwd.innerText = '中';
break;
case 3:
msgPwd.innerText = '强';
break;
}
}
};
};
</script>
</head>
<body>
<input type="text" id="txtPwd" /><span id="msgPwd"></span>
</body>
</html>效果展示：
