正則表示式基礎

// 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\\a\a".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 "\n";
        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]/  匹配中文字元