期回顧

「JavaScript 從入門(mén)到精通」1.語(yǔ)法和數(shù)據(jù)類(lèi)型

「JavaScript 從入門(mén)到精通」2.流程控制和錯(cuò)誤處理

「JavaScript 從入門(mén)到精通」3.循環(huán)和迭代

「JavaScript 從入門(mén)到精通」4.函數(shù)

「JavaScript 從入門(mén)到精通」5.表達(dá)式和運(yùn)算符

「JavaScript 從入門(mén)到精通」6.數(shù)字

「JavaScript 從入門(mén)到精通」7.時(shí)間對(duì)象

前置知識(shí)：

JS中的正則表達(dá)式是用來(lái)匹配字符串中指定字符組合的模式。

另外需要記住：正則表達(dá)式也是對(duì)象。

1.創(chuàng)建正則表達(dá)式

• 使用一個(gè)正則表達(dá)式字面量：

• 使用RegExp對(duì)象：
• new RegExp(str[, attr])接收2個(gè)參數(shù)，str是一個(gè)字符串，指定正則表達(dá)式匹配規(guī)則，attr可選，表示匹配模式，值有g(shù)(全局匹配),i(區(qū)分大小寫(xiě)的匹配)和m(多行匹配)。

正則表達(dá)式的返回值，是一個(gè)新的RegExp對(duì)象，具有指定的模式和標(biāo)志。

返回信息介紹：

關(guān)于正則表達(dá)式的一些方法屬性，文章后面介紹，這里先復(fù)習(xí)定義和使用。

2.使用正則表達(dá)式

JS的正則表達(dá)式可以被用于：

• RegExp對(duì)象的exec和test方法；
• String對(duì)象的match、replace、search和split方法。

2.1 RegExp對(duì)象方法

• 2.1.1 exec(str)

str: 需要檢索的字符串。

若檢索成功，返回匹配的數(shù)組，否則返回null。

返回信息介紹：

• 2.1.2 test(str)

str:需要檢索的字符串。

若匹配成功返回true否則false。

等價(jià)于 reg.exec(str) !=null。

^str表示匹配以str開(kāi)頭的字符串，這些符號(hào)文章后面會(huì)介紹。

2.2 String對(duì)象方法

• 2.2.1 search

str.search(reg)：

str:被檢索的源字符串。

reg:可以是需要檢索的字符串，也可以是需要檢索的RegExp對(duì)象，可以添加標(biāo)志，如i。

若檢索成功，返回第一個(gè)與RegExp對(duì)象匹配的字符串的起始位置，否則返回-1。

• 2.2.2 match

str.match(reg)：

str:被檢索的源字符串。

reg:可以是需要檢索的字符串，也可以是需要檢索的RegExp對(duì)象，可以添加標(biāo)志，如i。

若檢索成功，返回與reg匹配的所有結(jié)果的一個(gè)數(shù)組，數(shù)組的第一項(xiàng)是進(jìn)行匹配完整的字符串，之后的項(xiàng)是用圓括號(hào)捕獲的結(jié)果，否則返回null。

'see Chapter 3.4.5.1' 是整個(gè)匹配。

'Chapter 3.4.5.1' 被'(chapter \d+(\.\d)*)'捕獲。

'.1' 是被'(\.\d)'捕獲的最后一個(gè)值。

'index' 屬性(22)是整個(gè)匹配從零開(kāi)始的索引。

'input' 屬性是被解析的原始字符串。

• 2.2.3 replace

將字符串中指定字符替換成其他字符，或替換成一個(gè)與正則表達(dá)式匹配的字符串。

str.replace(sub/reg,val):

• str: 源字符串
• sub: 使用字符串來(lái)檢索被替換的文本
• reg: 使用RegExp對(duì)象來(lái)檢索來(lái)檢索被替換的文本
• val: 指定替換文本
• 返回替換成功之后的字符串，不改變?cè)醋址畠?nèi)容。

val可以使用特殊變量名：

• 2.2.4 split

將一個(gè)字符串，按照指定符號(hào)分割成一個(gè)字符串?dāng)?shù)組。

str.split(sub[, maxlength]):

• str: 源字符串
• sub: 指定的分割符號(hào)或正則
• maxlength: 源字符串

2.3 使用情況

• 當(dāng)我們想要查找一個(gè)字符串中的一個(gè)匹配是否找到，可以用test或search方法。
• 當(dāng)我們想要得到匹配的更多信息，我們就需要用到exec或match方法。

3.正則表達(dá)式符號(hào)介紹

詳細(xì)的每個(gè)符號(hào)的用法，可以查閱 W3school JavaScript RegExp 對(duì)象

3.1 修飾符

修飾符描述i執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。g執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止）。m執(zhí)行多行匹配。

3.2 方括號(hào)

用于查找指定返回之內(nèi)的字符：

.3 元字符

元字符是擁有特殊含義的字符：

3.4 量詞

4. 正則表達(dá)式拓展（ES6）

4.1 介紹

在ES5中有兩種情況。

• 參數(shù)是字符串，則第二個(gè)參數(shù)為正則表達(dá)式的修飾符。

• 參數(shù)是正則表達(dá)式，返回一個(gè)原表達(dá)式的拷貝，且不能有第二個(gè)參數(shù)，否則報(bào)錯(cuò)。

ES6中使用：

第一個(gè)參數(shù)是正則對(duì)象，第二個(gè)是指定修飾符，如果第一個(gè)參數(shù)已經(jīng)有修飾符，則會(huì)被第二個(gè)參數(shù)覆蓋。

new RegExp(/abc/ig, 'i');

4.2 字符串的正則方法

常用的四種方法：match()、replace()、search()和split()。

4.3 u修飾符

添加u修飾符，是為了處理大于uFFFF的Unicode字符，即正確處理四個(gè)字節(jié)的UTF-16編碼。

/^\uD83D/u.test('\uD83D\uDC2A'); // false
/^\uD83D/.test('\uD83D\uDC2A'); // true

由于ES5之前不支持四個(gè)字節(jié)UTF-16編碼，會(huì)識(shí)別為兩個(gè)字符，導(dǎo)致第二行輸出true，加入u修飾符后ES6就會(huì)識(shí)別為一個(gè)字符，所以輸出false。

注意：

加上u修飾符后，會(huì)改變下面正則表達(dá)式的行為：

• (1)點(diǎn)字符 點(diǎn)字符(.)在正則中表示除了換行符以外的任意單個(gè)字符。對(duì)于碼點(diǎn)大于0xFFFF的Unicode字符，點(diǎn)字符不能識(shí)別，必須加上u修飾符。

var a="";
/^.$/.test(a); // false
/^.$/u.test(a); // true

• (2)Unicode字符表示法 使用ES6新增的大括號(hào)表示Unicode字符時(shí)，必須在表達(dá)式添加u修飾符，才能識(shí)別大括號(hào)。

/\u{61}/.test('a'); // false
/\u{61}/u.test('a'); // true
/\u{20BB7}/u.test(''); // true

• (3)量詞 使用u修飾符后，所有量詞都會(huì)正確識(shí)別碼點(diǎn)大于0xFFFF的 Unicode 字符。

/a{2}/.test('aa'); // true
/a{2}/u.test('aa'); // true
/{2}/.test(''); // false
/{2}/u.test(''); // true

• (4)i修飾符 不加u修飾符，就無(wú)法識(shí)別非規(guī)范的K字符。

/[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true

檢查是否設(shè)置u修飾符： 使用unicode屬性。

const a=/hello/;
const b=/hello/u;
a.unicode // false
b.unicode // true

4.4 y修飾符

y修飾符與g修飾符類(lèi)似，也是全局匹配，后一次匹配都是從上一次匹配成功的下一個(gè)位置開(kāi)始。區(qū)別在于，g修飾符只要剩余位置中存在匹配即可，而y修飾符是必須從剩余第一個(gè)開(kāi)始。

lastIndex屬性: 指定匹配的開(kāi)始位置：

返回多個(gè)匹配：

一個(gè)y修飾符對(duì)match方法只能返回第一個(gè)匹配，與g修飾符搭配能返回所有匹配。

'a1a2a3'.match(/a\d/y); // ["a1"]
'a1a2a3'.match(/a\d/gy); // ["a1", "a2", "a3"]

檢查是否使用y修飾符：

使用sticky屬性檢查。

const a=/hello\d/y;
a.sticky; // true

4.5 flags屬性

flags屬性返回所有正則表達(dá)式的修飾符。

/abc/ig.flags; // 'gi'

5. 正則表達(dá)式拓展（ES9）

在正則表達(dá)式中，點(diǎn)(.)可以表示任意單個(gè)字符，除了兩個(gè)：用u修飾符解決四個(gè)字節(jié)的UTF-16字符，另一個(gè)是行終止符。

終止符即表示一行的結(jié)束，如下四個(gè)字符屬于“行終止符”：

• U+000A 換行符（\n）
• U+000D 回車(chē)符（\r）
• U+2028 行分隔符（line separator）
• U+2029 段分隔符（paragraph separator）

/foo.bar/.test('foo\nbar')
// false

上面代碼中，因?yàn)?不匹配\n，所以正則表達(dá)式返回false。

換個(gè)醒，可以匹配任意單個(gè)字符：

/foo[^]bar/.test('foo\nbar')
// true

ES9引入s修飾符，使得.可以匹配任意單個(gè)字符：

/foo.bar/s.test('foo\nbar') // true

這被稱(chēng)為dotAll模式，即點(diǎn)（dot）代表一切字符。所以，正則表達(dá)式還引入了一個(gè)dotAll屬性，返回一個(gè)布爾值，表示該正則表達(dá)式是否處在dotAll模式。

const re=/foo.bar/s;
// 另一種寫(xiě)法
// const re=new RegExp('foo.bar', 's');
re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'

/s修飾符和多行修飾符/m不沖突，兩者一起使用的情況下，.匹配所有字符，而^和$匹配每一行的行首和行尾。

公眾號(hào)：前端自習(xí)課

則表達(dá)式在js中有很多用途，最常見(jiàn)的是在表單驗(yàn)證中，驗(yàn)證一些字符串是否符合要求，如email、手機(jī)號(hào)等等，學(xué)好正則對(duì)于前端工程師來(lái)說(shuō)是一個(gè)不錯(cuò)的輔助技能。

圖片來(lái)自網(wǎng)絡(luò)

一、特殊字符

1、$

正則的結(jié)尾符號(hào)

2、^

開(kāi)始符號(hào)

3、（）

標(biāo)記一個(gè)子表達(dá)式的開(kāi)始和結(jié)束位置

4、[]

匹配括號(hào)中任意一個(gè)； 例：

結(jié)果就是true

5、{}

括號(hào)里是匹配幾個(gè)，一般用來(lái)限制位數(shù)；例：

匹配位數(shù)是4~7位，7個(gè)a返回true，8個(gè)就false；

有三種用法：

{3}：表示匹配三位；

{3，}：表示匹配三位及以上；

{3,7}：表示匹配3到7位

6、*

表示匹配0次或多次；相當(dāng)于{0，}

7、？

表示要匹配的是0或1位；

8、+

表示匹配前面的字符串一次或多次

9、.

匹配任意字符

10、|

“或”：不解釋

11、\w

字母、數(shù)字、下劃線

12、\W

非字母、數(shù)字、下劃線

13、\d

數(shù)字，等價(jià)于[0-9]

14、\D

非數(shù)字，等價(jià)于[^0-9]

15、\s

匹配空格

二、js方法

1、match方法：

挑選相匹配的內(nèi)容：例：

結(jié)果是“1，2，3”

2.test方法：

返回一個(gè)布爾值，表示是否匹配

上述結(jié)果是“true”

3、replace方法：

用于將匹配正則的字符串進(jìn)行替換，例：

前面//里面是被替換的內(nèi)容，后面加的字符串是要替換的內(nèi)容。

例：var path=req.url.replace(/\/?(?:\?.*)?$/,'').toLowerCase();

獲取“/”后邊的路徑。