懵逼的JavaScript大白(四)——正則
正則:你好,我叫正則。
大白:你好,我叫不會。
一、正則簡介
1、作用:正則表示式是一組用於對字串進行操作的工具。
2、正則表示式不是js中的一個特有組成部分。而是一個單獨的功能,大多數程式語言都會對正則進行實現。
3、建立方式:在js中正則表示式使用的是內建物件設定方式。
① 建構函式建立方式:new RegExp(‘abc’);
② /abc/
二、正則匹配
1、簡單類和正則方法test()
簡單類:正則最簡單的使用方式
功能:按照內部字元進行匹配操作。
var reg = /abc/;
正則方法test():用於對某個字串進行匹配操作,返回布林型別值,true表示匹配成功,false表示匹配失敗。
var reg = /abc/;
console.log(reg.test('xxxabcxxx'));//true
console.log(reg.test('abcxxx'));//true
console.log(reg.test('xxxabc'));//true
console.log(reg.test('xxxabxcxxx'));//false
2、字元類
1、字元類標識方式:在正則內部使用[]標識,[]整體表示某一位字元,內部的多個字元表示某個位置的多個情況
var reg = /[abc]/; console.log(reg.test('a'));//true console.log(reg.test('b'));//true console.log(reg.test('c'));//true console.log(reg.test('abc'));//true console.log(reg.test('xxaxx'));//true console.log(reg.test('xxxx'));//false
3、反向類
:反向類功能是基於字元類的,是對字元類的功能擴充套件。
標識方式:在[]最開始位置書寫一個 ^ , 表示反向,可以匹配除內部字元以外的其他字元。沒說不能有abc,關鍵是有沒有其他字元。
var reg = /[^abc]/;
console.log(reg.test('abc')); // false
console.log(reg.test('xxxx')); // true
console.log(reg.test('xxax')); // true 只要函式abc以外的其他字元即可
console.log(reg.test('123')); // true
4、範圍類
var reg = /[d-h]/;
console.log(reg.test('f'));//true
console.log(reg.test('a'));//false
console.log(reg.test('123'));//false
console.log(reg.test('ABWDW'));//false
// 常見的範圍類:
// /[a-z]/ - 匹配任意小寫字母
// /[A-Z]/ - 匹配任意大寫字母
// /[0-9]/ - 匹配數字字元
// /[\u4e00-\u9fa5]/ - 匹配中文字元
5、組合類
組合類:允許同時設定多種匹配規則
var reg = /[a-z0-9A-Z]/;
var reg = /[[email protected]]/;
6、預定義類
正則中提前設定的匹配方式。
// \d - 用於匹配數字字元
var reg = /\d/;
console.log(reg.test('100'));//true
console.log(reg.test('abc'));//false
console.log(reg.test('[email protected]#$'));//false
// \D - 用於匹配非數字字元
var reg = /\D/;
console.log(reg.test('100')); // false
console.log(reg.test('abc')); //true
console.log(reg.test('[email protected]#$'));//true
// \w - 用於匹配單詞字元 [a-zA-Z0-9_]
var reg = /\w/;
console.log(reg.test('123'));//true
console.log(reg.test('abc'));//true
console.log(reg.test('ABC'));//true
console.log(reg.test('___'));//true
console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // false
// \W - 用於匹配非單詞字元
var reg = /\W/;
console.log(reg.test('123'));// false
console.log(reg.test('abc'));// false
console.log(reg.test('ABC'));// false
console.log(reg.test('___'));// false
console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // true
// \s - 用於匹配不可見字元(通常用來匹配空格、換行)
var reg = /\s/;
console.log(reg.test('\n')); // true
console.log(reg.test(' ')); // true
console.log(reg.test('\t')); // true
console.log(reg.test('abc123QWE_+=')); // false
// \S - 用於匹配可見字元(通常不使用)
var reg = /\S/;
console.log(reg.test('\n')); // false
console.log(reg.test(' ')); // false
console.log(reg.test('\t')); // false
console.log(reg.test('abc123QWE_+=')); // true
// . - 用於匹配可見字元(推薦使用的方式)
// 注意:在正則中.符號直接表示匹配含義,如果希望匹配.這個符號,使用\.
// 注意與\S的區別:認為空格屬於可見字元
var reg = /./;
console.log(reg.test(' ')); // true
console.log(reg.test('abc')); // true
console.log(reg.test('123')); // true
console.log(reg.test('\n')); // false
匹配可見字元使用.符號
匹配不可見字元使用\s
7、邊界
① 起始位置匹配:標識方式:在正則最開始位置書寫^
var reg = /^abc/;
console.log(reg.test('abcxxx'));// true
console.log(reg.test('xxxabcxxx'));// false
console.log(reg.test('xxxabc'));// false
② 結束位置匹配:標識方式:在正則最後位置書寫$
var reg = /abc$/;
console.log(reg.test('abcxxx'));// false
console.log(reg.test('xxxabcxxx'));// false
console.log(reg.test('xxxabc')); // true
③ 嚴格匹配方式:同時使用^$表示嚴格匹配,必須與內部內容完全一致才可以匹配成功。
var reg = /^abc$/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcabc')); // false
注意:所謂的完全一致,指的是規則相同,不是每個字都一樣
var reg = /^a[qwe]c$/;
console.log(reg.test('a[qwe]c')); // false
console.log(reg.test('aqc')); // true
console.log(reg.test('awc')); // true
console.log(reg.test('aec')); // true
8、量詞
量詞,用於指定某個部分的重複次數,讓書寫變得簡便
1、自定義量詞
① {n} 表示重複指定的次數
var reg = /^a{3}$/;
console.log(reg.test('a'));//false
console.log(reg.test('aa'));//false
console.log(reg.test('aaa')); // true
console.log(reg.test('aaaa'));//false
console.log(reg.test('aaaaaaa'));//false
② {n,} 表示重複至少n次
var reg = /^a{3,}$/;
console.log(reg.test('a'));//false
console.log(reg.test('aa'));//false
console.log(reg.test('aaa')); // true
console.log(reg.test('aaaa')); // true
console.log(reg.test('aaaaaaa')); // true
③ {n,m} 表示重複的次數範圍
var reg = /^a{3,5}$/;
console.log(reg.test('a'));
console.log(reg.test('aa'));
console.log(reg.test('aaa')); // true
console.log(reg.test('aaaa')); // true
console.log(reg.test('aaaaaaa'));
2、預定義量詞
① *
出現至少0次(出不出現均可)
var reg = /^a*$/;
console.log(reg.test(''));
console.log(reg.test('a'));
console.log(reg.test('aa'));
console.log(reg.test('aaa'));
console.log(reg.test('aaaa'));
console.log(reg.test('aaaaaaa'));
② +
出現至少1次
var reg = /^a+$/;
console.log(reg.test('')); // false
console.log(reg.test('a'));
console.log(reg.test('aa'));
console.log(reg.test('aaa'));
console.log(reg.test('aaaa'));
console.log(reg.test('aaaaaaa'));
③ ?
出現0次或1次
var reg = /^a?$/;
console.log(reg.test('')); // true
console.log(reg.test('a')); // true
console.log(reg.test('aa'));
9、或者
或者:表示多種情況選擇某一種
標識方式:|
var reg = /a|b|c|d|e|f|g/; // 相當於/[a-g]/,但是字元類書寫更簡便
var reg = /abc|efg|xyz/;
console.log(reg.test('abc'));//true
console.log(reg.test('efg'));//true
console.log(reg.test('xyz'));//true
如果為單個字元位置的多種情況,使用字元類。
如果為多個字元的多種情況,使用或者操作。
10、括號
括號: 表示某個部分為一個整體,先進行操作
var reg = /(ab|ef|xy)cd/;
console.log(reg.test('abcd'));//true
console.log(reg.test('efcd'));//true
console.log(reg.test('xycd'));//true
console.log(reg.test('xy'));//false
console.log(reg.test('ab'));//false
三、其他功能
正則對字串的操作功能一共為三種:匹配test(),替換replace(),提取。
1、替換操作:replace()
字串的替換方法
引數1:要匹配的內容,不僅可以使用字串,還可以傳入正則表示式
引數2:要替換為的內容
匹配模式
① 書寫位置: /abc/gi new RegExp(‘abc’, ‘ig’)
② 匹配模式g : 全域性匹配,用於找到所有滿足規則的字串部分
③ 匹配模式i : 忽略大小寫
2、提取操作
① 字串的match()
引數:正則表示式
var str = '小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:xi[email protected]小明的郵箱為:[email protected]';
console.log(str.match(/\[email protected]\w+\.\w+/g));
② 正則的exec()
引數:字串
使用同一個正則對一個字串進行多次提取操作,結果每次都是不同的。
當一輪提取操作完畢後,再次進行提取,返回null,表示提取已經一輪結束
var str = '小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]小明的郵箱為:[email protected]';
var reg = /(\w+)@(\w+\.\w+)/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
如果我們在條件中和迴圈體中分別進行exec呼叫,結果多次是不同的,導致跳項
while (reg.exec(str) !== null) {
console.log(reg.exec(str));
}
//一執行電腦就開始響,再晚一會就沒救了,你們千萬別試
提取結果為null或者陣列,轉換為布林型別,一個為false一個為true
將結果儲存在result變數中,迴圈體內使用result變數進行操作即可。
var result;
while (result = reg.exec(str)) {
console.log(result);
}