JavaScript对象编程（七）
补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。
一、认识正则表达式
1.什么是正则表达式
正则表达式（Regular Expression，简称为RegEx），是用来匹配一系列符合某个规则的字符串的表达式
正则表达式独立于编程语言，几乎所有的编程语言甚至文字处理软件都支持正则表达式
2.正则表达式的作用
-
测试字符串内的模式
例如，可以测试输入字符串，以查看字符串内是否出现电话号码模式或信用卡号码模式。或者用户名输入是否为空格等。这称为数据验证。
eg：判断电话号码是否符合规则：/^1[3-9]\d{9}$/g -
替换文本
可以使用正则表达式从大量文本中查找符合某一规则的文本，也可以完全删除该文本或者用其他文本替换它。 -
基于模式匹配从字符串中提取子字符串
可以查找文档内或输入域内特定的文本。
3.正则表达式规则
正则表达式的描述字符如图所示：
补充：
- ^ $ 开始和结束
/^h/g 匹配以h开头的字符串
/s$/g 匹配以s结尾的字符串 - 任意字符
作用：.代表任意字符、但不能代表\n换行符
/Jav./g 可匹配Java、Javs、Javo、Jave
/J…/g 可匹配J开头的4位字符 - ? 可选字符
作用：?可以指定某个字符可选，出现0次或1次
/colou?r/g 可匹配color和colour
/Ja.?a/g 可匹配Jaa和Java - {N} 重复
作用：{N}代表某字符或字符组出现N次
/\d{4}/g 代表任意4位数字 - {M,N} 重复区间
作用：代表某个字符或字符组出现M到N次
/\d{3,5}/g 可匹配3位、4位、5位数字 - ? 非贪婪模式
/\d{3,5}/g 默认为贪婪模式，如“123456”会匹配前5个字符
/\d{3,5}?/g 为非贪婪模式，如“123456”会匹配前3个字符 - {N,}开闭区间
{N,}代表某字符或字符组出现N次到无限次
/\d{1,}/g 代表任意数字出现1次到无限次
/\d{0,}/g 代表任意数字出现0次到无限次 - +* 简写
+表示{1,} 即/d+/g 等同于 /\d{1,}/g
* 表示{0,} 即/d*/g 等同于 /\d{0,}/g
电话号码规则为：
- 11位数字
- 第一位为1
- 第二位为3~9
题解：
function check() {
var tel = document.getElementById( 'tel' ).value
if ( !tel.match( /^1[3-9]\d{9}$/g ) ) {
alert( '格式错误')
}else {
alert( '输入正确')
}
}
此图解是对正则表达式：/^1[3-9]\d{9}$/g
安利：图解网站
二、正则表达式的使用
1.正则表达式的基本语法
语法格式：/正则表达式主体/修饰符(可选)【修饰符为可选，但一般使用g，代表全局匹配】
接下来介绍一下四种方法（在字符串中）：
- split()
将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
语法格式：str.split([字符串/正则表达式对象[, 限制返回数组中的元素个数]) - replace()
将一个字符串中的部分替换
语法格式：str.replace([字符串/正则表达式对象 , 替换的字符串) - search()
返回要查找的字符第一次出现的位置下标，若未找到返回-1
语法格式：str.search(需要查找的字符串/正则表达式对象)
返回索引 - match()
返回所有要查找的字符的值，并存入数组
语法格式：str.search(需要查找的字符串/正则表达式对象)
返回数组
三、正则对象RegExp
1.创建正则对象
- 直接赋值方式（推荐）
var reg=/1/g; - 构造函数方式
var reg=new RegExp(‘1’ , ‘g’);
补充：“g”：匹配时忽略大小写、“i”：全局匹配
2.正则对象的三种方法
- compile()
用于改变RegExp，既可以改变检索模式，也可以添加或者删除第二个参数。 - exec()
检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null
var str = '1231'
var patt = /1/g
console.log( patt.exec( str ) )
- test()
检索字符串中的指定值。返回值是 true 或 false
var str = '1231'
var patt = /1/g
console.log( patt.test( str ) ) //true
- 补充：当使用了修饰符g时，test()和exec()会储存每一次运行的记录，下一次运行会从上一次储存的位置开始
var str = '1231'
var patt = /1/g
console.log( patt.exec(str) )
console.log( patt.exec(str) )
console.log( patt.exec(str) )
四、网页小案例
1.题目要求
使用正则表达式验证用户输入
验证规则如下：
① 学号为9位数字，必须以19开头
② 密码只能包含数字、字母、下划线，长度8以上
③ QQ号为5-12位数字，第一位不能是0
④ Email格式为XXX@XXX.XXX
2.源码奉上
建议先尝试着写一下，自己完成更有成就感喔！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tit{
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tit">学号：</td>
<td><input type="text" name="xuehao" id="xuehao" value="" placeholder="19开头的9位数字" /></td>
</tr>
<tr>
<td class="tit">密码：</td>
<td><input type="password" name="pwd" id="pwd" value="" placeholder="数字\字母\下划线任意两种" /></td>
</tr>
<tr>
<td class="tit">QQ：</td>
<td><input type="text" name="qqNum" id="qqNum" value="" placeholder="非0开头的5-12位数字" /></td>
</tr>
<tr>
<td class="tit">邮箱：</td>
<td><input type="text" name="Email" id="Email" value="" placeholder="XXX@XXX.XXX" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="" value="check" onclick="check()"/></td>
</tr>
</table>
<script type="text/javascript">
function check(){
var result = "";
var xh = document.getElementById("xuehao").value;
var pwd = document.getElementById("pwd").value;
var qq = document.getElementById("qqNum").value;
var Email = document.getElementById("Email").value;
console.log(xh)
var patt_xh = /^19\d{7}$/; //19开头的9位学号
var patt_pwd = /(?![0-9]+$)(?![a-zA-Z]+$)(?!_+$)[0-9A-Za-z_]{8,}/; //数字、字母、下划线其中任意两种结合
var patt_qq = /^[^0]\d{4,11}$/; //非0开头的5-12位QQ号
var patt_Email = /.+@.+\..+/; //格式为XXX@XXX.XXX
result+=patt_xh.test(xh)?"":"学号";
result+=(patt_pwd.test(pwd)||result==""?"":"、")+(patt_pwd.test(pwd)?"":"密码"); //如果当前格式正确或者之前的信息没有错误，就不添加“、”
result+=(patt_qq.test(qq)||result==""?"":"、")+(patt_qq.test(qq)?"":"QQ号");
result+=(patt_Email.test(Email)||result==""?"":"、")+(patt_Email.test(Email)?"":"邮箱");
if(result!=""){
result+="格式错误";
alert(result);
return;
}else{
alert("验证通过");
}
}
</script>
</body>
</html>
您如果对文章有其他的见解，欢迎指正~
9624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
