[前端] 正则表达式

一含义
是一个有规律的表达式，用于匹配字符串中字符组合的模式，在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">
 安全程度
 弱
 中
 强
 </li>
 <li>
 <label> 确认密码：</label>
 <input type="text" name="" class="form_input" id="repwd">
 
 
 </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 = ' 恭喜您输入正确';

 //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 = ' 格式不正确，请从新输入 ';

 // 密码强度都是灰色
 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;
}
}

帐号		自动登录	找回密码
密码			加入黑马

[前端] 正则表达式

0 个回复