正则表达式
正则表达式
正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的
/i
忽略大小写
/g
全文查找出现的所有匹配字符
/m
多行查找
/gi
全文查找、忽略大小写
/ig
全文查找、忽略大小写.同理上,可组合/i,/g./m
正则表达式常用元字符
* [] 表示的是:范围, [0-9] 表示的是0到9之间的任意的一个数字, "789" [0-9]
* [1-7] 表示的是1到7之间的任意的一个数字
* [a-z] 表示的是:所有的小写的字母中的任意的一个
* [A-Z] 表示的是:所有的大写的字母中的任意的一个
* [a-zA-Z] 表示的是:所有的字母的任意的一个
* [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
* [] 另一个函数: 把正则表达式中元字符的意义干掉 [.] 就是一个.
* | 或者 [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
* () 分组 提升优先级 [0-9]|([a-z])|[A-Z]
* ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
* (()(()))
*
*
* 都是元字符,但是也可以叫限定符,下面的这些
* * 表示的是:前面的表达式出现了0次到多次
* [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
* "fdsfs3223323" 可以用 [a-z][0-9]* 匹配到
*
* + 表示的是:前面的表达式出现了1次到多次
* [a-z][9]+ 小写字母一个后面最少一个9,或者多个9
* "fesfewww9fefds"
*
* ? 表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
* [4][a-z]? "1231234ij"
* 限定符:限定前面的表达式出现的次数
* {} 更加的明确前面的表达式出现的次数
* {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
* {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
* {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
* {5,10} 表示的是前面的表达式出现了5次到10次
* {4} 前面的表达式出现了4次
* {,10} 错误的========不能这么写
* ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
* ^[a-z] 以小写字母开始
* [^0-9] 取反,非数字
* [^a-z] 非小写字母
* [^0-9a-zA-Z_]
* $ 表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束
* ^[0-9][a-z] 相当于是严格模式 "3f2432e" "4f"
* \d 数字中的任意一个,
* \D 非数字中的一个
* \s 空白符中的一个
* \S 非空白符
* \w 非特殊符号
* \W 特殊符号
* \b 单词的边界
总结
. 除了\n以外的任意一个单个字符
* [] 范围
* () 分组,提升优先级
* | 或者
* * 0-多次
* + 1-多次
* ? 0-1次
* {0,} 和*一样
* {1,} 和+
* {0,1} 和?
*
* \d 数字中的一个
* \D 非数字
* \s 空白符
* \S 非空白符
* \W 特殊符号
* \w 非特殊符号 _
* ^ 取反,以什么开始
* $ 以什么结束
*
* \b 单词边界
正则表达式实战示例
1. 验证密码的强弱
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16"><!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取文本框注册键盘抬起事件
my$("pwd").onkeyup=function () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//如果密码的长度是小于6的,没有必要判断
// if(this.value.length>=6){
// var lvl= getLvl(this.value);
// my$("strengthLevel").className="strengthLv"+lvl;
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
};
//给我密码,我返回对应的级别
function getLvl(pwd) {
var lvl=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;//最小的值是1,最大值是3
}
2. 验证邮箱
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
<script>
//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
//获取文本框,注册失去焦点的事件
document.getElementById("email").onblur = function () {
//判断这个文本框中输入的是不是邮箱
var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
if (reg.test(this.value)) {
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "red";
}
};
3. 验证是否是中文[\u4e00-\u9fa5]
- escape(" ") 将中文转译成 Unicode
- unescape(" ") 将Unicode转译成 中文
请输入您的名字:<input type="text" value="" id="userName" />*<br/>
<script>
//是中文名字,则绿色,否则红色
document.getElementById("userName").onblur=function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
if(reg.test(this.value)){
this.style.backgroundColor="green";
}else{
this.style.backgroundColor="pink";
}
};
//[\u4e00-\u9fa5] [一-龥]
4. 大项目验证表单
- 样式css
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
</style>
- 结构HTML
<div class="container" id="dv">
<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座机</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
- 行为js
<script src="common.js"></script>
//common.js封装了my$这个方法,用于选择id
var my$ = function myGetElenmentById(id){
return document.getElementById(id)
}
<script>
//qq的
checkInput(my$("qq"),/^\d{5,11}$/);
//手机
checkInput(my$("phone"),/^\d{11}$/);
//邮箱
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机号码
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkInput(input,reg) {
//文本框注册失去焦点的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确了";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="让你得瑟,错了吧";
this.nextElementSibling.style.color="red";
}
};
}
</script>
正则表达的方法
- match()指定了匹配的是正则表达式而不是字符串。return array
- 正则表达式后面加g 表示全局-------> /[0-9]/g
- 正则表达式后面加i 表示忽略大小写-------> /[a-z]/i
- 组合----> /[a-z]/d/gi
- exec() return string //正则表达式 对象.exec() 方法传入字符串
字符串中使用正则表达式的方法
var str="中国移动:10086,中国联通:10010,中国电信:10000";
//把里面所有的数字全部显示出来
var array=str.match(/\d{5}/g);
console.log(array);
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
//把里面所有的邮箱全部显示出来
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);
//提取这里的日
var str="2017-11-12";
var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
console.log(array);
//正则表达式对象.$3
console.log(RegExp.$3);
var email="shuaiyangtaishuaile@itcast.com.cn";
email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
console.log(RegExp.$1);//用户名
console.log(RegExp.$2);//126
console.log(RegExp.$3);//域名
- 匹配后替换
- 去除前后空格 trim()
- 替换 replace()
var str="小苏好帅,真的是太帅,帅,就是真帅";
str=str.replace(/帅/g,"猥琐");
console.log(str);
var str=" 哦买噶的 ,太幸福了 ";
str=str.trim();
console.log("==="+str+"===");
//所有的h都替换成S
//方法1
var str="HhpphH";//SSppSS
str=str.replace(/[h]/gi,"S");
console.log(str);
//方法2
var reg = new RegExp(/[h]/gi);
var str = "HhpphH";//SSppSS
str = str.replace(reg, "S");
console.log(str);
var str = "中国移动:10086,中国联通:10010,中国电信:10000";
//把里面所有的数字全部显示出来
var array = str.match(/\d{5}/g);
//正则表达式对象.exec方法传入字符串
var reg=/\d{5}/g;
var array=reg.exec(str);
console.log(array);
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
var result=reg.exec(str);
while(result!=null){
console.log(result);
result=reg.exec(str);
}
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
