正則表達(dá)式
什么是正則表達(dá)式
由普通字符和特殊字符組成的文字模式
創(chuàng)建正則表達(dá)式的兩種方式
字面量或直接量方式
/regular expression/
構(gòu)造函數(shù)方式
new RegExp()
//demo
var str = 'i miss u';
var pattern = /miss/;
console.log(pattern.test(str)); //返回true/false
console.log(pattern.exec(str)); //返回一個(gè)數(shù)組/null
修飾符
- i : ignoreCase,忽略大小寫
- g : global,全局匹配
- m : multiline,多行匹配
var str = 'i miss u';
var pattern = /MISS/i;
console.log(pattern.test(str)); //true
console.log(pattern.exec(str)); //["miss",index:2,input:"i miss u",length:1];
var str = 'i miss u';
var pattern = new RegExp('MISS','i');
console.log(pattern.test(str)); //返回true/false
console.log(pattern.exec(str)); //返回一個(gè)數(shù)組/null
使用哪種方式創(chuàng)建正則?
構(gòu)造函數(shù)創(chuàng)建正則比較笨重,但是它的好處在于它能夠傳入變量
var str = 'i love Js';
var userInput = 'love';
var pattern = new RegExp(userInput,'i');
console.log(pattern.test(str))
轉(zhuǎn)義字符
//轉(zhuǎn)義 '/'
var str = '//123456789';
var pattern = /\/\//;
console.log(pattern.exec(str));
//轉(zhuǎn)義tab
var str = ' t';
var pattern = /\t/;
console.log(pattern.exec(str));
//unicode
var str = ' t';
var pattern = /\u0009/;
console.log(pattern.exec(str));
中文unicode范圍是\u4e00-\u9fa5
字符類
- []
var str = 'javascript';
var pattern = /[as]/; //只取一個(gè)字符,如果我匹配到了'j',這個(gè)正則就算是匹配過了,
console.log(pattern.exec(str)); //a
- ^
var str = 'javascript';
var pattern = /[^ajs]/; //取反,除了ajs以外的所有字符
console.log(pattern.exec(str)); //v
- a-z
var str = 'javascript';
var pattern = /[a-zA-Z]/; //a-z范圍
console.log(pattern.exec(str)); //j
//匹配漢字
var str = 'greentea帥';
var pattern = /[\u4e00-\u9fa5]/;
console.log(pattern.exec(str));
- .
var str = '3.1415926';
var pattern = /./; //匹配除了'\n'以外的所有字符
console.log(pattern.exec(str));
- \w
取反: \W
var str = '_';
var pattern = /./; //匹配a-zA-Z0-9_
console.log(pattern.exec(str)); //_
- \d
取反:\D
var str = '962464';
var pattern = /\d/; //匹配0-9
console.log(pattern.exec(str)); //9
- \s
取反:\S
var str = ' ';
var pattern = /\s/; //匹配空格和制表符
console.log(pattern.exec(str)); //' '
重復(fù)
var str = '110123';
var pattern = /\d{2,4}/; //匹配2-3個(gè)
var pattern = /\d{2,}/; //至少匹配兩個(gè)
var pattern = /\d{2}/; //匹配兩個(gè)
var pattern = /\d?/ //{0,1}
var pattern = /\d+/ //{1,}
var pattern = /\d*/ //{0,}
console.log(pattern.exec(str)); //1101
//demo
var price = "iphone價(jià)格7888.8";
var pattern = /\d+\.?\d*/
console.log(pattern.exec(price)); //7888.8
非貪婪的重復(fù)
正則在默認(rèn)的情況下都是貪婪的
在這個(gè)demo中,正則a查找一個(gè)或多個(gè),但是它卻匹配了最多的情況:
//demo
var str = 'aaaac';
var pattern = /a+/;
console.log(pattern.exec(str)); //aaaa
如果想按照最小來匹配呢?
在量詞后加'?'轉(zhuǎn)換為非貪婪匹配
var str = 'aaaac';
var pattern = /a+?/;
console.log(pattern.exec(str)); //a
再看一種情況:
var str = 'aaaac';
var pattern = /a+?c/;
console.log(pattern.exec(str)); //aaaac
在這里,為什么不是'ac'而是'aaac'?因?yàn)檎齽t表達(dá)式中匹配是從第一個(gè)位子匹配開始的,不一定找最合適的,而是最先能夠匹配的
選擇
var str = 'css html js';
var pattern = /html|css|js/; //或者的意思
console.log(pattern.exec(str)); //css
分組和引用
我們想匹配'abab',但是卻只匹配了'ab',因?yàn)榱吭~影響的是'b',而不是'ab'
//demo
var str = 'abab';
var pattern = /ab+/;
console.log(pattern.exec(str)); //ab
因此,用到了分組
var str = 'abab';
var pattern = /(ab)+/;
console.log(pattern.exec(str)); //abab
此時(shí)影響的就是'ab'了
再看一個(gè)關(guān)于'()'的例子:
var str = 'abcd';
var pattern = /(ab)c/;
console.log(pattern.exec(str)); //['abc','ab']
此時(shí),它不僅會匹配'abc',還會匹配'ab',這個(gè)'ab'是捕獲來的,如果我們不想捕獲它,可以這樣:
var str = 'abcd';
var pattern = /(?:ab)c/;
console.log(pattern.exec(str)); //['abc']
此時(shí),我們匹配的就只有'abc'了
再看一個(gè)關(guān)于捕獲的例子
var str = 'abcd';
var pattern = /(a(b(c))/;
console.log(pattern.exec(str)); //['abc','abc','bc','c']
還有一個(gè)....
var str = 'ab cd ab';
var pattern = /(ab) cd \1/; //代表第一個(gè)分組
console.log(pattern.exec(str)); //['ab cd ab','ab'];
關(guān)于引用,我們可以做到前面和后面是相同的,例如:
var str = '<p><a>這是一段文字</a></p>';
var pattern = /<([a-zA-Z]+)>(.*?)<\/\1>/;
console.log(pattern.exec(str)); //["<p><a>這是一段文字</a></p>", "p", "<a>這是一段文字</a>"]
位置匹配值收尾匹配
var str = 'js';
var pattern = /^js$/; //里面的'j'必須是開頭,'s'必須是結(jié)尾
console.log(pattern.exec(str)); //js
舉個(gè)例子,如何保證輸入的都是數(shù)字?
var str = '0982304985935309840958';
var pattern = /^\d+$/; //
console.log(pattern.exec(str)); //0982304985935309840958
是不是so easy?
關(guān)于邊界匹配:
var str = 'js html';
var pattern = /js\b/; // '\b'為匹配邊界
console.log(pattern.exec(str)); //js
RegExp對象的實(shí)例方法
var str = 'js js js';
var pattern = /js/g; //全局匹配
console.log(pattern.exec(str)); //js
console.log(pattern.exec(str)); //js
console.log(pattern.exec(str)); //js
console.log(pattern.exec(str)); //null
RegExp對象的實(shí)例屬性
var str = 'js js js';
var pattern = /js/ig;
console.log(pattern.ignoreCase); //true
console.log(pattern.global); //true
console.log(pattern.multiline); //false
lastIndex
var str = 'js js js';
var pattern = /js/ig;
console.log(pattern.lastIndex); //0
pattern.test(str);
console.log(pattern.lastIndex); //2
pattern.test(str);
console.log(pattern.lastIndex); //5
pattern.test(str);
console.log(pattern.lastIndex); //8
pattern.test(str);
console.log(pattern.lastIndex); //0
String對象中與正則表達(dá)式相關(guān)的方法
search
查找匹配到的位置,沒有匹配到返回-1,有沒有全局
g都是無所謂的,本來我就是用來查找是否存在的
var str = 'html js';
var pattern = /js/;
console.log(str.search(pattern)); //5
也可以使用字符串,但是如果使用字符串還是會將字符串轉(zhuǎn)為正則
var str = 'html js js';
console.log(str.search('js'));
match
match 在費(fèi)全局的情況下才會返回分組中匹配到的內(nèi)容,全局匹配只能匹配到所有匹配到的字符
exec 無論是否全局匹配都會返回分組中匹配到的內(nèi)容,都只會返回當(dāng)前匹配到的一個(gè)內(nèi)容,而不是全部返回
var str = 'js js js';
var pattern = /js/g;
console.log(str.match(pattern)); //[js,js,js]
var str = '1.js\n2.js\n3.js';
var pattern = /js$/mg; //多行匹配要和全局匹配與(首)尾匹配要聯(lián)合起來使用
console.log(str.match(pattern));
var str = 'html,css,js';
console.log(str.split(',')); //[html,css,js]
split
var str = 'html , css , js';
var pattern = /\s*,\s*/;
console.log(str.split(pattern));
replace
var str = 'i love js js';
var pattern = /js/g;
console.log(str.replace(pattern,'html')); //i love html html
