正则表达式
1.什么是正则？
先来看个小栗子：找出字符串中所有的数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则</title> <script> var str='adm,112,--f 34 rt 54'; var re=/\d+/g; console.log(str.match(re)); </script> </head> <body> </body> </html>
可以看到正则的高效。
正则表达式：规则表达式。写给计算机看的，所以人类有点难懂。
2.正则表达式能做什么？
操作字符串
3.RegExp对象
JS风格——var re=new RegExp('a','i');//i表示不区分大小写，i--ignore（i是选项）
Perl风格——var re=/a/i;
4.正则与字符串的函数配合使用
（1）search 字符串搜索， 返回字符第一次出现的位置，-1代表没有找到
如：var str='qwwe 12 ff';
var re=/\d/;
console.log(str.search(re));
返回的结果是5；
注意：\n是转义字符，代表的是换行，那么在正则中也有一些转义字符，比如\d就代表数字
栗子：识别浏览器的版本，用userAgent
if(window.navigator.userAgent.search(/firefox/i)!=-1){
alert("ff");
}else if(window.navigator.userAgent.search(/chrome/i)!=-1){
alert("chrome");
}else if(window.navigator.userAgent.search(/360 browser /i)!=-1){
alert("360安全浏览器");
}
（2）match 获取匹配的项目
-全局匹配：g——global
-量词：+（多个，就是许多，不确定到底多少）
-量词变化：\d（1个数字）、\d\d(2个数字，仅限两个数字在一起输出)和d+（多个数字，这样可以将连在一起的数字，放在一起输出）
如：var re=/\d+/g;
（3）replace 替换所有匹配
在字符串中，用法：
var str='bdcafagh';
console.log(str.replace('a','T'));
结果是：
发现只能替换掉一个a并不能替换掉全部a
下面可以用正则来做：
var str='bdcafaghA';
console.log(str.replace(/a/gi,'T'));
注意：/a/gi，后面的gi的位置无所谓，可以是gi，也可以是ig
栗子：敏感词过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则1</title> <script> window.onload=function(){ var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn'); oBtn.onclick=function(){ var re=/我们|你们|他们/g; oTxt2.value=oTxt1.value.replace(re,"***"); } } </script> </head> <body> 转换前<textarea name="txt1" id="txt1" cols="40" rows="10"></textarea><br> <input type="button" id="btn" value="过滤"><br> 转换后<textarea name="txt2" id="txt2" cols="40" rows="10"></textarea> </body> </html>
效果：
5.字符类
（1）任意字符
[abc]：代表方括号里面的字符是或者的关系
如：[abc]就是和a|b|c一样的，只能取一个
（2）范围
[a-z]、[0-9]
（3）排除
[^a]:表示除了a以外都可以
（4）组合
[^a-z0-9]
栗子：偷小说
过滤HTML标签
--自定义innerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则1</title> <script> window.onload=function(){ var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn'); oBtn.onclick=function(){ var re=/<[^<>]+>/g;//<>里面不能出现<>本身 oTxt2.value=oTxt1.value.replace(re,""); } } </script> </head> <body> 转换前<textarea name="txt1" id="txt1" cols="40" rows="10"></textarea><br> <input type="button" id="btn" value="转换"><br> 转换后<textarea name="txt2" id="txt2" cols="40" rows="10"></textarea> </body> </html>
结果是：
（5）转义字符（为什么要转义，因为有些字符，计算机是识别不了的，比如回车符，转义之后\n，这样计算机就能看懂啦）
.(点)——任意字符，所有字符都可以
\d digital
\w word 相当于[0-9A-Za-z_](数字，字母和下划线)
\s space 空白，包括空格，制表符（Tab键）
\D [^0-9] 代表非数字
\W [^0-9A-Za-Z]
\S 除了空白字符以外的
（6）量词（一个东西出现的次数）
{n,m} 最少n次，最多m次
{n,} 最少n次，最多不限
{,m} 最少不限，最多m次
{n} 正好n次
栗子：QQ号（5-10位数字）
var str="我的QQ号:75087932,你的QQ号是782937847";
var re=/[0-9]\d{4,9}/g;
alert(str.match(re));
+ {1,} 最少出现1次，最多无限次。
？ {0,1} 可以不出现，出现了，最多就是1次
栗子1：校验邮箱
邮箱规则：
bluedancing_2016@126.com
一串字母，数字，下划线 @ 一串英文或数字 . 一串英文（长度2-4位）
\w+ @ [0-9a-z]+ \. [a-z]{2,4}
因为 . 在正则中表示任意字符，故在这边要进行转义\.
var re=/\w+@[0-9a-z]+\.[a-z]{2,4}/;(这个其实有问题的，下面会把问题列出来)
现在来验证一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>校验邮箱</title> <script> window.onload=function(){ var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function(){ var re=/\w+@[0-9a-z]+\.[a-z]{2,4}/; if(re.test(oTxt.value)){ alert("对了"); }else{ alert("你写错了"); } } } </script> </head> <body> <input type="text" id="txt1"> <input type="button" id="btn1" value="校验"> </body> </html>
结果是：
问题就出现在没有加上行首^和行尾$
var re=/^\w+@[0-9a-z]+\.[a-z]{2,4}$/;（这是正确的）
栗子2：去掉首尾空格
var str=" defr ww ad ";
var re=/^\s+|\s+$/g;
alert('('+str.replace(re,"")+')');
栗子3：检测中文 中文的范围[\u4e00-\u9fa5]，其中\u表示utf-8编码
var str=" 123 wedf 09啊 id ";
var re=/[\u4e00-\u9fa5]/;
alert(re.test(str));//true
注意：test方法，1，是用正则检验字符串；2，是只检测有没有，有就返回true。
栗子4：完美版getByClass，就是有那个类box的时候，才变色。包含box这个单词是不行的，如abox
——单词边界：\b
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>校验邮箱</title> <script> function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; var re=new RegExp('\\b'+sClass+'\\b');//表示sClass必须是独立的，不能是单词的一部分 for(i<0;i<aEle.length;i++){ if(re.test(aEle[i].className)){ aResult.push(aEle[i]); } } return aResult; } window.onload=function(){ var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl,'box'); var i=0; for(i=0;i<aBox.length;i++){ aBox[i].style.background='red'; } } </script> </head> <body> <ul id="ul1"> <li class="box"></li> <li class="abox"></li> <li ></li> <li class="box"></li> <li ></li> <li class="box active"></li> </ul> </body> </html>
结果：
