概念
什么是正则
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
应用场景
1）对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证
2）网络爬虫(一个网站到另一个网站的页面上去获取对方的相关信息)
3）内容替换、获取
-
手机号替换：替换前：13412345678 替换后 134****5678
-
敏感词替换：
原字符串：发发达中国辅个钓鱼岛地方规划导共产党
替换后：发发达xxx辅xxx地方规划导xxx
使用最多的是:表单数据的验证.
正则的创建[掌握]
字面量创建
语法：var regexp = /正则表达式/修饰符;
注意:一定要加 // , 不需要加引号
例:正则匹配hello
var reg = /hello/;
直接实例化
语法：var regexp = new RegExp（“正则表达式”，修饰符）;
例:
var reg = new RegExp('hello')
以对象的方式创建:需要加单双引号,但是不要加/ /
修饰符说明
| 标志 | 说明 |
|---|---|
| i | 忽略大小写 |
| g | 全局匹配 |
| gi | 全局匹配+忽略大小写 |
例: reg = /hello/g; 匹配全局hello reg1 = /Hello/i 匹配时不区分大小写
脚下留心:
只要写在“/”和“/”直接的内容就是正则表达式
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
脚下留心:
g是全局匹配.是模式修正符
replace() 方法
语法：字符串对象.replace(待匹配的字符串|正则表达式，替换的内容)
作用：用于替换字符串中的数据
返回：返回新的字符串（替换后的字符串）
例1: 替换目标字符串,将8换成6
var str = 'js8真厉害88';
console.log(str.replace(/8/g, 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,'**'));
}
回顾:
创建
字面量 var reg= /字符串/;
对象 var reg1 = new RegExp(‘字符串’)
模式修饰符
i 忽略大小写 g 全局
正则方法
test() 成功返回true,失败返回false
exec() 值匹配一次,成功返回数组,失败null
字符串方法
search() 查找
match() 匹配目标字符串,成功返回数组,失败返回null
replace() 替换目标字符串
正则语法(理解)
正则字符类
| 元字符 | 说明 |
|---|---|
| [a-z] | 匹配a-z任意一个字符 |
| [A-Z] | 匹配A-Z任意一个字符 |
| [a-zA-Z] | 匹配26个英文字母（大小写） |
| [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:判断出古诗中是否包含数字
var str = '东临碣6石,以观沧海';
var reg = /[0-9]/;
var reg = /\d/
思考: 如何判断字符串中是否含有指定数量数字？
重复字符(背)
| 限定符 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次,最少出现n次 |
| {n,m} | 重复n到m次 |
| [] | 匹配字符组内的字符 [abc] |
| ( str1 l str2 ) | 匹配字符串str1或者str2 |
举例：字符重复字符
var reg = /8*/; 可以有,可以没有
var reg1 = /8?/ 8最多出现一次
var reg2 = /8+/ 8最少出现一次
var reg3 = /8{6}/ // 8 出现6次
var reg4 = /8{6,10}/ // 8最少6次最多10次
var reg5 = /8{3,}/ // 最少3次
例1:
!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>
练习与应用[掌握]
1．邮政编码检测
规律:都是6位,以数字开头和结尾
// 邮政编码
// var str = '012132';
// var reg = /^\d{6}$/;
// console.log(reg.test(str));
2．文件格式检测
/\.(txt|doc)$/
注意 .在js中有特殊作用, 使用 \将其转义为普通字符 .
3．字符串首部去除空格
// 删除空格
// var str = " hello world ";
// var reg = /\s+/g; //空格至少出现一次,全局匹配
// var reg = /^\s+/; // 以空格开头,至少出现一次
// var reg = /\s+$/; // 空格至少出现一次,以空格结尾
// console.log(str.replace(reg,""))
4．邮箱地址检测
邮箱的规则:数字+字母，3~15位 @ 字母2~9位 . 字母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));
使用案例[掌握]
常用定位符(理解)
^ 限定行首数据,以…开头
$ 限定行尾数据,以…结尾
例:判断一个字符串中是以数字开头的
reg = /^\d/;
判断字符串是否以数字结尾
reg = /\d$/
分支条件的 | (掌握)
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．手机号检测
<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){1}/;
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>
6 手机号码的替换(扩展)
要求显示前三位和后三位,中间5位是*
var str = '18336622568';
var tag = /(\d{3})\d{5}(\d{3})/;
var new_str = str.replace(tag,'$1*****$2');
console.log(new_str);
$n一般是在字符串的替换函数replace中使用到，替换满足正则条件的字符串。
正则解读(扩展)
// var reg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/;
// (http(s)0次或1次://)0次或1次 (数字字母.-)至少1个多了不限 . (字母.)2到6位 ((/数字字母下划线.-)任意次)任意次 /0次或1次
// var str = "https://a-bc1.23.abc-123.ab.cd/a1_-./a1_-./index.html/";
作业
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZeDALAm-1662686986588)(/1565086618112.png)]
1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
3.重复密码 跟第一次输入 密码一致
4.手机号的验证 第一位必须为1，后面再加10位数字
5.邮箱 数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
综合表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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="提交" />
<script>
// 1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
// 2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符
// 3.重复密码 跟第一次输入 密码一致
// 4.手机号的验证 第一位必须为1，后面再加10位数字
// 5.邮箱 数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
// 6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
// 准备:获取节点,绑定事件
var userObj = document.getElementById('user');
var passObj = document.getElementById('pass');
var pass2Obj = document.getElementById('pass2');
var butObj= document.getElementById('btn');
// 1 设置三个状态,用于标识用户名,密码,重复密码是否验证成功
var x = false;
var y=false;
var z = false;
// 2 验证用户名,当失去焦点时触发事件
userObj.onblur = function(){
// a 获取表单中的值
var val = this.value;
//console.log(val);
// b 书写正则
var reg = /^[\w\-\u4E00-\u9FA5]{4,20}$/;
if(reg.test(val)){
this.nextElementSibling.innerHTML = '用户名合法';
x = true;
}else{
this.nextElementSibling.innerHTML = '用户名不合法';
x=false;
}
}
// 3 验证密码
passObj.onblur = function(){
var passVal = this.value;
//a 验证密码的长度
if(passVal.length>=6&& passVal.length<=20){
// b 验证密码输入的内容
//记录密码的强度状态
var a=0,b=0;c=0;
// 验证是否是有数字
var reg = /\d+/;
a = reg.test(passVal) ? 1 : 0;
//console.log(a);
// 验证是否有字母
var reg1 = /[a-zA-Z]+/;
b = reg1.test(passVal) ? 1 :0;
// 验证是否包含特殊字符
var reg2 = /[^a-zA-Z\d]+/;
c= reg2.test(passVal) ? 1 : 0;
// 给出面强度判断
var str = '';
switch(a+b+c){
case 1:
str = '弱';
break;
case 2:
str = '中';
break;
case 3:
str = '强';
break;
}
// 将密码强度追加到密码框后
this.nextElementSibling.innerHTML = str;
// console.log(a+b+c);
y=true;
}else{
this.nextElementSibling.innerHTML = '密码长度不够';
y=false;
}
}
// 4 验证重复密码
pass2Obj.onblur = function(){
var pass2Val = this.value;
var passVal = passObj.value;
if(pass2Val!=' ' && pass2Val==passVal){
this.nextElementSibling.innerHTML = '两次密码一致';
z = true;
}else{
this.nextElementSibling.innerHTML = '两次密码不一致';
z = false;
}
}
// 5 提交表单
butObj.onclick = function(){
if(x&&y&&z){
alert('提交成功')
}else{
alert('失败');
}
}
</script>
</body>
</html>
lse;
}
}
// 4 验证重复密码
pass2Obj.onblur = function(){
var pass2Val = this.value;
var passVal = passObj.value;
if(pass2Val!=’ ’ && pass2Val==passVal){
this.nextElementSibling.innerHTML = ‘两次密码一致’;
z = true;
}else{
this.nextElementSibling.innerHTML = ‘两次密码不一致’;
z = false;
}
}
// 5 提交表单
butObj.onclick = function(){
if(x&&y&&z){
alert('提交成功')
}else{
alert('失败');
}
}
</script>
\u4E00-\u9FA5 ↩︎
6545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
