辅助工具#
- 在线匹配 正则表达式在线测试 | 菜鸟工具
- 百度前端助手
- soft.huruqing.cn(或者其它地方) 去下载, 然后解压
- 打开chrome浏览器: 右上角省略号 -> 更多工具 -> 扩展程序 -> 打开开发者模式 -> 加载已解压的扩展程序
(一)创建正则表达式对象#
什么是正则表达式
- 字面量方式
- new 关键字
- 正则参数
<script>
// 1. 字面量创建正则表达式
// /web/,匹配的字符串只要含有web就能匹配上
var reg = /web/;
var str1 = 'asdfasdfasdwebasdfsdf';
var str2 = 'asdfasdfasdfasdfasdf';
// 匹配的方法是test
console.log(reg.test(str1)); //
console.log(reg.test(str2)); //
// 2.使用new的方式创建正则表达式
var reg2 = new RegExp('java');
var str3 = 'asdfasdfasdfjavaasdfasdfas';
console.log(reg2.test(str3));
// 3.参数 i-不区分大小写 g-全局匹配 m-多行匹配
var reg = /web/i;
var str = 'asdfasdfasdWebasdfsdf';
console.log(reg.test(str));
var str = 'asdfasdfasdWebasdfsdf';
var result1 = str.match(/a/);
console.log(result1)
var result2 = str.match(/a/g);
console.log(result2);
</script>
(二)常用匹配规则#
(1) 元字符#
- 任意字符 .
- \w 字母、数字、下划线
- \s 任意空白字符
- \d 匹配数字,等同于[0-9]
- \D 匹配非数字,等同于[^0-9]
- | 或匹配,如 /x|y/ 正则可匹配 x 或 y 两个字符
- ^ 匹配字符串的开始
- $ 匹配字符串的结束
- [abc] 表示 包含里面的任意一个
<script>
// 1. .匹配任意字符
var reg1 = /./;
var str = 'asdfasdf';
reg1.test(str);
// 2. \w匹配字母,数字,下划线
var reg2 = /\w\w\w/;
var str2 = 'asdf';
reg2.test(str2);
// 3. \s 任意空白字符
var reg3 = /ab\sab/;
var str3 = 'ab ab';
reg3.test(str3);
// 4. \d 匹配数字
var reg4 = /\d\d/;
var str = '1234';
reg4.test(str);
// 5. \D 匹配非数字
var reg5 = /^\D$/;
var str5 = '23423a234234';
reg5.test(str5);
// 6. | 或者
var reg6 = /13|18/; // 字符含有13或者18都能匹配
var str6 = '1388888';
reg6.test(str6);
var str6 = '18234234';
reg6.test(str6);
var reg6 = /abc|xyz/; // 匹配字符串含有abc或者xyz
var str6 = 'asdfasdabcasdf';
reg6.test(str6);
// 7. ^匹配开始
var reg7 = /^web/; // 匹配开始必须是web
var str7 = 'asdfasdfwebasdfasdf';
var str7_2 = 'webasdfasdf';
reg7.test(str7);
reg7.test(str7_2);
// 8. $匹配结尾
var reg8 = /^j\w\dt$/; // 匹配开始的字符必须j,j后面必须是数字字母下划线的一个,接着必须是一个数字,必须t结尾
var str8 = 'ja4t';
reg8.test(str8);
// 9. [abc] 只要包含abc任意一个字符都能匹配
var reg9 = /[abc]/; // 字符串只要含有abc中的一个都能匹配
var str9 = '2322alll';
reg9.test(str9);
reg9 = /[0-9]/; // 匹配0到9中的一个,相当于\d
reg9 = [a-Z]; // 匹配所有的大小写字母
// 10. [^x] 只要有一个不是x的字符都能匹配
var reg10 = /[^x]/;
var str10 = 'asdf';
reg10.test(str10);
// 11. [^abc] 只要有一个不是a,b,c的字符都能匹配
var reg11 = /[^abc]/;
var str11 = 'asdf';
reg11.test(str11);
// 12. \x转义字符
var reg12 = /.com/;
var str12 = "acom";
console.log("boo12", reg12.test(str12));
var reg12 = /\.com/;
var str12 = "acom";
console.log("boo12", reg12.test(str12));
</script>
(2) 反义字符#
- [^x] 匹配除“x”之外的所有字符,其中“x”可以为任意字符
- [^xyz] 同上,匹配除“x、y、z”之外的任意字符
(三) 重复匹配#
?
重复出现零次或一次+
重复出现一次或多次*
重复出现零次或多次- {n} 重复出现 n 次
- {n,} 至少重复出现 n 次
- {m,n} 重复重现 m 到 n 次,其中,m<n
/****** 重复 ********/
//1. `?` 重复出现零次或一次
var reg1 = /^https?:\/\//; // 表示必须以http开头,s可以出现0次或者1次
var str1 = "https://adfasdf";
console.log("boo1", reg1.test(str1));
var str1 = "http://adfasdf";
console.log("boo1", reg1.test(str1));
//2. `+` 重复出现一次或多次
var reg2 = /a+/; // 表示a必须出现1次或以上
var str1 = "ssa";
var str2 = "ssaaa";
console.log("boo14", reg2.test(str1), reg2.test(str2));
//3. `*` 重复出现零次或多次
var reg3 = /a*/;
var str1 = "sss";
var str2 = "ssaaa";
console.log("boo3", reg3.test(str1), reg3.test(str2));
//4. {n} 重复出现 n 次
var reg4 = /^\d{4}-\d{2}-\d{2}$/;
var str = '2021-06-06';
console.log('boo4',reg4.test(str));
var reg4 = /\d{4}-\d\d?-\d\d?/;
var str = '2021-6-6';
console.log('boo4',reg4.test(str));
//5. {n,} 至少重复出现 n 次
//6. {m,n} 重复重现 m 到 n 次,其中,m<n
var reg6 = /a{2,4}/
var str = 'aabcd';
console.log('boo6',reg6.test(str));
(三) 正则表达式应用#
// 1.字符串替换
var str = 'asdfasdfasdfwebasdfasdfasdfwebasdfasdfasdfweb'
// 把web替换成web工程师
str.replace(/web/g,'web工程师');
// 2.查找符合正则的条件的内容,举例:把网页中所有的图片的找出来
var str = document.body.innerHTML;
str.match(/https?:\/\/.*?\.(png|jpeg|gif)/g);
// 3. 网站正则验证
(四) 分组#
- 用括号分组
- 分组的应用
<script>
// 1.括号表示一个整体
// 2. 分组
// 3.字符串替换分组
var str = '13812345678';
var newStr = str.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
console.log(newStr);
</script>
五、贪婪匹配和惰性匹配#
- 字符串的match方法,可以检查匹配了几次
var str = 'asdfasdfasdfasdfasdf';
var list = str.match(/a/g);
console.log(list);
- 贪婪匹配,尽可能多的匹配(默认贪婪匹配)
var str = document.body.innerHTML;
str.match(/https?:\/\/.*\.(png|jpeg|gif)/g); // 贪婪匹配, 只能得到一个匹配项
- 懒惰匹配,尽可能少的匹配, 在重复的后面加?即可
var str = document.body.innerHTML;
str.match(/https?:\/\/.*\.(png|jpeg|gif)/g); // 懒惰匹配, 可以得到多个匹配项
正则表达式解读#
-
/^(0|86|17951|12593)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
- (0|86|17951|12593)? 手机号码前缀
- (13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57] |19[0-9]) 手机号码前3位
- [0-9]{8} 手机后8位
-
/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
// 邮箱地址匹配- \w+([-+.]\w+)*
- @\w+([-.]\w+)*
\.\w+([-.]\w+)*
-
/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
// 网址https?:\/\/
// 协议(([a-zA-Z0-9_-])+(\.)?)*
// 域名- `(:\d+)? // 端口
(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*
// 参数
作业#
- 判断以下正则的值, 并自行验证(练习)
// 说出正则表达式的含义,写出下面匹配的结果
/*************** 一元字符 ****************/
var reg = /b..k/;
var str = "books";
var str2 = "boooks";
reg.test(str);
reg.test(str2);
//
var reg = /t\wq/;
var str1 = "2222t2qkkk";
var str2 = "aaaaat$qbbbbb";
reg.test(str1);
reg.test(str2);
var reg = /\Dook/;
var str = "8ook";
reg.test(str);
var reg = /java\sscript/;
var str = "study java script";
reg.test(str);
var reg = /javascript|html|css/;
var str = "study javascript";
reg.test(str);
/*********** 匹配开始和结束 *************/
var reg = /^huruqing/;
var str = "huruqing123456";
reg.test(str);
var reg = /^huruqing$/;
var str = "huruqing123456";
reg.test(str);
/*********** 重复 *************/
var reg = /bo?k/;
var str = "book";
reg.test(str);
var reg = /bo*k/;
var str = "boook";
reg.test(str);
//+ 前面子表达式出现1次或多次
var reg = /bo+k/;
var str = "boook";
reg.test(str);
//{m,n}最少出现m次,最多出现n次
var reg = /bo{2,4}k/;
var str = "boooook";
reg.test(str);
//{m,}最少出现m次
var reg = /bo{2,}k/;
var str = "boooook";
reg.test(str);
//{m}正好出现m次
var reg = /bo{2}k/;
var str = "boook";
reg.test(str);
/****************** 反义 ****************/
var reg = /o[^usb]t/;
var str = "oat";
reg.test(str);
var reg = /[a-zA-Z0-9]ook/;
var str = "8ook";
reg.test(str);
-
编写一个用户名的正则,要求:
- 大写字母开头
- 其它字符可以是数字,字母,下划线
- 8到20个字符
var reg = /^[A-Z]\w{7-19}/;
-
给登录页面的手机号码添加验证
var reg = /^(0|\+86)?1[3456789]\d{9}/;