正則運算式

一.創建方式

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.多項匹配

[ae] 匹配a或者匹配e []里面的內容僅代表1個字符
注意點: .被寫在[]中就會自動轉義為字符.
中文匹配 console.log(/[\u4e00-\u9fd5]/g);
在[]中最前面使用^ 表示后面的內容是反義，如果不是在最前面這個^表示 ^字符;
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.特征

群組可以單獨提取其中部分內容
當使用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

1 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次 *不重復也可以;

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.結合上述-常用驗證

1 /^\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);//電話號碼驗證

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434437.html

標籤：JavaScript

上一篇：JS中陣列原型方法總結

下一篇：requestAnimationFrame實作單張圖片無縫持續滾動

細聊正則運算式(附demo)