堅持是你能夠掌握的最重要的技能!
1. 正則表達式(Regular Expression)的作用:
匹配字符串
2. 正則表達式的組成:
元字符 / 限定符
3. MDN web技術文檔之正則表達式:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
4. 元字符:
. 除了\n以外的任意的一個字符;
[] 範圍,另一個含義: 把正則表達式中元字符的意義幹掉 [.] 就是一個.
[0-9] 0到9之間的任意的一個數字
[a-z] 所有的小寫的字母中的任意的一個
[A-Z] 所有的大寫的字母中的任意的一個
[a-zA-Z] 所有的字母的任意的一個
[0-9a-zA-Z] 所有的數字或者是字母中的一個
| 或者
[0-9]|[a-z] 表示的是要麼是一個數字,要麼是一個小寫的字母
() 分組 提升優先級
([0-9])([1-5])([a-z]) 三組, 從最左邊開始計算
* 前面的表達式出現了0次到多次
[a-z][0-9]* 小寫字母中的任意一個 後面是要麼是沒有數字的,要麼是多個數字的
"fdsfs3223323" [a-z][0-9]*
+ 前面的表達式出現了1次到多次
[a-z][9]+ 小寫字母一個,後面最少一個9或者多個9
"fesfewww9fefds"
? 前面的表達式出現了0次到1次,最少是0次,最多1次,另一個含義:阻止貪婪模式(不常用)
[4][a-z]? "1231234ij"
{} 更加的明確前面的表達式出現的次數
{0,} 表示的是前面的表達式出現了0次到多次,和 *一樣的
{1,} 表示的是前面的表達式出現了1次到多次,和 +一樣的
{0,1} 表示的是前面的表達式出現了0次到1次,和 ?一樣的
{5,10} 表示的是前面的表達式出現了5次到10次
{4} 前面的表達式出現了4次
{,10} 錯誤的========不能這麼寫
^ 以什麼開始,或者是取非(取反)
^[0-9] 以數字開頭
^[a-z] 以小寫字母開始
[^0-9] 取反,非數字 ^寫在括號裏面就是取反
[^a-z] 非小寫字母
[^0-9a-zA-Z_] 非數字非小寫字母非大寫字母非_
^[0-9][a-z] 相當於是嚴格模式 "3f2432e" (一個數字開頭,後面就要緊接字母)
$ 以什麼結束
[0-9][a-z]$ 必須以小寫字母結束,相當於是嚴格模式 "3f2432e" (最後一個是小寫字母結尾,前面是數字)
\d 數字中的任意一個
\D 非數字中的一個
\s 空白符中的一個
\S 非空白符
\w 非特殊符號 匹配字母或數字或下劃線
\W 特殊符號 等價於 [^0-9a-zA-Z_]
\b 單詞的邊界
5. 經驗:
找規律;不要追求完美。6. 身份證的正則表達式:(15位或者18位)
([1-9][0-9]{14}) | ([1-9][0-9]{16}[0-9xX]) (沒有對出生年月日進行精細匹配,這就是所謂的不要追求完美)
第二種寫法 ([1-9][0-9]{14})([0-9]{2}[0-9xX])?
7. 郵箱的正則表達式:(必須要記住的)
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
8. 創建正則表達式對象
構造函數創建對象
//對象創建完畢,也可以寫成new RegExp("\\d{5}");正則表達式是可以放在字符串裏面寫的,不過不推薦
var reg = new RegExp(/\d{5}/);
//調用方法驗證字符串是否匹配
var flag = reg.test("我的電話是10086");
//輸出 true
console.log(flag);
字面量方式創建對象(這種方式簡潔一點)
//字面量方式
var reg = /\d{5}/;
var flag = reg.test("我的電話是10086");
//輸出 true
console.log(flag);
9. 識別正則表達式是否匹配
/.?/.test("哈哈哈哈"); //true (這又不是嚴格模式)/b | (ara)/.test("abra"); //true (b或者ara)
10. 醍醐灌頂之真言
對於位置的理解,我們可以理解成空字符
11. 判斷文本框輸入的是不是郵箱 (嚴格模式)
^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$12. 其他
g 表示全局模式匹配
match 方法: 使用正則表達式模式對字符串執行查找,並將包含查找的結果作爲數組返回
RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個 子匹配(以括號爲標誌)字符串
var str="中國移動:10086,中國聯通:10010,中國電信:10000";
//把裏面所有的數字全部顯示出來
var array=str.match(/\d{5}/g);
console.log(array); //輸出 [10086,10010,10000]
//提取這裏的日
var str="2017-11-12";
var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
//console.log(array);
//正則表達式對象.$3
console.log(RegExp.$3); // 輸出12
var email="[email protected]";
email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
console.log(RegExp.$1);//用戶名
console.log(RegExp.$2);//126
console.log(RegExp.$3);//域名
replace 替換
var str="小蘇好帥哦,真的是太帥了,帥,就是真帥";
str=str.replace(/帥/g,"猥瑣");
console.log(str); //帥字全部替換爲猥瑣
trim 把字符串兩邊的空白都去掉(只是兩邊,中間的空白去不掉)
replace(/\s+/g,"") 這個就能把所有空白符都去掉
var str=" 哦買噶的 ,太幸福了 ";
str=str.trim();
console.log("==="+str+"===");
var str = " 哦買噶的 ,太幸福了 ";
str = str.replace(/\s+/g, "");
console.log("===" + str + "===");
i 表示忽略大小寫
exec 方法
var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
var reg=/\d{5}/g;
//通過正則表達式匹配這個字符串
var array=reg.exec(str);
while (array!=null){
//輸出匹配的內容
console.log(array[0]); // 10086 10010 10000
array=reg.exec(str);
}
===========================================================================
"JavaScript 正則表達式迷你書--老姚" 讀書筆記
1. 正則表達式字符匹配攻略
惰性匹配 ,就是儘可能少的匹配
var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["12", "12", "34", "12", "34", "12", "34", "56"]
其中 /\d{2,5}?/ 表示,雖然 2 到 5 次都行,當 2 個就夠的時候,就不再往下嘗試了
通過在量詞後面加個問號就能實現惰性匹配,因此所有惰性匹配情形如下:
2. 正則表達式位置匹配攻略
把字符串的開頭和結尾用 "#" 替換( 位置可以替換成字符的! )var result = "hello".replace(/^|$/g, '#');
console.log(result);
// => "#hello#"
多行匹配模式(即有修飾符 m)時,二者是行的概念,這一點需要我們注意
var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/
(?=p),其中 p 是一個子模式,即 p 前面的位置,或者說,該位置後面的字符要匹配 p 正向先行斷言比如 (?=l),表示 "l" 字符前面的位置,例如:
var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"
而 (?!p) 就是 (?=p) 的反面意思,比如: 負向先行斷言
var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// => "#h#ell#o#"
對於位置的理解,我們可以理解成空字符 ""
寫個正則不匹配任何東西 /.^/
var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => "12,345,678"