什么是正则表达式
了解正则表达式
- 什么是正则表达式正则表达式(regular expression)是一个描述字符模式的对象。
- 为什么要使用正则表达式正则表达式能够进行强大的“模式匹配”和“文本检索与替换”功能。前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻
正则的定义方式：
- 字面量方式：
var reg = /表达式/ig;
- 构造函数方式：
var reg = new RegExp('正则','ig');
字符串的方法：
- str.match(正则)
- str.match(正则) 匹配满足条件的数据，返回数组
- str.search(正则) 查找数据第一次出现的位置，找到返回下标，找不到返回-1
- str.replace(正则,'**') 查找替换
正则的符号
-
所有字母和数字都是按照字面量进行匹配,和字符串匹配等效
/good/gi -
字符类（只记小写字母即可）
.: 除换行以外的字符- \w : 代表数字或字母或下划线
- \W : 非数字字母和下划线字符
- \d : 数字
- \D : 非数字
- \s : 代表一个空格
- \S : 空格以外的字符
PS:以上所有字符类都只是匹配“一个”字符
- 特殊符号
^ $ . * + ? = ! : | \ / () [] {}
- []: 代表任意“单个字符” ,里面的内容表示“或”的关系
- -: 代表范围
- ^: 代表非
-
(): 表示分组（n是以最左边括号出现的顺序排列）
- $1: 表示第一个分组
- $n: 表示第n个分组（不能写在正则表达式里）
- \n: 在正则分组后面使用，表示对第n个分组的引用(一定要写在正则表达式里)
PS: 编写的正则分组数量越少越好
-
|: 表示或者
-
锚点定位
- ^: 表示以什么开头
- $: 表示以什么结尾
MDN是这样描述的：
^ | 匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。例如，/^A/ 并不会匹配 "an A" 中的 'A'，但是会匹配 "An E" 中的 'A'。当 '^' 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。反向字符集合 一节有详细介绍和示例。 |
|---|---|
$ | 匹配输入的结束。如果多行标志被设置为 true，那么也匹配换行符前的位置。例如，/t$/ 并不会匹配 "eater" 中的 't'，但是会匹配 "eat" 中的 't'。 |
-
表示数量，对前一个字符计数，
- *: 代表0个或0个以上 <===>{0,}
- +: 代表1个或1个以上 <===>{1,}
- ?: 代表0个或1个 <===>{0,1}
- {}:
\d{5}: 匹配5个数字
\d{5,10}: 匹配5个到10个数字
\d{5,}: 匹配5个或5个以上的数字
PS: 1）数量词*,+,{5,}，会尽可能多的去匹配结果（贪婪） 2）在后面加一个?表示尽可能少的去匹配结果（非贪婪） google,goooogle ==> /go+/
具体的案例
具体的字面量的表达式
* \d{1} : 代表一个数字
* \d{2,} :两个或两个以上的数字 22 22222
* \d{3,5} : 三到五个数字 2222 22(不满足) 66666
* [a-z]+[0-9][0-9][0-9][0-9][0-9] :至少要有一个字母开头，后面紧跟五个数字 b1234
* [a-z]+\d{5}:至少要有一个字母开头，后面紧跟五个数字
* b1234(不符合) 54321(不符合) fczct87654(符合)
* [_\$\d]+@\.+ 前面至少一个下划线或$或数字，紧跟@符号，最后紧跟至少一个.
* 座机：0770-2839982-234
正则： (\d{3,4}-)?\d{6,8}(-\d{3,4})?
* qq? 第一个qq：10000-
正则：[1-9]\d{4,}
* 邮箱：字母或数字或下划线组合@字母或数字或下划线组合.字母
正则：/\w+@\w+\.[a-zA-Z]+/
js具体的案例
1.需求：找到字符串中的所有数字
var str = 'daf8f4a0s6sf2fs54fs7';
//传统方式
var arr = [];
for(var i in str) {
// console.log(str[i]);
if(str[i] >= 0 && str[i] < 10) {
arr.push(str[i]);
}
}
console.log(arr);
//正则的方式:正则表达式，火星文
/*
正则：规则 字符数字符号@字符数字.字母 邮箱；电脑很笨也不懂规则。
我们要写好规则告诉电脑，要以指定的符号和书写方式电脑才能读得懂，这个表达式就是正则表达式；
*/
//邮箱正则：字符数字符号@字符数字.字母
// /^[a-zA-Z/-&%]+@[a-zA-Z/-&%]/.[A-Za-z]$/g;
var reg = /\d/g;
var arr2 = str.match(reg);
console.log(arr2);
2.正则的2种定义方式（字面量以及构造函数）以及过滤关键词案例
//字母量的方式
var str = '金哥你好金哥好啊，你在哪里啊金哥';
var reg = /金哥/g;//g叫做全部匹配
// var str2 = str.replace('金哥','**');//不用正则只能匹配到第一个金哥并替换掉
var str2 = str.replace(reg,'**');//找到全部并替换
console.log(str2);
//构造函数方法
var str3 = 'fuck;;;;;lallalssFUCKSDADAfuCKssfsfdword';
var reg2 = new RegExp('fuck','ig');//找到全部的fuck，并忽略大小写
var str4 = str3.replace(reg2,'***');
console.log(str4);
//有变量的时候
var word = 'fuck';
// var reg3 = /word/ig;//遇到变量不能用字面量的方式
var reg3 = new RegExp(word,'ig');//遇到变量只能用构造函数
var str5 = str3.replace(reg3,'**');
console.log(str5);
//敏感词过滤：
function filterStr(str) {
//过滤敏感词
var arr = ['反清复明','操','fuck','小学生','垃圾'];
arr.forEach(function(item) {
var reg = new RegExp(item,'ig');
str = str.replace(reg,'***');
});
return str;
}
var str6 = '操啦啦啦你垃圾，小学生玩游戏不大好，反清复明很fuck,真的很FUCK';
var newstr = filterStr(str6);
console.log(newstr);
3.需求：如何提取网页手机号码
<body>
<div id="str">
<p>“有一个姑娘，出征之前，偶然聊到，想要一套自己的表情包。”8月12105002033日，傅园慧迅速蹿红网络后，自称是女儿二十年“黑粉”的傅园慧母亲发了这条微博，配图正是女儿的搞笑表情包。傅园慧的父亲傅春昇也在微博转发了女儿的视频，还称赞女儿说：“宝贝纯真。”</p>
<p>奥运会中，许多运动员的眉头紧锁与傅园慧的活泼天真形成了很大的反差，这不禁让人好奇，究竟是怎样的家庭，才能让奥运“网红”傅园慧养成如此性格。</p>
<p>文/广州日报记者陈诗蓝---159558</p>
<p>傅春昇的微博里留有许多女儿小时候的照片。看得出，傅园慧从小就有些大大咧咧。</p>
<p>从小当男孩子养</p>
<p>父母性格无拘无束</p>
<p>在童年时一张和表哥的合影里，小傅园慧留着板寸头，穿着和表哥衣服风格很相近的深灰色套头衫，黑色长裤，浑似个小男孩。</p>
<p>即使是稍微长大了一点的傅园慧，打扮也非常中性。对此傅春昇也承认说：“我跟她妈妈的性格就是无拘无束，喜欢自由自在，所以小时候我们都把她当男孩子养，一点都不娇气，运动员就是要爽快点。”</p>
<p>尽管年少时打扮得潇洒不羁、雌雄莫辨的“傅爷”逐渐蓄起了长发，扮相温柔，也会被人称为“园园女神”，但仍时常“破功”。此前接受记者采访，在谈到如何保护自己的人身安全时，傅园慧就曾一本正经地秀过自己的“麒麟臂”。</p>
<p>面对女儿“不走寻常路”，傅园慧的父母并不太操心：“从小就教育她要活得开心，快乐地过好每一天比赛嘛，去好好享受比赛就行了，不要给自己太大的压力。”</p>
<p>傅园慧妈妈也是“段子手”，笑道：“唯有本黑粉对你的爱永远不变。”</p>
<p>童年</p>
<p>“妈妈，这个小雨伞哭了”</p>
<p>傅园慧的爸爸妈妈都不是运动员，爸爸从事运输业，妈妈是一家酒店的员工。不过两人都很喜欢体育，爸爸喜欢游泳，妈妈喜欢羽毛球。傅园慧如今的性格与父母的教育不无相关，傅春昇认为，教育孩子应该尊重孩子，不给孩子太大压力。</p>
<p>8月7日晚，傅园慧参加女子13888883838米仰泳半决赛的前一夜，尽管傅春昇和妻子紧张得睡不着，但一直没和女儿提比赛的事，只让女儿拍拍风景照给他们看，问女儿有什么想吃的。“我跟她妈妈从来没给女儿制定过任何目标，也不想去干涉她的人生，也没想过要让她拿金牌，那些东西哪有让我女儿过得开心来得重要？”</p>
<p>而幽默的傅妈妈常称傅园慧为“小园园”“园园女神”“傅小姐”，经常夸女儿“萌”，在微博上示爱女儿：“傅小姐，你怎么那么美？”</p>
<p>傅园慧在微博晒出国家队众人合影后， 傅妈妈趣评道：“流水的‘宠妃’，铁打的孙杨”。</p>
<p>傅妈妈留有许多她的“黑历史”，尽管女儿已经不再是当年的假小子，她仍想“揭穿”女儿：“别装淑女了，就你声大！”</p>
<p>傅妈妈更晒出傅园慧以前的短发照片称：“从当年的傅哥到如今的傅女神，时光匆匆，唯有本黑粉对你的爱永远不变。”</p>
<p>甚至在情人节时，傅妈妈称女儿为自己的小情人，祝她节日快乐。</p>
<p>傅妈妈说，傅园慧小时候就有不少经典语录：“她有13155684把小雨伞，是透明的，雨落在伞上面后，从伞里面往外看，雨水会一条一条流下来，她看到后跟我说，妈妈，这个小雨伞‘哭’了。”</p>
<p>背后</p>
<p>魔鬼训练让人目不忍视</p>
<p>作为国家运动员，傅园慧能和父母相处的时间很少。有一次，原本准备回家的傅园慧，临时接到通知回不来了，傅春昇为此连发三条微博：“郁闷啊!怎么讲好了要回杭州了，又变化了，不能回来了”，但他仍安慰女儿“不要把心情搞坏”。</p>
<p>在傅园慧家里，有两本记事本，父母按照年月日，记录了傅园慧一年56412355451天每天的所在地，有时候甚至详细到她的航班号。“小时候她在杭州的时间还比较久一点，慢慢开始有成绩了以后，她在杭州的日子实在是太少了，如果你当时不把它记下来，以后就完全记不住。”傅妈妈说，等女儿以后年纪大了，当她看到这些本子，也能回想起这些年，她所走过的路。</p>
<p>傅妈妈说，这些年两口子手机一直都是55465478642小时开机，而且还不能调到静音，就怕错过女儿的电话。</p>
<p>除了对女儿的想念，更多的时候他们对女儿的身体感到担忧和心疼。傅春昇甚至不愿意讲女儿在澳大利亚的魔鬼训练：“那强度是她从五岁游泳到现在从来没有的，说起这个我们都很心酸、很伤心。”</p>
<p>“之前她身体不好，休息了13155688415458655个月几乎没有训练，基础都没了。跟着澳大利亚的教练，从早到晚一直在练习，她都是硬撑下来，每天走路都走不动。”有一次，傅园慧传给父母一张照片，照片上她的手掌因为体能训练已经布满老茧，傅春昇和傅妈妈看了照片忍不住眼泪，“我们让她不要练了，她不同意，说我们在捣乱。”</p>
<p>即使到了巴西，傅园慧的身体仍没有完全恢复好，“腰动不了了，检查结果腰椎间盘突出，肩膀也不好，手都抬不起来。”</p>
<p>“她这几天每天都在针灸的，我们都理解不了她有多辛苦。”谈起远在巴西的女儿，傅春昇夫妇心里有无限的担忧。</p>
<p>女儿获得女子18888888868米仰泳铜牌后，傅春昇转发微博配文“棒棒哒”，傅妈妈则颇文艺地说：“四年巅峰、低谷，欢笑、泪水，我想象过无数个可能，但是今天，你就是你，而这时光，终不负你。”</p>
</div>
</body>
<script>
(function() {
var str = document.getElementById('str');
var tex = str.innerText;//不要标签，只要文本内容
// console.log(tex);
//需求：提取文章里面的所有手机号码
var reg = /\b1[3-9]\d{9}\b/g;
var arr = tex.match(reg);//匹配的数据返回到数组里面
console.log(arr);
})();
</script>
4.去除前后空格
var str = ' hi jingjing beihai ';
console.log(str);
var str2 = str.trim();//ES5的方法，不兼容低版本IE8-
console.log(str2);
//正则去首尾空格
var reg = /^\s|\s$/g;
var str3 = str.replace(reg,'');
console.log(str3);
5.切割字符串
//split()字符串方法，切割字符串变成数组
var str = '4-5-6-7';
var arr = str.split('-');
console.log(arr);
var str2 = 'a b,c，d, e， f%t-h';
var reg = /[\s,，%\-]\s*/;//[a-z]
var arr2 = str2.split(reg);
console.log(arr2);
6、表单验证
<body>
<form id="login" action="" method="post">
用户名：<input type="text" placeholder="写邮箱" /><span class="inf"></span><br />
手机：<input type="text" placeholder="写手机" /><span class="inf"></span><br />
<!-- 密码：<input type="text" placeholder="密码" /><span class="inf"></span><br /> -->
<input type="button" value="登陆" />
</form>
</body>
<script>
(function() {
//找节点
var login = document.getElementById('login');
var inputs = login.querySelectorAll('input');
var infs = login.querySelectorAll('.inf');
var isok1 = false;
var isok2 = false;
/*
需求：表单验证
* 验证表单的内容要符合一定的规则
知识点：正则的方法 正则.test(字符串),返回布尔值
* 测试正则表达式用test方法,返回布尔值
格式：正则表达式.test(字符串)
用<正则表达式>测试<字符串>是否匹配,返回true/false
* 测试正则表达式exec方法:返回满足条件的数据，不满足返回null
/xx/.exec(字符串)
*/
//验证邮箱：失去焦点的时候验证
inputs[0].onblur = function() {
//1、非空验证
var mail = inputs[0].value.trim();
if(mail) {
//非空
//2、正则验证
var reg = /^[\w\-%!]+@[\w\-%!]+\.[a-zA-Z]+$/;//邮箱的正则
var res = reg.test(mail);
// var res3 = reg.exec(mail);
// console.log(res3);
if(res) {
//真：验证通过
infs[0].innerHTML = '邮箱验证通过';
infs[0].style.color = '#58bc58';
isok1 = true;
//3.正确性验证：ajax把数据传给后端，后端查询数据库看是否匹配
}else{
//假：验证失败
infs[0].innerHTML = '邮箱格式错误';
infs[0].style.color = 'red';
isok1 = false;
}
// console.log(res);
}else{
//空
infs[0].innerHTML = '请输入邮箱地址';
infs[0].style.color = 'red';
}
}
//验证手机
inputs[1].onblur = function() {
//1、非空验证
var tel = inputs[1].value.trim();
if(tel) {
//非空
//2、正则验证
var reg = /^1[3-9]\d{9}$/;//手机的正则
var res = reg.test(tel);
// var res3 = reg.exec(mail);
// console.log(res3);
if(res) {
//真：验证通过
infs[1].innerHTML = '手机验证通过';
infs[1].style.color = '#58bc58';
isok2 = true;
//3.正确性验证：ajax把数据传给后端，后端查询数据库看是否匹配
}else{
//假：验证失败
infs[1].innerHTML = '手机格式错误';
infs[1].style.color = 'red';
isok2 = false;
}
// console.log(res);
}else{
//空
infs[1].innerHTML = '请输入手机号码';
infs[1].style.color = 'red';
}
}
//密码长度：6-18
//点击提交：
inputs[2].onclick = function() {
//上面的两个正则都要验证通过才能提交跳转
if(isok1 && isok2) {
alert('成功登陆跳转');
}else{
alert('登陆失败');
}
}
})();
</script>
7.封装函数实现正则验证
var regChecked = {
mail : function(str) {
var reg = /^[\w\-%!]+@[\w\-%!]+\.[a-zA-Z]+$/;//邮箱的正则
var res = reg.test(str);//返回布尔值
return res;
},
tel : function(str) {
var reg = /^1[3-9]\d{9}$/;//手机的正则
var res = reg.test(str);//返回布尔值
return res;
}
}
var str = 'ssssd7.com';
var ok = regChecked.mail(str);
console.log(ok);//false
参考这篇的文章
很详细的文章：
