天天看點
傳回

Js-正規表達式和常用表達式Ⅰ- 壹 - 正則Ⅱ - 貳 - 正規表達式（示例）Ⅲ - 叁 - 常用表達式0 - 0 - 知識點：

Ⅰ- 壹 - 正則

  • 微型語言 正規表達式
  • 判斷字元串是否符合規則

建立正則

var reg=/正則内容/修飾符
var reg=/a/g;//字面量建立   /正則内容/修飾符

var reg=new RegExp(正則内容,修飾符)
var reg=new RegExp("s","g")//構造函數建立

一 正則方法兩種

方法名 簡介
reg.exec() 沒有查找到傳回null，用來查找滿足正則比對内容的結果并且傳回一個數組這個數組隻有一個元素，多個屬性分别是群組，還有索引，字元串本身，并不可以全局比對
reg.test() 判斷字元串正則是否滿足,檢索字元串中指定的值。傳回 true 或 false。 
console.log((/^[-+]?\d*$/).test("24"));

二 正規表達式的符号

1 修飾符

修飾符 簡介
i 正則比對内容忽略大小寫
g 全局比對 從頭查找到尾部
m 比對多行

2 範圍符（方括号）

方括号用于查找某個範圍内的字元：括号内都需要加上轉義斜杠 \ 字元串本身具有轉義

表達式 描述
[abc] 查找方括号之間的任何字元。
[^abc] 查找任何不在方括号之間的字元。^ 表示不選取 如果^ 不是第一個則無效
[0-9] 查找任何從 0 至 9 的數字。[0-20]= [0-2 0] === [0-2]
[a-z] 查找任何從小寫 a 到小寫 z 的字元。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字元。

3 元字元

元字元（Metacharacter）是擁有特殊含義的字元：

元字元 描述
.(點) 查找單個字元，除了換行和行結束符。統配的字元 ，一個點代表一個字元（比對任意一個），寫在[ ] 中就是轉義之後的點 而不是通配符
\w 查找單詞字元。[ a-zA-Z0-9_」
\W 查找非單詞字元。[ ^a-zA-Z0-9_」
\d 查找數字。等價于[0-9]
\D 查找非數字字元。等價于[ ^0-9]
\s 查找空白字元。等價于[ \f\n\r\t\v]
\S 查找非空白字元。

4 重複

量詞 描述
n+ 表達式至少出現1次，相當于 {1,}，比如：["a+b"可以比對 “ab”,“aab”,“aaab”…]
n* 表達式不出現或出現任意次，相當于 {0,}，比如：["/^*b"可以比對 “b”,"^^^b"…]
n? 比對表達式0次或者1次，相當于 {0,1}，比如：["a[cd]?"可以比對 “a”,“ac”,“ad”]
n{X} 表達式重複n次，比如：["/w{2}" 相當于 “/w/w”]；[“a{5}” 相當于 “aaaaa”]
n{X,Y} 表達式至少重複m次，最多重複n次，比如：["ba{1,3}"可以比對 “ba"或"baa"或"baaa”]
n{X,} 表達式至少重複m次，比如：["/w/d{2,}“可以比對 “a12”,”_456",“M12344”…]
n$ 比對任何結尾為 n 的字元串。與字元串結束的地方比對，不比對任何字元
^n 比對任何開頭為 n 的字元串。與字元串開始的地方比對，不比對任何字元
?=n 比對任何其後緊接指定字元串 n 的字元串。
?!n 比對任何其後沒有緊接指定字元串 n 的字元串。

5 轉義

兩個\在字元或者正規表達式的[]都是-一個\

console.1og("aa\\a\a" .match(/[\\]/g)); //列印  /


console.log("aZsw" . match(/[a-zA-Z]/g));
console.log("aZsw" .match(/[a-zA-Z0-9]/g));

三 字元串比對正則方法

方法名 簡介
str.search() 按照正規表達式查找字元串中的内容,傳回優先查找到第一個元素下标， 不能全局比對。
str.split() 按照正規表達式比對内容切割字元串
str.replace() 按照正規表達式比對内容進行替換,可以替換成相同的也可以替換成不同的，可以擷取下标和元素
str.match() 如果不加全局,可以達到exec的目的，如果加有全局比對,就會隻傳回找到的所有元素數組，如果加有群組,但是不加全局,則除傳回找到的元素外,還傳回群組的元素。

1 str.search()

按照正規表達式查找字元串中的内容,傳回優先查找到第一個元素下标

用法：

var str="abcdeafgh";
console.log(str.search(/a/));// 0

2 str.split()

按照正規表達式比對内容切割字元串，不能使用全局比對

用法：

str.split("b")
console.log(str.split(/[cf]/));//Array(3) [ "ab", "dea", "gh" ]

var str=" abc (nihao)dejs";
str=str .split(/[\(\)]/)[1];
console.log(str);//nihao

3 str.replace()

按照正規表達式比對内容進行替換,可以替換成相同的也可以替換成不同的。可以擷取元素和下标

用法：

str=str.replace(/a/g,"z");
	str.replace(正規表達式,回調函數(item,index){
    return //傳回要替換的内容
  })
           
var str="abcdeafgh";
 str=str.replace(/a/g,function(item,index){
    return index===0 ? "x" : "y";
})
console.log(str); //xbcdeyfgh

查找所有比對正則元素的下标

var str="abcdeafgh";
var arr=[];
        str.replace(/a/g,function(item,index){
            arr.push(index);
        })
        console.log(arr); //Array [ 0, 5 ]

把任何滿足正則内容的進行替換

1.  
           
var str="abcdeafgh";
str=str.replace(/[bdfh]/g,"0");
console.log(str);//a0c0ea0g0
           
var str="abcabcadf";
str=str.replace(/[abc]/g,function(item){
    switch(item){
        case "a":return "1";
        case "b":return "2";
        case "c":return "3";
    }
});
console.log(str);//1231231df
           
var str = "中國四大古典名著有'西遊記', '紅樓夢', '水浒','三國演義'";

    var n = 0;
    str = str.replace(/'/g, function (item) {
      return n++ % 2 === 0 ? "《" : "》";
    });
console.log(str)//中國四大古典名著有,《西遊記》, 《紅樓夢》, 《水浒》,《三國演義》

4 str.match()

如果不加全局,可以達到exec的目的。如果加有全局比對,就會隻傳回找到的所有元素數組。 如果加有群組,但是不加全局,則除傳回找到的元素外,還傳回群組的元素

用法：

var str="abcadef";

console.log(str.match(/a/g));//Array [ "a", "a" ]
Js-正規表達式和常用表達式Ⅰ- 壹 - 正則Ⅱ - 貳 - 正規表達式（示例）Ⅲ - 叁 - 常用表達式0 - 0 - 知識點：

四 正則用法以及特性

/a{0}/ 沒有字元a,意味着比對一個空字元
/b{0}/ 比對一個空字元

1 貪婪比對 先比對最大的

所謂的貪婪性就是正則在捕獲時，每一次會盡可能多的去捕獲符合條件的内容。

如果我們想盡可能的少的去捕獲符合條件的字元串的話，可以在量詞元字元後加“?“”

console.log("aaaaaaaa".match(/a{2,4}/g));//Array [ "aaaa", "aaaa" ]

console.log("aaaaaabbb".match(/a{0,4}/g));//Array(6) [ "aaaa", "aa", "", "", "", "" ]

.*:在一起就表示任意字元出現零次或多次,沒有

?

表示貪婪模式

2 非貪婪比對

用于* + 或者{ } 來比對最少的部分，用于重複的資料

console.log("aaaaaaaa".match(/a{2,5}?/g));//Array(4) [ "aa", "aa", "aa", "aa" ]
 console.log("aaaaaaaa".match(/a{2}/g));//Array(4) [ "aa", "aa", "aa", "aa" ]
 console.log("caaaaatcbbbbt".match(/c.*?t/g));//Array [ "caaaaat", "cbbbbt" ]

.*?:就是比對盡可能少的字元。就意味着比對任意數量的重複，但是在能使整個比對成功的前提下使用最少的重複(非貪婪模式)

3 斷言

斷言隻是條件，本身并不會比對，能幫助你找到符合條件的字元串

  • ?= 後置條件 向後斷言，例：(?=a) 僅當表達式 a 在 此位置的右側（後面）比對時才繼續比對。
  • ?! 向後斷言，不等于，例：(?!a) 僅當表達式 a 不在 此位置的右側（後面）比對時才繼續比對
  • ?<= 前置條件 向前斷言，例：(?<=a) 僅當表達式 a 在 此位置的左側（前面）比對時才繼續比對。
  • ?<! 前置條件不等于，例：(?<!a) 僅當表達式 a 在 此位置的左側（前面）比對時才繼續比對。

（1）前瞻斷言

  1. (?=exp) 順序肯定環視，表示所在位置右側能夠比對exp
  1. (?!exp) 順序否定環視，表示所在位置右側不能比對exp

（2）後瞻斷言

  1. (?<=exp) 逆序肯定環視，表示所在位置左側能夠比對exp 
console.log("a0bc adef a&bc".match(/(?<=[0-9])b/g))  //["b"]
 console.log("a0bc adef a&bc".replace(/(?<=[0-9])b/g,"1"));//前置條件    //a01c adef a&bc
  1. (?<!exp) 逆序否定環視，表示所在位置左側不能比對exp

5 或者 |

| | 或者 空字元串

console.log("abcdef".match(/|a|b/g));//如果|得一端沒有内容,則認為比對空字元
 
console.log("abcdef".match(/a||b/g));//如果|得一端沒有内容,則認為比對空字元

console.log("abcdef".match(/a|d|/g));//如果|得一端沒有内容,則認為比對空字元

6 群組 ( )

當使用match時，如果使用群組，加上g和不加g是有差距

不加g可以将每個群組清單在數組的下标1開始的元素

加g就不能找到群組内容

console.log("18617891076".match(/(\d{3})(\d{4})(\d{4})/)) //Array(4) [ "18617891076", "186", "1789", "1076" ]

 console.log("10[a]3[bc]".match(/(\d+)\[([a-zA-Z]+)\]/g)) "10[a]"，"3[bc]"

在replace中如果不使用群組，後面的函數中參數第一位時符合正則内容，第二位是這個字元的下标

在replace中如果使用群組，後面的函數中參數分别是符合正則的内容，和每個群組的内容

預設  $1,$2,$3....   為群組的第幾個

//3[a]3[bc]==>aaabcbcbc

var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function($1,$2,$3){

     return $3.repeat($2);

  });


var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function(item1,item2,item3){

     return item3.repeat(item2);

  });

  console.log(str);

Ⅱ - 貳 - 正規表達式（示例）

一 隐藏手機号

方法1：

var str="18617891076".match(/(\d{3})(\d{4})(\d{4})/).slice(1).reduce(function(value,item,index){
        return index===1 ? value+"****" : value+item;
    })
    console.log(str);  //186****1076

方法2：

var str="18617891076".replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
   console.log(str);   //186****1076

二 檢測中文

三 檢測郵箱

四 内容必須包含數字

并且的關系

Ⅲ - 叁 - 常用表達式 

1.比對手機号碼
    /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    舉例：
        if(!tel.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)){
              alert("請輸入正确的手機号碼！");

         }
   2.比對郵箱
     /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
     ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
     舉例：
         if(!eamil.match( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
              alert("請輸入正确的手機号碼！");

         }  
    3.比對中國大陸身份證
      /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/
	  18位身份證号碼	^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
    4.比對數字,字母,下劃線,中文
      /^[\u4e00-\u9fa5A-Za-z0-9_]+$/ 

    5.比對IP位址  
      /^[1-9]\d{5}$/

    6.比對網址URL
      /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/

    7.比對字母開頭，5-16字元，字母數字下劃線：
      /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/   

    8. 域名	[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
  
    9. InternetURL	[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
  
    10. 帳号是否合法(字母開頭，允許5-16位元組，允許字母數字下劃線)	^[a-zA-Z][a-zA-Z0-9_]{4,15}$
	11.碼(以字母開頭，長度在6~18之間，隻能包含字母、數字和下劃線)	^[a-zA-Z]\w{5,17}$
	12.日期格式	^\d{4}-\d{1,2}-\d{1,2}
	13.空白行(可以用來删除空白行)	\n\s*\r
	14.首尾空白字元(可以用來删除行首行尾的空白字元(包括空格、制表符、換頁符等等)	^\s*|\s*$或(^\s*)|(\s*$)

正則驗證代碼如下：

驗證字母：/^[a-zA-Z]+$/
驗證長度為3的字元：/^.{3}$/
驗證由26個英文字母組成的字元串：/^[A-Za-z]+$/
驗證日期YYYY-MM-DD：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
驗證郵編：/^\d{6}$/
驗證日期格式YYYY-MM-DD hh:mm:ss：/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
驗證整數：/^[-+]?\d*$/
驗證小數：/^[-\+]?\d+(\.\d+)?$/
驗證中文：/^[\u4e00-\u9fa5]+$/
驗證郵箱：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
驗證手機号：/^1[3456789]\d{9}$/
驗證身份證：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/

3[a]3[bc]==>aaabcbcbc

預設  $1,$2,$3....   為群組的第幾個

var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function($1,$2,$3){

     return $3.repeat($2);

  });


var str="10[a]3[bc]".replace(/(\d+)\[([a-zA-Z]+)\]/g,function(item1,item2,item3){

     return item3.repeat(item2);

  });

  console.log(str);

0 - 0 - 知識點：

repeat()

使用repeat之後會将原來的字元串複制n次

let str="qwe"
  
 let str2=srt.repeat(2)
  
 console.log(str2) *//qweqwe*
js 正規表達式
上一篇: 【JS】表達式&amp;語句
下一篇: js周遊el表達式數組

繼續閱讀