概念
什么是正则
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
正则的作用
1）对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证
2）网络爬虫(一个网站到另一个网站的页面上去获取对方的相关信息)
3）内容替换、获取
前台的验证、正则处理满足条件的字符串（网络爬虫 Python编程）数据采集（大宗点评：商家评论 抓取） curl函数库：模拟http请求。
最最最常用：表单验证
应用场景
手机号替换：替换前：13412345678 替换后 134****5678
敏感词替换：
原字符串：发发达中国辅个钓鱼岛地方规划导共产党
替换后：发发达xxx辅xxx地方规划导xxx
正则的创建
字面量创建
语法：var regexp = /正则表达式/修饰符;
注意: //不需要加引号
直接实例化
语法：var regexp = new RegExp（“正则表达式”，修饰符）;
参数说明
【必选】正则表达式：由一些普通字符和元字符组成（就是具有特殊含义的字符）【正则表达式区分大小写】
【可选】修饰符：可以使m、i、g分别表示多行匹配，i不区分大小写，g全局匹配
思考
/锄禾日当午/ 是不是正则表达式？
是的!
原因：只要写在“/”和“/”直接的内容就是正则表达式
RegExp对象方法(直接使用正则调用)
test()方法
- 判断正则表达式是否匹配成功
- 成功返回true，失败返回false
例1: 下述古诗中是否含有“乘风破浪”？
“乘风破浪会有时 直挂云帆济沧海 。”
<script type="text/javascript">
//创建字符串
var str = '乘风破浪会有时 直挂云帆济沧海';
//var obj = new RegExp('乘风破浪');
var obj = /乘风破浪/;
var ret = obj.test(str);
document.write(ret);
</script>
</body>
</html>
exec方法
- 匹配符合正则表达式条件的数据
- 成功返回数组
- 失败返回null
例1:匹配如下字符串中的js？
“js离离原上js草，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情。
<script type="text/javascript">
//创建字符串
var str = 'js离离原上js草，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情.';
//创建正则表达式对象
//var obj = new RegExp('js','g');
var obj = /js/g;
//调用exec方法匹配数据
document.write(obj.exec(str));
var row;
while(row = obj.exec(str)) {
document.write(row);
}
脚下留心：需要增加修饰符g表示全局匹配，否则出现死循环
正则的字符串调用函数
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法
语法：字符串对象.search(待查找的字符串|正则)
作用：用于搜索字符串中指定的元素
返回：返回符合条件的第一个元素下标，没找到返回-1
例1:使用正则搜索字符串中dream
使用正则表达式搜索 "I have a dream!" 字符串
var str = "I have a dream!";
var n = str.search(/dream/);
例2:直接使用字符串做参数
search() 方法使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
实例
检索字符串中 "dream" 的子串：
var str = 'Ihaveadream';
var res = str.search('dream');
console.log(res)
match()
语法：字符串对象.match(待匹配的字符串|正则表达式)
作用：匹配符合条件的内容
返回：返回一个数组
例1: 在字符串中查找 “ain”:
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g);
输出数组结果值:
ain,ain,ain
replace() 方法
语法：字符串对象.replace(待匹配的字符串|正则表达式，替换的内容)
作用：用于替换字符串中的数据
返回：返回新的字符串（替换后的字符串）
例1: 替换目标字符串
var str = '1907真厉害';
console.log(str.replace(9, 6));
例2:查找表单输入字符串中的敏感字符’国军’,有则替换未**
<input type="text" placeholder="请输入文字" id="content" value="" /><br/>
<input type="button" value="检测" id="check" /><br/>
<script>
var chk = document.getElementById('check');
// 检测是否有数字
chk.onclick = function(){
var con = document.getElementById('content').value;
// 注意加g的作用
var reg = /国军/g;
console.log(con.replace(reg,'**'));
}
正则语法
正则字符类
匹配a-z任意一个字符， 正则：[a-z]
匹配A-Z任意一个字符， 正则：[A-Z]
匹配26个英文字母（大小写）， 正则：[a-zA-Z]
匹配一个数字， 正则：[0-9]
匹配一个字符可以是数字、字母和下划线：[0-9a-zA-Z_]
匹配非数字，正则：[^0-9]
匹配非字母，正则：[^a-zA-Z]
多学一招： 如果需要取反在第一个“[”后面添加“^”符号即可
常用字符类
\d 匹配数字，相当于：[0-9]
\D 匹配非数字，相当于[^0-9]
\w 匹配数字、字母、下划线，相当于：[0-9a-zA-Z_]
\W 匹配非数字、字母、下划线，相当于：[^0-9a-zA-Z_]
\s 匹配空白字符串（空格）
\S 匹配非空白字符串
. 匹配所有字符
例1:判断出古诗中是否包含数字
思考: 如何判断字符串中是否含有指定数量数字？
什么是重复字符？
* 指重复0到多次
+ 指重复1到多次
？ 指重复0到1次
{n} 指匹配n次，如：{8} 匹配8次
{n, m} 指匹配n到m次，如：{1,8} 匹配1~8次
{n, } 指匹配至少n次，如：{1，} 匹配至少1次
举例：字符重复字符
8* K可以出现,也可以没有
8+ 至少有一个8
8? 最多有一个8
8{3} 含义出现3次，也就是 888
8{3,} 含义出现至少3，连续8，如88888
解决上一题的思考
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//创建字符串
var str = 'js离离原上H5草H5，5689899一岁一枯荣。野火烧不尽，春风吹又生H5。远芳侵古道，H5晴翠接荒城。又送王孙去，萋萋满别情。';
//需求：判断字符串中是否有指定数量的数字
//1.创建正则表达式 匹配出现3次的数字
var regexp = /\d{3}/;
if (regexp.test(str)) {
console.log('匹配出现3次的数字：有');
} else {
console.log('匹配出现3次的数字：没有');
}
//2.匹配含有3个9的数字
if (/9{3}/.test(str)) {
console.log('匹配出现练习的3个数字并且是数字9：有');
} else {
console.log('匹配出现练习的3个数字并且是数字9：没有');
}
//3.匹配数字5至少重复1次
if (/5{1,}/.test(str)) {
console.log('有');
} else {
console.log('没有');
}
if (/5+/.test(str)) {
console.log('有');
} else {
console.log('没有');
}
</script>
</body>
</html>
常用定位符
^ 限定行首数据
$ 限定行尾数据
例:判断一个字符串中是以数字开头的
分支条件的 |
jpg|png 判断图片格式是否合法
var str = “xxx.jpg”;
先判断一种情况
var regexp = /^.+\.jpg$|^.+\.png$/;
var regexp = /^.+\.(jpg|png)$/
例1:判断图片是否是xxx.jpg或者xxx.png结尾的
var regexp = /^.+\.(jpg|png)$/;
var str = 'aa.jpg';
console.log(regexp.test(str));
练习与应用
1．邮政编码检测
// 邮政编码
// var str = 012132;
// var reg = /^\d{6}$/;
// console.log(reg.test(str));
2．文件格式检测
/\.(txt|doc)$/
3．字符串首部去除空格
// 删除空格
// var str = " hello world ";
// var reg = /\s+/g;
// var reg = /^\s+/;
// var reg = /\s+$/;
// console.log(str.replace(reg,""))
4．邮件格式检测
邮箱的规则:数字+字母，3~12位 @ 字母2~3位 . 字母2~3
// var str = "chengfeng123@1000phone.com";
// var reg = /^[a-z\d]{3,15}@[a-z0-9]{2,9}\.[a-z]{2,3}$/;
// console.log(reg.test(str));
第三节:使用案例
1．手机号检测
<body>
<input type="text" placeholder="请输入手机号" id="phone" value="" /><br/>
<input type="button" value="检测" id="check" /><br/>
<script>
var che = document.getElementById('check');
che.onclick = function(){
var val = document.getElementById('phone').value;
// var str1 = "13569268597";
var reg1 = /^1[3578]{1}\d{9}/;
console.log(reg1.test(val))
}
</script>
</body>
2．身份证检测(规律难以把控)
身份证号码一共十八位,结尾时可能包含x
/^\d{17}(\d|x|X)$/
var num = '411381200010282611';
3．中文检测
常用字符都存在一个编码的规则，对于中文的编码一般都是使用utf-8编码，并且js天生使用的就是utf-8对待字符串。并且utf-8的编码是存在一个范围的[\u4e00-\u9fa5]
例:检测汉字在2-4个之间
/1{2,4}$/
<script>
var val = '幸福从追求开始';
// 检测两个汉字
var reg1 = /^[\u4E00-\u9FA5]{2,4}$/;
console.log(reg1.test(val))
</script>
4．用户名检测
例1: 账号由5~12个数字、字母下划线组成，首字母不能是数字
var username = ‘’;
1)先匹配5~12个数字、字母、下划线
var regexp = /\w{5,12}/
2)完善首字母不能是数字
var regexp = /[a-zA-Z_]\w{5,12}/
3）必须以字母下划线开头
var regexp = /^[a-zA-Z_]\w{5,12}$/
5．字符串过滤
例:检测内容中是否有空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var str = ' sdfsd';
var regexp = /\s/;
console.log(regexp.test(str))
</script>
</body>
</html>
脚下留心:
^ 和 $的使用
作业
[外链图片转存失败(img-MHOy68qT-1568548536506)(/1565086618112.png)]
1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
3.重复密码 跟第一次输入 密码一致
4.手机号的验证 第一位必须为1，后面再加10位数字
5.邮箱 数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
综合表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名：<input type="text" name="" id="user" value="" /><span></span><br />
密码：<input type="text" name="" id="pass" value="" /><span></span><br />
重复密码：<input type="text" name="" id="pass2" value="" /><span></span><br />
<input type="button" name="btn" id="btn" value="提交" />
</body>
<script type="text/javascript">
// 1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
// 2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符
// 3.重复密码 跟第一次输入 密码一致
// 4.手机号的验证 第一位必须为1，后面再加10位数字
// 5.邮箱 数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
// 6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
var ouser = document.getElementById("user");
var opass = document.getElementById("pass");
var opass2 = document.getElementById("pass2");
var obtn = document.getElementById("btn");
// 每个输入框的状态:成功/失败，初始为失败
var x = false;
var y = false;
var z = false;
ouser.onblur = function(){
//用户名的正则
var reg = /^[\w\-\u2E80-\u9FFF]{4,20}$/
if(reg.test(this.value)){
this.nextElementSibling.innerHTML = "可以使用";
x = true
}else{
this.nextElementSibling.innerHTML = "不符合规则，请输入中文、字母、数字、“-”“_”的组合，4-20个字符";
x = false
}
}
opass.onblur = function(){
if(this.value != opass2.value && opass2.value != ""){
opass2.nextElementSibling.innerHTML = "两次不一致";
z = false
}
if(this.value.length>=6 && this.value.length<=20){
// 三种情况的开关的定义，出现了一种就对应的改成1
var a = 0;
var b = 0;
var c = 0;
//是否出现数字的正则
var numReg = /\d+/g;
// if(numReg.test(this.value)){
// a = 1
// }else{
// a = 0;
// }
a = numReg.test(this.value) ? 1 : 0;
//是否出现字母的正则
var azReg = /[a-zA-Z]+/g;
// if(azReg.test(this.value)){
// b = 1
// }else{
// b = 0;
// }
b = azReg.test(this.value) ? 1 : 0;
//是否出现特殊的正则
var tsReg = /[^a-zA-Z0-9]+/g;
// if(tsReg.test(this.value)){
// c = 1
// }else{
// c = 0;
// }
c = tsReg.test(this.value) ? 1 : 0;
// 三种情况都判断之后,验证开关的结果
var str = ""
switch(a+b+c){
case 1:
str = "简单";break;
case 2:
str = "一般";break;
case 3:
str = "困难";break;
}
this.nextElementSibling.innerHTML = str;
y = true;
}else{
this.nextElementSibling.innerHTML = "长度不符合";
y = false
}
}
opass2.onblur = function(){
if(this.value == opass.value){
this.nextElementSibling.innerHTML = "一致";
z = true
}else{
this.nextElementSibling.innerHTML = "两次不一致";
z = false
}
}
// 判断所有输入框的状态
obtn.onclick = function(){
if(x&&y&&z){
alert("提交成功")
}else{
alert("提交失败")
}
}
</script>
</html>
h(a+b+c){
case 1:
str = “简单”;break;
case 2:
str = “一般”;break;
case 3:
str = “困难”;break;
}
this.nextElementSibling.innerHTML = str;
y = true;
}else{
this.nextElementSibling.innerHTML = “长度不符合”;
y = false
}
}
opass2.onblur = function(){
if(this.value == opass.value){
this.nextElementSibling.innerHTML = "一致";
z = true
}else{
this.nextElementSibling.innerHTML = "两次不一致";
z = false
}
}
// 判断所有输入框的状态
obtn.onclick = function(){
if(x&&y&&z){
alert(“提交成功”)
}else{
alert(“提交失败”)
}
}
\u4E00-\u9FA5 ↩︎
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
