正则表达式 课时一：
正则
1.含义
规定字符出现规律的规则
2.声明一个正则
var reg=//;
var reg=new RegExp();
3.字符集
规定一位字符可以可以出现的备选列表 []
注：字符集只匹配一位
[0-9] 一位数字
[A-Z] 一位大写字母
[a-z] 一位小写字母
[a-zA-Z] 一位字母
[^] 除了
4.预定义字符集
\d 查找数字字符 \D 查找非数字字符
\s 查找空白字符 \S 查找非空白字符
\w 查找单词字符 \W 查找非单词字符
5.量词
规定数量限制的词
{m,n} 最少出现m次，最多n次
{m,} 最少出现m次，最多不限
{m} 必须出现m次
没有数量限制的
？ 可有可无，最多一次
* 可有可无，多了不限
+ 至少一次，多了不限
6.分组和选择
分组：();
选择：|;
对象：Array object Date Math RegExp
注册实例
HTML代码如下
<div class="main">
<div class="header">
<img src="img/timg.gif" />
</div>
<div class="body">
<ul>
<li><span>账号：</span><input type="text" name="ipn" id="ipn" value="123456" placeholder="请输入密码" /></li>
<li class="li_p">
<p id="text"></p>
</li>
<li><span>密码：</span><input type="password" name="ipn1" id="ipn1" value="" placeholder="请密码" /></li>
<li class="li_p">
<p id="text1"></p>
</li>
<li><span>确认密码：</span><input type="password" name="ipn2" id="ipn2" value="" placeholder="确认密码" /></li>
<li class="li_p">
<p id="text2"></p>
</li>
<li><span>手机号：</span><input type="text" name="ipn3" id="ipn3" value="" placeholder="请输入手机号" /><button class="btng">获取验证码</button></li>
<li class="li_p">
<p id="text3"></p>
</li>
<li><span>验证码：</span><input type="text" name="ipn4" id="ipn4" value="" placeholder="请输入四位验证码" /></li>
<li class="li_p">
<p id="text4"></p>
</li>
</ul>
</div>
<hr />
<div class="foot">
<ul>
<li><input type="checkbox" checked="checked" name="" id="" value="" />我同意成为中国人民
<a href="#">《中国人民保护法》</a>
</li>
<li><button id="btn">完成注册</button></li>
</ul>
</div>
</div>
<div class="box">
<div class="cent">
<p>内容</p>
<h1 id="hy"></h1>
<h1 class="f">郭子豪</h1>
</div>
</div>
js代码如下
var ipn = document.getElementById('ipn');
var txt = document.getElementById('text');
ipn.onfocus = function() {
txt.innerHTML = '使用6-18位字母数字、支持中文';
}
ipn.onblur = function() {
var reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{6,12}$/;
var result = reg.test(ipn.value);
if(result == true) {
txt.innerHTML = '通过';
} else {
txt.innerHTML = '格式错误';
}
}
var ipn1 = document.getElementById('ipn1');
var txt1 = document.getElementById('text1');
ipn1.onfocus = function() {
txt1.innerHTML = '使用6-18位字母数字';
}
ipn1.onblur = function() {
var reg1 = /^[A-Za-z0-9]{6,12}$/;
var result1 = reg1.test(ipn1.value);
if(result1 == true) {
txt1.innerHTML = '通过';
} else {
txt1.innerHTML = '格式错误';
}
}
var ipn2 = document.getElementById('ipn2');
var txt2 = document.getElementById('text2');
ipn2.onfocus = function() {
txt2.innerHTML = '请再次输入密码';
}
ipn2.onblur = function() {
if(ipn1.value == ipn2.value) {
txt2.innerHTML = '验证通过';
} else {
txt2.innerHTML = '两次密码输入不一致';
}
}
var ipn3 = document.getElementById('ipn3');
var txt3 = document.getElementById('text3');
ipn3.onfocus = function() {
txt3.innerHTML = '请输入11位手机号';
}
ipn3.onblur = function() {
var reg3 = /^1[356789]\d{9}$/;
var result3 = reg3.test(ipn3.value);
if(result3 == true) {
txt3.innerHTML = '输入正确';
} else {
txt3.innerHTML = '手机号格式错误';
}
}
var btng = document.querySelector('.btng');
var a = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
console.log(a);
btng.onclick = function() {
if(btng.innerHTML == '获取验证码') {
btng.innerHTML = "60秒之后获取";
alert('您的验证码:' + a);
var i = 59;
var xh = setInterval(function() {
btng.innerHTML = i + "秒之后获取"
i--;
if(i == 0) {
clearInterval(xh);
btng.innerHTML = "获取验证码"
}
}, 1000);
}
}
var btn = document.getElementById('btn');
var ipn4 = document.getElementById('ipn4');
var box = document.querySelector('.box')
btn.onclick = function() {
if(ipn4.value == a) {
alert('验证通过，正在跳转....');
box.style.display = 'block';
} else {
alert('验证失败，重新尝试')
}
}
var hy = document.getElementById('hy');
var ip = document.querySelector('#ipn');
console.log(ip.value)
hy.innerHTML = '欢迎回来' + ip.value;
下拉框左右移动实例
HTML代码
<select name="first" size="10" id="first" multiple="multiple">
<option>三星</option>
<option>小米</option>
<option>魅族</option>
<option>红米</option>
<option>苹果</option>
<option>联想</option>
<option>乐视</option>
<option>8848</option>
<option>vivo</option>
<option>oppo</option>
</select>
<div class="select_move_2">
<button onclick="move(this)">></button>
<button onclick="move(this)">>></button>
<button onclick="move(this)"><</button>
<button onclick="move(this)"><<</button>
</div>
<select size="10" id="secend" multiple="multiple"></select>
js代码
var sele = [],
sec = [];
sele = first.innerHTML.slice(12, -13).split(/<\/option>\s*<option>/);
console.log(sele)
function move(btn) {
switch(btn.innerHTML) {
case '>>':
sec = sec.concat(sele);
sele = [];
break;
case '<<':
sele = sele.concat(sec);
sec = [];
break;
case '>':
var opt = document.querySelectorAll('#first>option');
for(var i = 0; i < opt.length; i++) {
if(opt[i].selected) {
sec.push(sele.splice(i, 1));
sec.sort();
}
}
break;
case '<':
var opt1 = document.querySelectorAll('#secend>option');
for(var i = 0; i < opt1.length; i++) {
if(opt1[i].selected) {
sele.push(sec.splice(i, 1));
sele.sort();
}
}
break;
}
update(sele, first);
update(sec, secend);
}
function update(arr, sel) {
sel.innerHTML = '<option>' + arr.join('</option><option>') + '</option>';
}
正则字符串
API
toUpperCase 转大写
toLowerCase 转小写
slice(starti,endi+1)
concat()；
substring()；
1)不支持负数
substr();
indexof(); 查找一个关键词出现的位置 找不到返回-1
lastindexof(); 查找上一个关键词出现的位置 找不到返回-1
字符串中的正则API
1、search(); 查找符合正则的字符 找不到返回-1
2、match(); 获得所有正则匹配的关键词
1)g表示匹配全部
2)i表示忽略大小写
3、replace(); 替换
4、split(); 切割
字符串中的正则API练习
// 获得正则匹配值
var str = 'good good study,day day up1';
var strs=str.match(/d/gi);
console.log(strs)
// 替换
var str1 = 'good good study,day day up2';
var strs1=str1.replace(/d/gi,'b');
console.log(strs1)
// 切割
var str2 = 'good,good,study,day,day,up3';
var strs2=str2.split(/,/);
console.log(strs2)
