正则表达式

正则表达式基础

// var reg=/^(?=D+d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
// 构造函数创建
var reg=new RegExp(正则内容,修饰符);
// 字面量创建
var reg=/正则内容/修饰符
​
var reg=/a/i;
// 修饰符 三个
// i   不区分大小写
// g   全局匹配
// m   多行匹配
​
//正则对象的方法
// test()
// exec()
​
var reg=/a/i;
//判断test()参数中的字符串中有没有匹配正则表达式内容
var bool=reg.test("bcAdf");
console.log(bool);
​
var reg=/a/ig;
// exec 返回一个数组，表示exec()参数中字符串匹配正则的内容
// 不会全局匹配
var arr=reg.exec("bcAdfa");
console.log(arr);
​
// 字符串的方法
//search()
//match()
//replace()
//split()
​
var str="0Babcdef";
// 只能找到第一个不能全局匹配，返回找到内容下标
var index= str.search(/b/i);
console.log(index);
​
var str="0Babcdef";
var arr=str.match(/b/ig);
// 把找到匹配的元素用数组罗列，如果没有全局匹配和exec相同
console.log(arr);
​
var str="0Babcdef";
str=str.replace(/b/ig,"z");
// 当使用全局匹配时，可以完成所有元素的匹配替换
console.log(str);
str=str.replace(/b/ig,function(item,index){
    if(item==="B") return "Z";
    return "z";
});
console.log(str); 
​
var str="abc(nihao)dejs";
str=str.split(/[()]/)[1];
console.log(str); */

元字符

var str="catcbtc/tc1tc.tcabt";
console.log(str.match(/cat/g));
console.log(str.match(/cbt/g));
​
// . 匹配任何一个字符 是一个通配符
console.log(str.match(/c.t/g));
console.log(str.match(/c.t/g));//  . 把通配符.转为字符.
console.log(str.match(/c.t/g))
// [ab] 表示a或者b任意一个字符
// [abcdefghi] 匹配其中任意一个
console.log(str.match(/c[abcdefghi]t/g))
console.log(str.match(/c[a-i]t/g))
console.log("catcytcjt".match(/c[a-ik-z]t/g))
var str="中国四大古典名著有'西游记','红楼梦','水浒','三国演义'";
// "中国四大古典名著有《西游记》,《红楼梦》,《水浒》,《三国演义》"
// "中国四大古典名著有<西游记>,<红楼梦>,<水浒>,<水浒>";
var n=0;
str=str.replace(/'/g,function(item){
    return n++%2===0 ? "《" : "》";
});
str=str.replace(/[《》]/g,function(item){
    return item==="《" ? "<" : ">";
});
console.log(str); 
​
// 写在[]中的.就是转义字符.，不是通配符
console.log("ab.cd".match(/[ad.]/g));
// 所有的括号必须增加转义
console.log("ab.cd".match(/[{}[]()]/g));
// 两个 在字符或者正则表达式的[]都是一个
console.log("aa\aa".match(/[\]/g));
console.log("ab12nfs2".match(/[0-9]/g))
// [0-20]  [0-2 0] === [0-2]
console.log("134".match(/[0-20]/g));
​
console.log("aZsw".match(/[a-zA-Z]/g));
console.log("aZsw".match(/[a-zA-Z0-9]/g));
// /[aaaazzzzdddd]/  无意义  /[azd]/
console.log("aZsw".match(/[a-Z]/g));//错误的Unicode编码中a比Z大
console.log("aZsw".match(/[A-z]/g));//错误大写Z到a中间还有其他字符串
console.log("abcdef".match(/[a-ce-z]/g));
// 在[]内第一个字符是^，表示后面的字符不用，取反
console.log("abcdef".match(/[^d]/g));
console.log("abc^def".match(/[^^]/g));//不要^
console.log("abc^def".match(/[a^c]/g));//如果^不是第一个，作为字符^使用
​
console.log("abcdfeas".match(/[a-zA-Z0-9_]/g));
console.log("abcdfeas".match(/w/g));
console.log("abcdfeas".match(/W/g));//  /[^a-zA-Z0-9_]/g
console.log("28wdhd8223".match(/d/g));//   [0-9]
console.log("28wdhd8223".match(/D/g));//   [^0-9]
​
console.log("asd shw".match(/s/g));// 空格
console.log("asd shw".match(/S/g));// 非空格

重复

<div class="div1 div2 div4"></div>
<script>
  console.log("aaaaaa".match(/a{6}/));
  console.log("aabbaaabbb".match(/a{2}b{2}/g));
  console.log("aaaaaaa".match(/a{2}/g));
  console.log("aaaaaaa".match(/a{4}/g));
  console.log("aaaaaaa".match(/a{0}/g));//空字符串 空字符
​
  console.log("aaaaaaa".match(/a{1,4}/g)); // 先匹配最大的字符串  贪婪匹配
  console.log("aaaaaaa".match(/a{0,3}/g));
  console.log("colour".match(/colou{0,1}r/g));//可以有也可以没有
  console.log("color".match(/colou{0,1}r/g));
  console.log("color".match(/colou?r/g));
​
  console.log("aaaaaaa".match(/a{1,}/g));//{1,} 匹配至少1个也可以多个
  console.log("aaaaaaa".match(/a{0,}/g));//{0,} 可以有可以有若干个
​
  // /a*/g    /a{0,}/g
  // /a+/g    /a{1,}/g
  // /a?/g    /a{0,1}/g
​
  var div = document.querySelector("div");
  addClass(div, "div3     div6 div2   ");
  removeClass(div, "div3     div6 div2   ");
​
  function addClass(elem,className){
        var arr1=elem.className.trim().split(/s+/);//把div的类名拿到，并且去除两边空字符，再把类名切割放入数组
        var arr2=className.trim().split(/s+/);//原理同上，是添加的类名的数组
        console.log(arr1,arr2);
        arr1.forEach(function(item){//遍历原有的类名数组
            if(arr2.indexOf(item)<0) arr2.push(item);//遍历原类名数组里的item，如果在新数组里找不到，则把这个添加进去
        })
        elem.className=arr2.join(" ");//把新的和旧的类名整合到arr2，变成字符串赋值给elem.className
  } 
​
  function addClass(elem, className) {
    elem.className = (elem.className.trim() + " " + className.trim())//先把旧的新的类名字符串连接起来并且切割成数组A
      .split(/s+/)
      .reduce(function (value, item) {
        if (value.indexOf(item) < 0) value.push(item);//初始值为一个空数组，当数组A中没有这个元素，则push进value这个归并值数组
        return value;//每次返回value数组
      }, [])
      .join(" ");//相当于数组去重，最后转换为字符串
  } 
​
    function removeClass(elem,className){
      var arr=className.trim().split(/s+/);
      elem.className =elem.className.trim().split(/s+/).reduce(function(value,item){
            if(arr.indexOf(item)<0) value.push(item);
            return value;
      },[]).join(" ");
    } 
​
//   ([a-z])1  相同重复
    var     str="aaabbffddeeaaggfddssaaggeer".split("").sort().join("").match(/(w)1*/g).reduce(function(value,item){
   value+=item[0]+"["+item.length+"]";
   return value;
},"")
    console.log(str);
//   "a[7]b[2]d[4]"
​
//   * 或者+  或者 ｛num,｝  ? 来匹配最少的部分
    console.log('".aa""bbbb""dddd"'.match(/".+?"/));
    console.log('"...""bbbb""dddd"'.match(/"(.)1+"/));
​
    var str = "<p>Uber的这款无人车原型配备了多个<strong>摄像头  </strong>、<em>激光雷达</em>以及<span>传感器</span>，可看清100米范  围内任何方向的东西</p><br/><p>第二行内容，哎嘿，第二行内容</p>";
    str=str.replace(/<.*?>/g,function(item){
        if(item==="<br/>") return "
";
        return "";
    });
    console.log(str); 
</script>

选择和起始字符

<input type="text" name="user" id="user"><span></span><br>
<input type="password" name="password" id="password"><span></span><br>
<input type="text" name="email" id="email"><span></span><br>
<script>
    console.log("abcd".match(/ab/g));
    console.log("abcd".match(/[ac][bd]/g));
    console.log("abcd".match(/ab|cd/g));
    console.log("abcd".match(/ab||cd/g));
    console.log("abcd".match(/ab|cd|/g));
    console.log("abcd".match(/|ab|cd/g));
​
    var inputs=document.querySelectorAll("input");
    init();
    function init(){
        inputs.forEach(function(item){
            item.ids=0;
            item.addEventListener("input",inputHandler)
        })
    }
    function inputHandler(e){
        if(this.ids) return;
        var input=this;
        this.ids=setTimeout(function(){
            clearTimeout(input.ids);
            input.ids=undefined;
            regText(input);
        },500)
    }
​
    function regText(input){
        var span= input.nextElementSibling;
        if(regTest(input.value,input.name)){
            span.textContent="OK";
            span.style.color="green";
        }else{
            span.textContent="错误";
            span.style.color="red";
        }
    }
​
    function regTest(txt,name){
        switch(name){
            case "user":
            return /^w{8,36}$/.test(txt);
            case "password":
            return /^(?=D+d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(txt);
            case "email":
            return /^w{3,36}@w+.(com|net|cn|org)$/.test(txt);
        }
        
    }
​
    // 要完成一个全体内容匹配就需要使用起始和结束符来操作
​
    // ^  起始符，表示开始从这个开始匹配
    console.log("bbaacc".match(/^a+/g));//要求起始就需要是一个a以上
    // $ 结束符
    console.log("bbaacc".match(/c+$/g));//要求必须以某个字符结束
</script>

群组

console.log("aabcddaa".match(/(a+)bc(d+)(a+)/));
// 当使用match时，如果使用群组，加上g和不加g是有差距
// 不加g可以将每个群组列表在数组的下标1开始的元素
// 加g就不能找到群组内容
console.log("10[a]3[bc]".match(/(d+)[([a-zA-Z]+)]/g))
​
// 在replace中如果不使用群组，后面的函数中参数第一位时符合正则内容，第二位是这个字符的下标
// 在replace中如果使用群组，后面的函数中参数分别是符合正则的内容，和每个群组的内容
var str="10[a]3[bc]".replace(/(d+)[([a-zA-Z]+)]/g,function(item1,item2,item3){
    return item3.repeat(item2);
});
console.log(str); 
​
var str="backgroundPositionX".replace(/[A-Z]/g,function(item){
    return "-"+item.toLowerCase()
});
console.log(str); 
var str="background-position-x".replace(/-([a-z])/g,function(item,item1){
    return item1.toUpperCase();
});
console.log(str); 
​
var str="13879061235".replace(/(d{3})d{4}(d{4})/,"$1****$2");
console.log(str);

断言

// 前瞻断言   先行断言  紧随其后
console.log("abac".match(/a(?=b)/g));
// 查找紧随其后的内容是某个字符的条件
console.log("abac".replace(/a(?=c)/g,"z"));
// 查找紧随其后的内容不是某个字符的条件
console.log("abac".replace(/a(?!c)/g,"z"));
​
// 后瞻断言  后行断言  紧随其前
// 前面必须是某个条件，紧随其后的字符
console.log("abcb".replace(/(?<=a)b/g,"z"));
// 前面必须不是某个条件，紧随其后的字符
console.log("abcb".replace(/(?<!a)b/g,"z"));
console.log("6a66b7d".replace(/(?<=d+)[a-z]+/g,"z"));
​
/* "a4"
"aaaaaa4"
"aaslkdjaslkj4"
"a"
"As"
"A1232938s" */
// 1、字符中必须包含大写、小写字母，也必须包含数字，但是数字不能作为第一位使用
console.log(/^(?=D+d)(?=.*[a-z])(?=.*[A-Z])(?=.*W).{8,16}$/)
// /[u4e00-u9fa5]/  匹配中文字符