前言:正則表達式又稱為火星文,因為視覺上讓人感覺很複雜。本文將會詳細介紹正則表達式,初學者只要認真閱讀過,定會有收穫。 1、正則的概念 正則表達式(regular expression)是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串,將匹配的子字元串替換或者從某個字元串中取出符 ...
前言:正則表達式又稱為火星文,因為視覺上讓人感覺很複雜。本文將會詳細介紹正則表達式,初學者只要認真閱讀過,定會有收穫。
1、正則的概念
正則表達式(regular expression)是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串,將匹配的子字元串替換或者從某個字元串中取出符合某個條件的子串等。
為什麼要用正則:前端往往有大量的表達數據校驗工作,採用正則表達式會使得數據校驗的工作量大大減輕。常用效果(郵箱、手機號、身份證號等等)。
2、創建方式
第一種方式:
// 通過構造函數的方式 var oReg = new RegExp('study', 'i');
第二種方式:
// 通過語法糖(簡寫)的形式 var oReg = /study/i;
修飾符:
i :表示忽略大小寫。
g:表示全局匹配,查找所有匹配而非在找到第一個匹配後停止。
m:多行匹配。
3、正則對象方法
test:檢索字元串中指定的值。返回true或false。
exec:用於檢索字元串中的正則表達式的匹配。返回一個數組,其中存放匹配的結果,如果未找到匹配,則返回值為null。
下麵我們來個舉個列子:
// 首先我來看test //我們要在字元串str中找出符合Reg的規則的子字元串,符合則返回true,不符合則返回false var str = 'Good good study, Day day up! Good good study'; var Reg1= /good/ig; var Reg2= /goood/ig; console.log(Reg1.test(str));//true console.log(Reg2.test(str));//false
// 接下來我們再來看 exec //用於檢索字元串中的正則表達式的匹配。返回一個數組,其中存放匹配的結果,如果未找到匹配,則返回值為null var str = 'Good good study, Day day up! Good good study'; var Reg= /good/ig; console.log(Reg.exec(str));//["Good", index: 0, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["good", index: 5, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["Good", index: 29, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["good", index: 34, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//null //註:如果沒有指定g修飾符,那麼每次匹配都是從頭開始匹配,如果指定g修飾符以後,下次匹配則從上次匹配的結束位置開始匹配。
4、字元串函數
search:檢索與正則表達式相匹配的值,返回字元串中第一個與正則表達式相匹配的子串的起始位置,如果沒有找到則返回-1。
match :找到一個或多個正則表達式的匹配。
replace:替換與正則表達式匹配的子串。
split :把字元串分割為字元串數組。
單看概念不容易理解,看看下麵的小實列就一目瞭然
var str = 'Good good study, Day day up! Good good study'; var Reg= /study/ig; console.log(str.search(Reg));//10 console.log(str.match(Reg));// ["study", "study"] console.log(str.replace(Reg,'aaaa'));//Good good aaaa, Day day up! Good good aaaa console.log(str.split(Reg));//["Good good ", ", Day day up! Good good ", ""]
5、正則表達式構成
正則表達式是由普通字元(列如字元a到z)以及特殊字元(稱為元字元)組成的文字模式。正則表達式作為一個模板,將某個字元模式與所搜索的字元串進行匹配。
①元字元---限定符:
*:匹配前面的子表達式零次或多次。
+:匹配前面的子表達式一次或多次。
?:匹配前面的子表達式零次或一次。
{n}:匹配確定n次。
{n,}:至少匹配n次。
{n,m}:最少匹配n次且最多匹配m次。
實列如下:
var str ='gd god good goood gooood'; var Reg1 =/go*d/ig; //*:匹配前面的子表達式零次或多次 console.log(str.match(Reg1));//["gd", "god", "good", "goood", "gooood"] var Reg2 =/go+d/ig; //+:匹配前面的子表達式一次或多次 console.log(str.match(Reg2));//["god", "good", "goood", "gooood"] var Reg3 =/go?d/ig; //?:匹配前面的子表達式零次或一次 console.log(str.match(Reg3));//["gd", "god"] var Reg4 =/go{2}d/ig; //{n}:匹配確定n次 console.log(str.match(Reg4));//["good"] var Reg5 =/go{2,}d/ig; //{n,}:至少匹配n次 console.log(str.match(Reg5));//["good", "goood", "gooood"] var Reg6 =/go{1,3}d/ig; //{n, m}:最少匹配n次且最多匹配m次 console.log(str.match(Reg6));//["god", "good", "goood"]
②元字元---字元匹配符:
字元匹配符用於匹配某個或某些字元。
[xyz]:字元集合。匹配所包含的任意一個字元。
[^xyz]:負值字元集合。匹配未包含的任意字元。
[a-z]:字元範圍。匹配指定範圍內的任意字元。
[^a-z]:負值字元範圍。匹配任何不在指定範圍內的任意字元。
\d:匹配一個數字字元。
\D:匹配一個非數字字元。
\w:匹配包含下劃線的任何單詞字元。等價於[a-z0-9A-Z_]
\W:匹配任何非單詞字元。等價於[^a-z0-9A-Z_]
\s:匹配任何空白字元。
\S:匹配任何非空白字元。
·:匹配除”\n”之外的任何單個字元。
實列如下:
var str = 'aiod acd abd add aed afd ahd $%#@ 12345678 asdfghh'; var Reg1 = /a[abc]d/ig; //[xyz]:字元集合。匹配所包含的任意一個字元 console.log(str.match(Reg1)); //["acd", "abd"] var Reg2 = /a[^abc]d/ig; //[^xyz]:負值字元集合。匹配未包含的任意字元 console.log(str.match(Reg2)); // ["add", "aed", "afd", "ahd", "asd"] var Reg3 = /a[a-z]d/ig; //[a-z]:字元範圍。匹配指定範圍內的任意字元 console.log(str.match(Reg3)); //["acd", "abd", "add", "aed", "afd", "ahd", "asd"] var Reg4 = /a[^a-e]d/ig; //[^a-z]:負值字元範圍。匹配任何不在指定範圍內的任意字元 console.log(str.match(Reg4)); //["afd", "ahd", "asd"] var Reg5 = /\d+/ig; // \d:匹配一個數字字元。 console.log(str.match(Reg5)); //["12345678"] var Reg6 = /\D+/ig; // \D:匹配一個非數字字元 console.log(str.match(Reg6)); //["aiod acd abd add aed afd ahd $%#@ ", " asdfghh"] var Reg7 = /\w+/ig; // \w:匹配包含數字,字母,下劃線的任何單詞字元,等價於[a-z0-9A-Z_] console.log(str.match(Reg7)); //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "12345678", "asdfghh"] var Reg8 = /\W+/ig; // \W:匹配任何非單詞字元。等價於[^a-z0-9A-Z_] console.log(str.match(Reg8)); // [" ", " ", " ", " ", " ", " ", " $%#@ ", " "] var Reg9 = /\s+/ig; // \s:匹配任何空白字元 console.log(str.match(Reg9)); //[" ", " ", " ", " ", " ", " ", " ", " ", " "] var Reg10 = /\S+/ig; // \S:匹配任何非空白字元 console.log(str.match(Reg10)); //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "$%#@", "12345678", "asdfghh"]
③元字元---定位符:
定位符可以將一個正則表達式固定在一行的開始或結束,也可以創建只在單詞內或只在單詞的開始或結尾處出現的正則表達式。
^:匹配輸入字元串的開始位置。
$:匹配輸入字元串的結束位置。
\b:匹配一個單詞邊界,也就是單詞和空格間的位置。
\B:匹配非單詞邊界。
// ^:匹配輸入字元串的開始位置。 var str ='123456'; var Reg1 =/^\d+/ig; var Reg2 =/\d/ig; console.log(Reg1.test(str));//true
//$:匹配輸入字元串的結束位置。 var str ='abcd789'; var Reg =/.+\d{3}$/ig; console.log(Reg.test(str));//true
// \b:限定單詞以什麼開頭和結尾,\B:限定單位不以什麼開頭和結尾 var str = 'good ogoodm goods sgoods'; var reg1 = /\bg\w+/g; var reg2 = /\w+d\b/g; console.log(str.match(reg1));//["good", "goods"] console.log(str.match(reg2));//["good"] var reg3 = /\Bg\w+/g; var reg4 = /\w+d\B/g; console.log(str.match(reg3));//["goodm", "goods"] console.log(str.match(reg4));//["ogood", "good", "sgood"]
④元字元---轉義符
\:用於匹配某些特殊字元(遇到特殊字元需要用反斜杠轉義)
// 特殊字元:. + * ? {} [] ^ $ \ var str = '++++++-*/%'; var oReg = /\++/g; console.log(str.match(oReg));//["++++++"]
⑤元字元---選擇匹配符
|:可以匹配多個規則
// 選擇匹配符 var str = 'gooqd gaawd gwwsd'; var oReg = /g(ooq|aaw)d/g; console.log(str.match(oReg));// ["gooqd", "gaawd"]
接下來是常用簡單型檢測案例
1、手機號檢測
// 下麵是國內 13、15、18開頭的手機號正則表達式。(可根據目前國內收集號擴展前兩位開頭號碼) var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/
2、檢測中文
//字元串只能是中文 var oReg = /^[\u2E80-\u9FFF]+$/;
3、身份證檢測
// 18位身份證檢測 var oReg = /^\d{17}[\dxX]$/;
4、日期檢測
//日期檢測 var oReg = /^\d{4}(\-|\/)\d{1,2}\1\d{1,2}$/;
5、去除首尾空格
// 去除首尾的空格 var sVal = oSpace.value; var oReg = /^\s+(\S*)\s+$/; console.log(sVal.replace(oReg, '$1'));
6、檢測文件格式
//檢測文件格式 var oReg = /.+\.(jpg|jpeg|png|gif)$/i;
7、檢測郵編
//檢測郵編 var oReg = /^\d{6}$/;
8、過濾
// 過濾 var str = '小明說小強是混蛋,小強說他不是混蛋'; str.replace(/混蛋/g, '**');