正则表达式 课时一：
正则
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代码如下
内容
郭子豪
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代码
js代码
var sele = [],
sec = [];
sele = first.innerHTML.slice(12, -13).split(/<\/option>\s*';
}
正则字符串
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)