l正则的概念
n正则表达式(regular expression)是一个描述字符规则的对象。我们可以通过RegExp 类（构造函数）创建正则表达式，同时String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的方法。
n前端正则表达式主要用来验证客户端的输入数据，因为客户端验证，可以提供用户体验和节约大量的服务器端的系统资源。
l创建正则的两种方式
n使用RegExp这个对象
var reg = new RegExp('study', 'ig');
第一个参数就是我们的模式字符串（变量）
第二个参数可选，模式修饰符
i 表示忽略大小写
g 表示全局匹配
m 表示多行匹配
n还可以用字面量方式直接声明（如果正则表达式中有变量则不可用此方式）;
var reg = /study/ig;
lRegExp下面测试正则表达式的两个方法
ntest(str)方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。
nexec()方法对一个指定的字符串执行一个正则表达式，简言之，就是在一个字符串中执行匹配检索。如果它没有找到任何匹配返回null，如果找到一个匹配，它将返回一个数组。
l可以配合正则使用的字符串方法
n使用 match 方法获取匹配内容，返回数组
n使用 search 来查找匹配数据，和全局没有关系，查找第一个匹配值的位置。(-1)
n使用 replace 替换匹配到的数据,2个参数：1代表正则，2代表用来替换的字符*****
n使用 split 拆分成字符串数组
lexec和match的区别：
n定义为非全局匹配时，exec和match执行的结果是一样
nexec与全局是否定义无关系，而match则于全局相关联
l获取控制
字符类：单个字符和数字
元字符/元符号 匹配情况
. 匹配除换行符外的任意字符
[a-z0-9] 匹配括号中的字符集中的任意一个字符（小写字母和数字）
[^a-z0-9] 匹配任意不在括号中的字符集中的字符
\d 匹配数字[0-9],中括号表示范围。
\D 匹配非数字，同[^0-9]相同
\w 匹配字母和数字及_
\W 匹配非字母和数字及_
字符类：空白字符
元字符/元符号 匹配情况
\b 匹配单词边界 \B（非单词边界）
b匹配的只是一个位置，这个位置的一侧是构成单词的字符，另一侧为非单词字符、字符串的开始或结束位置。“\b”是零宽度的。
\n 匹配换行符
\s 匹配空白字符、空格、制表符和换行符
\S 匹配非空白字符
字符类：锚字符
元字符/元符号 匹配情况
^ 行首匹配 以及 取反
$ 行尾匹配
字符类：重复字符
元字符/元符号 匹配情况
x? 匹配0个或1个x
x* 匹配0个或任意多个x
x+ 匹配至少一个x
(xyz)+ 匹配至少一个(xyz)
x{m,n} 匹配最少m个、最多n个x
字符类：替代字符
元字符/元符号 匹配情况
this|where|logo 匹配this或where或logo中任意一个
l正则的常见应用
1.邮政编码检测/邮件格式检测
2.手机号检测/身份证检测/qq号码检测
3.日期检测/中文检测
4.字符串过滤(敏感词过滤)
5.密码强度验证
6.字符串首尾去空格
l应用
1．查找和替换
2．输入一个字符串，中文字符占两个长度，其他的占一个长度，统计总的字符长度。
3．利用正则去重和统计字符个数
l综合应用
1．掌握正则的封装
2．掌握综合表单验证
1.<body>
请输入手机号码：<input type="text" /><span></span>
<script type="text/javascript">
var oInput=document.querySelector('input');
var oSpan=document.querySelector('span');
oInput.οnfοcus=function(){
oSpan.innerHTML='请输入手机号码';
oSpan.style.color='#333';
}
oInput.οnblur=function(){
var reg=/^1[3|5|6|8]\d{9}$/; //定义规则
if(reg.test(oInput.value)){
oSpan.innerHTML='√';
oSpan.style.color='green';
}else{
oSpan.innerHTML='你输入的手机号码有误!';
oSpan.style.color='red';
}
}
</script>
</body>
2. <body>
<script type="text/javascript">
//1.构造函数创建--new RegExp(规则,修饰符)--规则是字符串和变量
//修饰符：i:忽略大小写 g:全局匹配 m:多行匹配
/*var reg=new RegExp('hello','i');//reg:正则对象 RegExp：构造函数
var str='abchelloaaa';
var str1='abchellaaa';
var str2='abcHElloaaa';*/
//alert(reg.test(str));//true
//alert(reg.test(str1));//false
//alert(reg.test(str2));//true
//2.字面量创建正则--规则一定是字符串
//var reg=/hello/ig; //ig:忽略大小写，同时全局匹配
//var str='abchelloaaa';
//alert(reg.test(str));
//正则的方法：
//test():ntest(str)方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回 true，不存在则返回 false。
</script>
</body>
3. <body>
<script type="text/javascript">
/*
1.[]：范围，代表一个值。
[0-9]:数字
[0-9a-z]：数字和小写字母
[0-9a-zA-Z]：数字和大小写字母。
[^0-9a-zA-Z]:非数字和大小写字母。
2.匹配的数量。
+：匹配一个或者多个 例如：[0-9]+ 匹配一个或者多个数字
*：匹配0个或者多个
?：匹配0个或者1个
3.字符的认识
\d:数字
\D:非数字
\w:数字字母和下划线
\W:非数字字母和下划线
\s:匹配空白字符、空格。
4.行首和行尾匹配
^ 行首匹配 以及 取反的意义，取反放在中括号里面。
$ 行尾匹配
5.(xyz)+ 匹配至少一个(xyz)
6.x{m,n} 匹配最少m个、最多n个x
x{m} 匹配m个
x{m,} 匹配至少m个
7.this|where|logo 匹配this或where或logo中任意一个
*/
</script>
<script type="text/javascript">
//字符串方法
//1.使用 match 方法获取匹配内容，返回数组
//var str='921jfkd948945dfskjk49590fdsg89sdg7sdfa78gf9d8g9fdsg';
//var reg=/[0-9]+/g; //匹配一个数字。
//console.log(str.match(reg));
//["921", "948945", "49590", "89", "7", "78", "9", "8", "9"]
//var str='我hehadf234asdf喜欢dsffoptire324你';
//var reg=/[\u4e00-\u9fa5]+/g;
//console.log(str.match(reg));
//2.使用 search 来查找匹配数据，和全局没有关系，查找第一个匹配值的索引位置。(-1)
//var str='abc5abc';
//alert(str.search(/[0-9]/));//3
//alert(str.search(/[A-Z]/));//-1
//3.使用 replace 替换匹配到的数据,2个参数：1代表正则，2代表用来替换的字符*****
//输入一个字符串，中文字符占两个长度，其他的占一个长度，统计总的字符长度。
//var str='woshi正则表达式hehe'; //19
//console.log(str.replace(/[\u4e00-\u9fa5]/g,'XX').length);
//屏蔽敏感词
//var str='这件衣服是你妈的，还是你妹的，我猜是你大爷的';
//console.log(str.replace(/[妈|妹|大爷]/g,'*****'));
//4.使用 split 拆分成字符串数组
//var str='a1b2c3d4e5f6g';
//console.log(str.split(/[0-9]/g));
/*var reg=/^hello$/i; //全等，行首必须h,行尾必须是$;
var str='hello';
alert(reg.test(str));//true*/
/*var reg=/^xyz+$/;//+是针对z的，
var str='xyzzzzzzzzzzzzzzz';
alert(reg.test(str));*/
/*var reg=/^(xyz)+$/;//+是正对xyz的
var str='xyzxyz';
alert(reg.test(str));*/
/*var reg=/^(xyz){2,4}$/;//{}指前面的一个字符的个数
var str='xyzxyzxyzxyz';
alert(reg.test(str));*///true
</script>
4.<body>
<script type="text/javascript">
//转义符合：\
/*var reg=new RegExp('\\d','g'); //\d:字符d,不是数字
var reg1=/\d/g; //\d当作数字
var str='abcd123abcd';
console.log(str.replace(reg,'*'));//abc*123abc*
console.log(str.replace(reg1,'*'));//abc*123abc**/
/*var reg=new RegExp('\\d\a','g');
var str='abcd123abcd';
console.log(str.replace(reg,'*'));*/
/*var reg1=/\./g; //\.:点字符，而不是任意的字符。
var str='abcd123.abcd';
console.log(str.replace(reg1,'*'));*/
//匹配\
//var reg=new RegExp('\\\\','g'); //匹配双斜杠
//var reg1=new RegExp('\\/','g'); //匹配单斜杠
//var reg2=/\/\//;
//var str='abcd//123\abcd';
//console.log(str.replace(reg2,'*'));
//总结:匹配特殊的符号,添加转义字符'\'
//如果是采用构造函数定义正则,采用'\\'进行转义.
//如果是采用字面量定义，采用'\'进行转义,如果输出多个特殊字符，一个一个匹配。 (var reg2=/\/\//)
//构造函数正则定义带有\的元字符，需要再添加一个'\'. \\d \\s \\w
</script>
</body>
5.
<body>
<fieldset id="" style="width:600px;">
<legend>用户注册</legend>
<form action="http://www.baidu.com" class="form1">
<p>用户姓名：<input type="text" class="username" /><span></span></p>
<p>用户密码：<input type="password" class="password" /><span></span></p>
<p>电子邮箱：<input type="text" class="email" /><span></span></p>
<input type="submit" value="注册" class="registor" />
</form>
</fieldset>
<script type="text/javascript">
var form1 = document.querySelector('.form1');
var username = document.querySelector('.username');
var password = document.querySelector('.password');
var email = document.querySelector('.email');
var registor = document.querySelector('.registor');
var aSpan = document.querySelectorAll('span');
var userstop = true;
var passstop = true;
var emailstop = true;
//验证用户名
username.onfocus = function() {
if(this.value == '') {
aSpan[0].innerHTML = '中英文均可，最长14个英文或7个汉字';
aSpan[0].style.color = '#333';
}
}
username.onblur = function() {
if(this.value != '') {
var reg1 = /^[a-zA-Z]{6,14}$/;
var reg2 = /^[\u4e00-\u9fa5]{2,7}$/;
if(reg1.test(username.value) || reg2.test(username.value)) {
aSpan[0].innerHTML = '√';
aSpan[0].style.color = 'green';
userstop = true;
} else {
aSpan[0].innerHTML = '用户名格式有误';
aSpan[0].style.color = 'red';
userstop = false;
}
} else {
aSpan[0].innerHTML = '请输入用户名';
aSpan[0].style.color = 'red';
userstop = false;
}
if(this.value == '') {
aSpan[0].innerHTML = '中英文均可，最长14个英文或7个汉字';
aSpan[0].style.color = '#333';
}
}
//验证密码
password.onfocus = function() {
if(this.value == '') {
aSpan[1].innerHTML = '长度为6-14个字符';
aSpan[1].style.color = '#333';
}
}
password.onblur = function() {
if(this.value != '') {
aSpan[1].innerHTML = '√';
aSpan[1].style.color = 'green';
passstop = true;
} else {
aSpan[1].innerHTML = '请输入密码';
aSpan[1].style.color = 'red';
passstop = false;
}
}
password.oninput = function() {/.oninput表示只要输入有变化就发生事件
if(this.value.length>=6 && this.value.length<=14){
var reg = /^[\w\W]+$/;
if(reg.test(password.value)) {
//弱(1)中(2-3)强(4)
var count = 0; //计算密码的字符种类
var regnum = /\d+/;
var regupper = /[A-Z]+/;
var reglower = /[a-z]+/;
var other = /\W+/;
if(regnum.test(password.value)) {
count++;
}
if(regupper.test(password.value)) {
count++;
}
if(reglower.test(password.value)) {
count++;
}
if(other.test(password.value)) {
count++;
}
switch(count) {
case 1:
aSpan[1].innerHTML = '弱';
aSpan[1].style.color = 'red';
passstop = true;
break;
case 2:
case 3:
aSpan[1].innerHTML = '中';
aSpan[1].style.color = 'orange';
passstop = true;
break;
case 4:
aSpan[1].innerHTML = '强';
aSpan[1].style.color = 'green';
passstop = true;
break;
}
} else {
aSpan[1].innerHTML = '密码格式有误';
aSpan[1].style.color = 'red';
passstop = false;
}
}else{
aSpan[1].innerHTML = '密码长度不符合';
aSpan[1].style.color = 'red';
passstop = false;
}
}
//验证电子邮箱
email.onfocus = function() {
if(this.value == '') {
aSpan[2].innerHTML = '请输入正确的电子邮箱';
aSpan[2].style.color = '#333';
}
}
email.onblur = function() {
if(this.value != '') {
var reg = /^([\w][\w\-\_\.]+)\@([\w][\w\-\_\.]+)\.([\w][\w\-\_\.]+)$/;
//var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(email.value)) {
aSpan[2].innerHTML = '√';
aSpan[2].style.color = 'green';
emailstop = true;
} else {
aSpan[2].innerHTML = '邮箱格式有误';
aSpan[2].style.color = 'red';
emailstop = false;
}
} else {
aSpan[2].innerHTML = '请输入邮箱';
aSpan[2].style.color = 'red';
emailstop = false;
}
}
form1.onsubmit = function() { //表单提交事件。
if(username.value == '') {
aSpan[0].innerHTML = '请输入用户名';
aSpan[0].style.color = 'red';
userstop = false;
}
if(password.value == '') {
aSpan[1].innerHTML = '请输入密码';
aSpan[1].style.color = 'red';
passstop = false;
}
if(email.value == '') {
aSpan[2].innerHTML = '请输入电子邮箱';
aSpan[2].style.color = 'red';
emailstop = false;
}
if(!userstop ||!passstop || !emailstop) {
return false; //阻止默认事件
}
}
</script>
</body>
6.<body>
<textarea name="" rows="" cols=""></textarea>
<script type="text/javascript">
/*var str='hello\nworld';
var reg=/o$/m; //多行匹配
var reg1=/^w/m; //多行匹配
alert(reg.test(str));//true
alert(reg1.test(str));//true*/
/*var oT=document.querySelector('textarea');
oT.οnblur=function(){
console.log(oT.value.split('\n'));
}*/
</script>
</body>
7.<body>
<script type="text/javascript">
//exec()方法对一个指定的字符串执行一个正则表达式，简言之，就是在一个字符串中执行匹配检索。如果它没有找到任何匹配返回null，如果找到一个匹配，它将返回一个数组。
/*var reg=/\d+/;
var str='abc123def456ghi';
console.log(reg.exec(str));//["123"]
console.log(str.match(reg));//["123"]
var reg=/\d+/g;
var str='abc123def456ghi';
console.log(reg.exec(str)); //["123"]
console.log(str.match(reg));// ["123", "456"]*/
/*exec和match的区别：
n 定义为非全局匹配时，exec和match执行的结果是一样
exec与全局是否定义无关系，而match则于全局相关联*/
//分组--()
//exec和match除了输出匹配的值，输出分组的值。
/*var reg=/(a)(b)(c)(d)/;
var str='123abcdefg456';
console.log(reg.exec(str));//["abcd", "a", "b", "c", "d"]*/
//var reg=/([a-z])([a-z])([a-z])/;
//var str='123abcdefg456';
//console.log(reg.exec(str));//["abc", "a", "b", "c"]
//正则的属性 RegExp.$1 第一个分组 $1-$9
//如果想使用上面的属性，必须让正则执行一次。
//console.log(RegExp.$1);//a
//console.log(RegExp.$2);//b
//console.log(RegExp.$3);//c
//var reg=/([a-z]+)\s([a-z]+)/;
//var str='hello world';
//reg.test(str);
//console.log(RegExp.$2 , RegExp.$1);
//console.log(str.replace(reg,'$2 $1'));
//var str='帅不帅先生问好不好小姐，悄一悄问神僧，女儿美不美';
//如果分组写入正则的规则中，\1-\9 分别代表第一个到第九个分组。
//var reg=/([\u4e00-\u9fa5])[\u4e00-\u9fa5]\1/g;
//console.log(str.match(reg));
//利用正则去重和统计字符个数
//var str='safhkgeurokzbdhfkjequroihajfkdfequreuywqiufhadskbcznvbeuiwr';
//str=str.split('').sort().join('');
//console.log(str);
//aaabbbcdddeeeeefffffghhhhiiijjkkkkknooqqqrrrrssuuuuuuvwwyzz
//var reg=/([a-z])\1*/g //匹配至少一个重复的字符
//str.replace(reg,function(result,group){
//console.log(result);//匹配的结果，返回一个类数组
//console.log(group);//分组的值
//console.log(group+':'+result.length);
//});
/*var str='get-element-by-id'; //getElementById
var reg=/(\-\w)/g;
console.log(str.replace(reg,function(a){
console.log(a);
return a.substring(1).toUpperCase();
}));*/
/*var str1='They are students';
var str2='aeous';
console.log(str1.replace(/[aeous]/g,''));//Thy r tdnt*/
/*var str='?a=1&b=2&c=3&d=4';
str=str.substring(1);//a=1&b=2&c=3&d=4
console.log(eval('({'+str.replace(/\&/g,',').replace(/\=/g,':')+'})'));*/
/*var str='?a=zhangsan&b=李四&c=3&d=4';
str=str.substring(1);
console.log(JSON.parse('{'+str.replace(/\&/g,',').replace(/\=/g,':').replace(/([\w]+|[\u4e00-\u9fa5]+)/g, function(result){
return '"'+result+'"';
})+'}'));*/
</script>
</body>
8.
<body>
请输入查找的字符：<input type="text" class="search" />
<input type="text" class="replace" /> <button>替换</button>
<p>
【环球网报道 记者 张飞扬】俄罗斯驻阿富汗特使周一(12日)透露，塔利班和美国除了在卡塔尔公开讨论如何结束阿富汗战争外，两者还“秘密举行了10轮会谈”，美媒12日披露了这一消息。
报道称，俄罗斯驻阿富汗特使扎米尔·卡布洛夫说：“我们被告知他们(塔利班)与美国人进行了大约10次秘密磋商。这是一个正常的进程，我们愿意相信，一些国家试图在没有先决条件的情况下，促成塔利班和阿富汗政府坐上谈判桌。”
报道称，自7月以来，外界仅得知美国与塔利班代表在所谓的“多哈政治办公室”举行了两次会谈。最近一次是在上个月，新上任的美国阿富汗问题特使扎勒迈·哈利勒扎德率领美国代表团。
报道称，卡布洛夫还提到了上周五举行的“阿富汗问题国际大会”。他表示，在莫斯科举行的多边会议是一个“独特的”和广泛的国际论坛，塔利班代表17年来首次公开参加会议，与阿富汗官方代表团在会议桌上交换意见。
他强调，这次会议的目标不是寻求阿富汗交战各方之间的直接谈判，而是“朝着这个方向迈出温和的第一步”。
</p>
<script type="text/javascript">
//1.身份证规则
//var reg=/^\d{17}[xX0-9]$/;
/*var reg=/^\d{6}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])\d{3}[xX0-9]$/;
if(reg.test('362330198410263275')){
alert('ok');
}else{
alert('错误');
}*/
//2.字符串首尾去空格
/*var str=' dasf dasf dfsaf ';
console.log(str);
console.log(str.trim());
var reg=/^\s+|\s+$/g;
console.log(str.replace(reg,''));*/
//3.查找和替换
var search=document.querySelector('.search');
var place=document.querySelector('.replace');
var oP=document.querySelector('p');
var oBtn=document.querySelector('button');
var content=oP.innerHTML;
search.οninput=function(){
var reg=new RegExp(search.value,'g');
if(search.value!=''){
oP.innerHTML=content.replace(reg,'<mark>'+search.value+'</mark>');
}else{
oP.innerHTML=content.replace(reg,'');
}
};
oBtn.οnclick=function(){
var aMark=document.querySelectorAll('mark');
if(search.value!=''){
if(place.value!=''){
for(var i=0;i<aMark.length;i++){
aMark[i].innerHTML=place.value;
}
}else{
for(var i=0;i<aMark.length;i++){
aMark[i].innerHTML=search.value;
}
}
}else{
alert('请输入查找的字符');
}
}
</script>
</body>