一 含义
是一个有规律的表达式，用于匹配字符串中字符组合的模式，在js中也是对象。
正则可以由简单字符和特殊字符组成
二 作用
1.可以匹配字符组合 2.可以替换某些关键词 3 可以提取输入的内容
（通常用作表单验证）
三 特点
1.灵活性 逻辑性非常强
2.可以迅速简单的达到字符串的复杂控制
四 创建正则表达式
1.利用RegExp对象创建 var rg=new RegExp(/表达式/)；
2.利用字面量创建 var rg=/表达式/；
3.检测字符串是否符合正则表达式要求 用test方法 符合要求返回true 不符合则为false
五 正则表达式中的特殊字符
1.边界符（位置符）：用来提示字符所处的位置
"^"和"$"结合使用 表示必须精确匹配
"^" 表示匹配行首的文本(以谁开始)
"$" 表示匹配行尾的文本（以谁结束）
例 /正则表达式
var reg = /abc/; //创建正则表达式
console.log(reg.test('aabbcc')); //false 表达式里没有包含abc这个字符串
console.log(reg.test('aabc')); //true 表达式里包含了abc这个字符串
var rg = /^abc/; //表示必须以abc开头
console.log(rg.test('aabc')); //false 因为不是以abc开头
var rg1 = /abc$/ //表示必须以abc结尾
console.log(rg1.test('aabc')); // true
var rg2 = /^abc$/; //表示 文本必须精确匹配abc
console.log(rg2.test('abcd')); //false
2.元字符："[表达式]" 表示有一系列的字符串可供选择
例 // []字符簇
var reg2 = /[a-c]/; //可以匹配到 a b c中任何一个字符
console.log(reg2.test('absjxik')); //true 匹配到了表达式中的a和b
var reg3 = /^[a-zA-Z0-9]$/ //加了边界符 表示只能匹配到范围内的一个字符 相当于多选1
console.log(reg3.test('ab')); //false
console.log(reg3.test('a')); //true
var reg4 = /^[^a-z]$/; //[]符号里面的^ 表示取反
console.log(reg4.test('0')); //true
3.量词符：限定前面这个字符出现的次数
例 //量词符 限定字符重复出现的次数
//* 量词符 表示 >=0 限定字符出现次数大于0次
var reg5 = /^a*$/
console.log(reg5.test('')); //true
// + 表示>=1 字符重复1次或更多次
var reg6 = /^a+$/
console.log(reg6.test('a')); //true
// ？ 表示出现0次或1次
var reg7 = /^a?$/
console.log(reg6.test('a')); //true
// {n} 表示字符只能出现n次
var reg8 = /^a{3}$/
console.log(reg8.test('aaa')); //true
console.log(reg8.test('aaaa')); //false 因为字符出现了4次
// {n,} 表示字符出现>= n次
var reg9 = /^a{3,}$/
console.log(reg9.test('aaa')); //true
console.log(reg9.test('aaaaa')); //true
// {n,m} 表示字符出现次数 >=n <=m 在n-m之间范围内
var reg10 = /^a{3,7}$/
console.log(reg8.test('aaa')); //true
console.log(reg8.test('aaaaaaaa')); //false
4.预定义类：某些常用正则表达式的简写
// \d 相当于[0-9]
// \D 相当于[^0-9]
// \w 相当于[a-zA-Z0-9] 匹配任何的字母 数字和下划线
// \W 相当于[^a-zA-Z0-9]
// \s 相当于[\t\r\n\v\f] 匹配空格符 制表符等
// \S 相当于[^\t\r\n\v\f]
5.模式修饰符 ：可以再全局模式下进行操作
i 执行大小写不敏感的匹配
g 执行全局匹配（查找所有匹配 而不是找到第一个匹配后停止）
m 执行多行匹配
gi 执行全局匹配并对大小写不敏感
六.替换方法
字符串.replace(被替换的字符[修饰符]，替换的字符) 被替换的参数可以是字符串 也可以是正则表达式
例 var str = '黑';
newStr = str.replace(/黑/, '白')
console.log(newStr); // 打印 白
七 参考案例
表单密码强度强度案例
结构
<li class="safe">
安全程度
<i class="ruo">弱</i>
<i class="zhong">中</i>
<i class="qiang">强</i>
</li>
<li>
<label> 确认密码：</label>
<input type="text" name="" class="form_input" id="repwd">
<span>
</span>
</li>
js代码
// 给密码框注册失去焦点事件
pwd.onblur = function() {
//1-判断密码的格式（6-16位，字母、数字、特殊符号！@#&*%-_&*）
var regObj = /^[0-9a-zA-Z@#&*%]{6,16}$/;
if (regObj.test(this.value)) {
// 格式正确
this.nextElementSibling.className = 'success';
this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
//2-判断密码的强度()
var num = checkDu(this.value);
//3-根据密码的强度，设置样式
var ruo = document.querySelector('.ruo');
var zhong = document.querySelector('.zhong');
var qiang = document.querySelector('.qiang');
switch (num) {
case 0:
ruo.style.backgroundColor = '#ccc';
zhong.style.backgroundColor = '#ccc';
qiang.style.backgroundColor = '#ccc';
break;
case 1:
ruo.style.backgroundColor = '#de1111';
zhong.style.backgroundColor = '#ccc';
qiang.style.backgroundColor = '#ccc';
break;
case 2:
ruo.style.backgroundColor = '#de1111';
zhong.style.backgroundColor = '#40b83f';
qiang.style.backgroundColor = '#ccc';
break;
case 3:
ruo.style.backgroundColor = '#de1111';
zhong.style.backgroundColor = '#40b83f';
qiang.style.backgroundColor = '#f79100';
break;
default:
break;
}
} else {
// 格式不正确
this.nextElementSibling.className = 'error';
this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请从新输入 ';
// 密码强度都是灰色
var ruo = document.querySelector('.ruo');
var zhong = document.querySelector('.zhong');
var qiang = document.querySelector('.qiang');
ruo.style.backgroundColor = '#ccc';
zhong.style.backgroundColor = '#ccc';
qiang.style.backgroundColor = '#ccc';
}
}
// 判断密码强度的函数
function checkDu(value) {
// value用来接收密码值
var du = 0;
if (/[0-9]/.test(value)) {
du++;
}
if (/[a-zA-Z]/.test(value)) {
du++;
}
if (/[@#&*%]/.test(value)) {
du++;
}
return du;
}
}
|
|
收藏
淘帖
踩
