细聊 正则表达式 (附demo)

正则表达式

一.创建方式

1.字面量创键;

 1 var reg=/a/修饰符; 

2.new创键

 1 var reg=new RegExp("匹配的正则内容","修饰符") 

3.修饰符

i 不区分大小写
g 全局匹配
m 多行

二.正则方法

1.exec --- 会记录lastIndex

1  //这里记录这个正则表达式被使用后上次记录索引，下次查找时就按照这个索引后面去查找;引起记录的主要原因使用修饰符g
2 
3  var reg=/a/;
4         console.dir(reg);//打印出一些正则属性;
5         console.log(reg.exec("abacduab")); //0  根据正则reg中的a进行匹配,下标是0;
6         console.log(reg.exec("aowecad"));//5   第二次匹配就是

2.test

test 如果有匹配正则字符串返回true，否则返回为false

三.字符串方法

1.search

• 不会像正则表达式方法一样记录下标;

1  reg=/a/;
2         var str="adewfadev";
3         console.log(str.search(reg)) //再重复时.不会项exec一样有lastIndex记录;
4         console.log(str.search(reg)) //返回下标
5         console.log(str.search(/a(?=x)/g));//判断a后面是否有x,若有,返回0.否则返回1;

2.replace 

可以替换成不一样的东西,意思就是将字符串里面的一样的同一个字符可以替换成不一样的字符

1 console.log(str.replace(/a/g, ""))
2   var i=0;
3   //将a替换成1递增的数;
4   var str=str.replace(/a/g,(item,index)=>{
5     return ++i;
6      })

3.split

 1 console.log("abcdef".split(/[bd]/));//以b,d所在的位置切割; 2 //返回结果 ['a', 'c', 'ef'] 

4.match

• 查找符合匹配条件的字符;

 1 console.log("abcdef".match(/[ce]/g));//找到ce并放入数组内;

2 console.log("a8a7a67as6d".match(/\d/g))//找到数字放入数组内;//["8,"7,"6,"7] 

四.元字符等其他

1.通配符

• . 通配符无论是任何字符都能匹配

 1 var str="f+efjeoigj";

2 console.log(str.match(/f.e/)) 

2.转义字符 \

• 用途:当我们需要使用 . \ \ / [ { * \^ \?,需要前面转义;

• 一个\永远代表转义，不是\的含义
  

3.多项匹配

1.  [ae] 匹配a或者匹配e []里面的内容仅代表1个字符

2.  注意点: .被写在[]中就会自动转义为字符.

3.  中文匹配 console.log(/[\u4e00-\u9fd5]/g);

4.  在[]中最前面使用^ 表示后面的内容是反义 ，如果不是在最前面这个^表示 ^字符;

5. console.log("12873612".match(/0-9/g))意思就是只要不是0-9的数字就匹配;

4.一些简称符号

• [a-zA-Z0-9_] \w

• [^a-zA-Z0-9_] \W

• [0-9] \d

• [^0-9] \D

• 空白 \s \s是指空白，包括空格、换行、tab缩进等所有的空白;而\S刚好相反

• 非空白 \S

5.关于+ , * ,? 一些由来

• {1,} 1-任意多个 +

• {0,} 没有这个字符或者任意多个该字符 *

• {0,1} 有1个可以或者没有也可以 ?

• console.log("colour".match(/colou{0,1}r/g));//说明这个u有可以,没有也可以

• console.log("color".match(/colo{0,1}r/g));//没有主要体现在这个式子

附.adClass && removeClass

1  function addClass(elem,className){
 2            
 3    elem.className=className.match(/\S+/g).reduce(function(v,t){
 4                 if(!v.includes(t)) v.push(t);
 5                 return v;
 6                 console.log("aa")
 7              },elem.className.match(/\S+/g).reduce(function(value,item){
 8                 if(!value.includes(item)) value.push(item);
 9                 return value;
10              },[])).join(" ")
11         }

五.贪婪 &&非贪婪匹配

1.贪婪匹配

• 指定匹配次数,往最大匹配;

• a{2,11}最少两个,最多11个;贪婪匹配会根据最多的那个值一直匹配;

1         console.log("aaabbbccc".match(/a{2,11}b{3}c{3}/))
2         console.log("aaaaaabbbccc".match(/a{2,11}b{3}c{3}/))
3         console.log("aaaaaaaaaaabbbccc".match(/a{2,11}b{3}c{3}/))
4         console.log("aabbbccc".match(/a{2,11}b{3}c{3}/))

2.非贪婪匹配 .*?

• 重点:主要是依据?后面的字符来判断,一旦?后面的符合条件,则不在匹配,即为非贪婪;

console.log("<div></div><span></span><div></div><span></span>".match(/\<.*?\>/g))
//解析: 先将<转义,再将>转义,在内容当中匹配,首先是任意字符.,就会匹配字母以及</>的/,其次是*任意多个,最后是?最后遇到>就停止匹配;

 var str="中国四大古典名著<西游记>、<三国演义>、<水浒传>、<红楼梦>";
 str=str.replace(/\<.*?\>/g,function(item){
 return "《"+item.slice(1,-1)+"》";
 //解析:先匹配上述<西游记>,在通过将每一项减去首尾的<>,再前面加上》
 })

六.或者语&&起始结束符

1.或者语句

1 var str="abcdef";
2 console.log(str.match(/ab|ef/g))///输出结果为['ab', 'ef']
3 console.log(str.match(/ab||ef/g)) 会匹配空字符,即数组结果ad,后面的全为空;'ab', '', '', '', '', '']

2.起始符和结束符

1 /^[1-9]$|^[12]\d$3[01]$/     是通过1-9,10-29,30-31来写的;
2 /^\d$|^[1-9]\d$|^1\d{2}$|^2[0-4]\d$|^25[0-5]$/   0-9  10-99  100-199 200-249
3  /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/ // 0.0.0.0-255.255.255.255

七.群组

1.概念

1 var str="abcdef";
2 console.log(str.match(/^(\w{2})\w{2}(\w{2})$/));   //用括号括起来的会成为数组其中一项
3 //['abcdef', 'ab', 'ef']

2.特征

1. 群组可以单独提取其中部分内容

2. 当使用match时，如果在不使用g的情况下，使用（）将需要分开匹配的元字符选中，这时候在match返回的数组中将会从下标1开始为这些群组;

1 var str="中国四大古典名著<西游记>、<三国演义>、<水浒传>、<红楼梦>"
 2 var arr=[];
 3  //此处通过(.*?)将里面的内容括起来,然后就完成了群组
 4  str=str.replace(/\<(.*?)\>/g,function(item,group1,index){
 5  arr.push(group1);
 6  return "《"+group1+"》"
 7  console.log(group1)
 8  })
 9  console.log(str)
10 console.log(arr)//取出的那四个名著

1 //电话号码中间替换;
2         var str = "18617890098";
3         // 通过括号括住前三位,中间四位以及后三位,匹配所有,通过群组来替换中间四位
4         str = str.replace(/^(\d{3})\d{4}(\d{4})$/, function (item, group1, group2, index) {
5             // console.log(item,group1,group2,index);
6             return group1 + "****" + group2;
7         })
8         console.log(str)
9         str = str.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")//直接省略上面繁琐步骤

          3. 费扁平数组重复--使用递归

1 var str="2[3[cd]2[abc]2[ef]]";
 2   // 将[]前面的数字按内容重复
 3   function parse(str){
 4    //匹配前面数字,和里面内容,如果不符合,返回str
 5     if(!/\d+\[\w+\]/g.test(str)) return str;
 6     //将数字和里面的内容通过群组括起来,就是$1,$2,然后将$2重复$1次;
 7     str=str.replace(/(\d+)\[(\w+)\]/g,(item,$1,$2)=>{
 8      return $2.repeat($1);
 9    })
10       return parse(str);
11  }

八.断言

1. 后置断言

1 var str="abacad";
2 console.log(str.replace(/a(?=c)/g,"z"))   //后置肯定断言  a后面有c的
3 console.log(str.replace(/a(?!c)/g,"z"))    //后置否定断言   a后面没有c的

2.前置断言

1   var str="abcbdb";
2   console.log(str.replace(/(?<=c)b/g,"z"));   //前置肯定断言   b前面有c的
3   console.log(str.replace(/(?<!c)b/g,"z"))  //   前置否定断言  b前面没有c的

3.表达式

1  (?=\D+\d) 起始不能是数字，但是其第二位开始到结束必须有至少一个数字
2  (?=.*[a-z]) 在字符串的任意一位必须至少有一个小写字母a-z
3  (?=.*[A-Z]) 在字符串的任意一位必须至少有一个小写字母A-Z
4   [a-zA-Z0-9]{8,16} 密码是数字字母 8-16位
5   /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/

4.demo

var str = "i love 'javascript' and 'c++'";
2  //  \S就是匹配非空格字符一个以上;
3  str = str.replace(/(?<=')\S+(?=')/g, (item) => {
4       return item.toUpperCase();
5   })
6    console.log(str)
7    //此处的\S就是将非空格字符,也就是JavaScript等字符;

九.重复

1.重复(一)

• 重复正则的简写;

1     /\d\d\d\d-\d\d-\d\d/    ===>   /\d{4}(-\d{2}){2}/
2     /a{1}/  --> /a/
3     /a{0}/ -->""

2.重复 (升华版)

• (\w)要找的重复内容 \1重复 + 至少重复1次 *不重复也可以;

var str="asdljaisdlkas"
2 console.log(str.split(""))    //['a', 's', 'd', 'l', 'j', 'a', 'i', 's', 'd', 'l', 'k', 'a', 's']
3 console.log(str.split("").sort()) //['a', 'a', 'a', 'd', 'd', 'i', 'j', 'k', 'l', 'l', 's', 's', 's']
4   console.log(str.split("").sort().join(""))  //aaaddijkllsss;
5   
6 str=str.split("").sort().join("").match(/(\w)\1*/g).reduce(function(v,t){
7      return v+t[0]+"{"+t.length+"}";
8   },"")
9    console.log(str)   //a{3}d{2}i{1}j{1}k{1}l{2}s{3}

十.输入框验证页面

1.验证代码

1  var ids;
 2        var input=document.querySelector("input");
 3        input.addEventListener("input",inputHandler);
 4 
 5        function inputHandler(e){
 6         //采用节流
 7            if(ids) return;
 8            ids=setTimeout(()=>{
 9                clearTimeout(ids);
10                ids=undefined;
11                if(regTest(input.value)){
12                    input.nextElementSibling.textContent="正确";
13                    input.style.borderColor="orange";
14                }else{
15                    input.nextElementSibling.textContent="错误";
16                    input.style.borderColor="red";
17                }
18                console.log(input.value)
19            },500)
20        }
21        //实例
22        function regTest(value){
23        return  // /\d{17}(\d|X)$/.test(value);身份证
24        }

2.结合上述-常用验证

/^\w{8,32}$/.test(value);//用户名
2  /^\w{8,32}\@[0-9a-zA-Z]{2,16}\.(com|cn|net|edu)(\.[a-zA-Z]{2})?$/g.test(value)//邮箱验证
3  /^\d{8,16}$|^[a-z]{8,16}$|^[A-Z]{8,16}$/.test(value);//最简密码
4  /^\d{6,11}$/.test(value);//qq验证
5  /^\d{17}(\d|X)$/.test(value);//身份证验证
6  /^1[3-9]\d{9}$/.test(value);//电话号码验证