摘要：正則表達(dá)式作為前端學(xué)習(xí)的一個(gè)知識(shí)點(diǎn)，是每個(gè)合格的前端開(kāi)發(fā)都應(yīng)該掌握它的用法。元字符一般情況下，正則表達(dá)式的一個(gè)字符對(duì)應(yīng)字符串的一個(gè)字符。

正則表達(dá)式作為前端學(xué)習(xí)的一個(gè)知識(shí)點(diǎn)，是每個(gè)合格的前端開(kāi)發(fā)都應(yīng)該掌握它的用法。正則表達(dá)式的學(xué)習(xí)確實(shí)不難，語(yǔ)法和應(yīng)用也非常簡(jiǎn)單，能夠快速入門(mén)，很輕松的就能寫(xiě)出簡(jiǎn)單的表達(dá)式來(lái)對(duì)字符串執(zhí)行某些操作。網(wǎng)上也有標(biāo)題黨說(shuō)一杯咖啡的時(shí)間就能學(xué)會(huì)。能學(xué)會(huì)嗎？能！但要真正的掌握卻不易，就好比籃球運(yùn)動(dòng)，40分鐘的一節(jié)課，就能學(xué)會(huì)基本的規(guī)則和投球方法，但要做到非常優(yōu)秀，就需要長(zhǎng)時(shí)間的練習(xí)，學(xué)習(xí)正則表達(dá)式也一樣，其實(shí)，學(xué)習(xí)任何知識(shí)和技能都是如此，唯有長(zhǎng)時(shí)間的練習(xí)，盡量避免少犯錯(cuò)誤，才能達(dá)到專(zhuān)業(yè)；廢話說(shuō)了一籮筐，下面進(jìn)入正題；

在實(shí)際工作當(dāng)中，正則表達(dá)式應(yīng)用的場(chǎng)景有：

表單驗(yàn)證

驗(yàn)證郵箱

驗(yàn)證電話

是否為空

etc

替換字符串

檢索字符串

開(kāi)發(fā)工具當(dāng)中的查找和替換

簡(jiǎn)單來(lái)說(shuō)，正則表達(dá)式是對(duì)字符串操作的一種邏輯公式，用一些約定好的字符組合對(duì)字符串執(zhí)行檢索、匹配、替換等操作。

本文會(huì)把學(xué)習(xí)路徑分為兩個(gè)階段：

第一階段，熟悉正則，有一個(gè)正確的認(rèn)識(shí)，能夠?qū)懗龊?jiǎn)單的正則表達(dá)式來(lái)操作字符串；

第二階段，熟練運(yùn)用正則的一些高級(jí)用法，掌握心法，需要時(shí)，信手拈來(lái)。

需要掌握的內(nèi)容包括：

如何定義一個(gè)正則表達(dá)式

定義了正則，在那些方法中使用

元字符

字符類(lèi)&字符轉(zhuǎn)義

范圍&量詞

分支條件

反義

有兩種方式：

通過(guò)實(shí)例化RegExp構(gòu)造函數(shù)

有兩個(gè)參數(shù)，第一個(gè)是表達(dá)式，第二個(gè)是修飾符

使用字面量把正則寫(xiě)在兩個(gè)反斜杠中間

反斜杠中間是表達(dá)式，修飾符緊跟在最后一個(gè)/后面

DEMO

// 實(shí)例化RegExp類(lèi)定義
const reg = new RegExp("d","g");

// 字面量//定義
const reg = /d/g;

let str = "mmcai18is94a99boy";
let result = str.replace(reg," ")

console.log(str)
// 結(jié)果：mmcai18is94a99boy
console.log(result)
// 結(jié)果：mmcai is a body

// 字符串的replace方法不會(huì)修改原字符串，會(huì)返回一個(gè)新的字符串

修飾符

g：全文搜索，匹配到第一個(gè)就結(jié)束

i：忽略大小寫(xiě)

m：多行搜索

對(duì)象屬性

global：對(duì)象是否具有標(biāo)志g；結(jié)果是布爾值

ignoreCase：對(duì)象是否具有標(biāo)志i；結(jié)果是布爾值

lastIndex：一個(gè)整數(shù)，標(biāo)識(shí)開(kāi)始下一次匹配的字符位置；結(jié)果是數(shù)字

multiline：對(duì)象是否具有標(biāo)志m；結(jié)果是布爾值

source：正則表達(dá)式的源文本；結(jié)果是字符串

let patt = /[a-z]d/gim;

patt.global = true;
patt.ignoreCase = true;
patt.multiline = true;
patt.source = "[a-z]d"

其實(shí)這里想要表達(dá)的是正則表達(dá)式可以在那些方法上使用；

應(yīng)用場(chǎng)景可以分為兩種情況

正則對(duì)象本身具有的一些方法

test：檢索字符串中指定的值。返回true或false

exec：檢索字符串中指定的值。找到返回?cái)?shù)組，否則返回null

compile：改變正則表達(dá)式，不常用

一些字符串操作方法當(dāng)中

String.replace：替換與正則表達(dá)式匹配的字符串

String.search：檢索與正則表達(dá)式相匹配的值

String.split：把字符串分割為字符串?dāng)?shù)組

String.match：找到一個(gè)或多個(gè)正則表達(dá)式的匹配

DEMO

// test 判斷字符串是否符合我們定義的規(guī)則
// 表單驗(yàn)證的時(shí)候，可以使用test驗(yàn)證：手機(jī)號(hào)，郵箱，身份證號(hào)碼，銀行卡等數(shù)據(jù)是否合法
let patt = /1[35789]d{9}/;
let str = "13588322792"
let flag = patt.test(str);
console.log(flag);

// exec 當(dāng)沒(méi)有全局修飾符的時(shí)候，函數(shù)的作用和match函數(shù)一樣，如果匹配到返回一個(gè)數(shù)組，否則返回null
// 把以下代碼放入編輯器，查看結(jié)果
var str="I love antzone ,this is animate";
var reg=/[a-z]{2}/;
var result = reg.exec(str);
console.log(result);

// result數(shù)組有至少兩個(gè)值，外加兩個(gè)屬性input和index
- result[0]:匹配的字符串
- result[1]：存放第一個(gè)分組匹配的值，否則為undefined
- result[2]：存放第二個(gè)分組匹配的值，否則沒(méi)有改項(xiàng)
- result[n]：存放第n個(gè)分組匹配的值，否則沒(méi)有該項(xiàng)
result.index = 匹配字符串的索引
result.input = 要匹配字符串完整的引用


// exec 有全局修飾符g的時(shí)候，此函數(shù)返回值同樣是一個(gè)數(shù)組，并且也只能夠在字符串中匹配一次。不過(guò)此時(shí)，此函數(shù)一般會(huì)和lastIndex屬性匹配使用，此函數(shù)會(huì)在lastIndex屬性指定的字符處開(kāi)始檢索字符串，當(dāng)exec()找到與表達(dá)式相匹配的字符串時(shí)，在匹配后，它將lastIndex 屬性設(shè)置為匹配字符串的最后一個(gè)字符的下一個(gè)位置?？梢酝ㄟ^(guò)反復(fù)調(diào)用exec()函數(shù)遍歷字符串中的所有匹配，當(dāng)exec()函數(shù)再也找不到匹配的文本時(shí)，它將返回null，并把lastIndex 屬性重置為0。
數(shù)組的內(nèi)容結(jié)構(gòu)和沒(méi)有g(shù)修飾符時(shí)完全相同。

var str="the name 123 and 456";
var reg=/d/g;
reg.lastIndex=15;
console.log(reg.exec(str));

String.search

search不執(zhí)行全局匹配，會(huì)忽略修飾符g。

如果匹配到，返回匹配值所在的索引，否則返回-1

var str="Visit W3School!"
var r = str.search(/w3school/);
console.log(r);

String.replace

返回一個(gè)新的字符串，是替換后得到的新值。

replace有兩個(gè)參數(shù)：

第一個(gè)可以是字符串，也可以是正則表達(dá)式

第二個(gè)可以是字符串，也可是function

如果第二個(gè)是字符串，字符串中的$字符有特定的含義

1.簡(jiǎn)單用法
var str="Visit Microsoft!"
var res = str.replace(/Microsoft/, "W3School");
console.log(res);

2.修飾符g,全局匹配
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."

var res = str.replace(/Microsoft/g, "W3School");
console.log(res);

3.修飾符i,忽略大小寫(xiě)
var text = "javascript Tutorial";
var res = text.replace(/javascript/i, "JavaScript");
console.log(res)

4.字符中的$
var name = "Doe, John";
var res =  name.replace(/(w+)s*, s*(w+)/, "$2 $1");
console.log(res)

5.
var name = ""a", "b"";
var res = name.replace(/"([^"]*)"/g, ""$1"");

6.第二個(gè)參數(shù)是函數(shù)
var name = "aaa bbb ccc";
var uw=name.replace(/w+/g, function(word){
  return word.substring(0,1).toUpperCase()+word.substring(1);}
);

String.match

匹配到就返回一個(gè)數(shù)組，數(shù)組結(jié)構(gòu)參考上面的exec方法，否則返回null

var str="Hello world!"
var res1 = str.match("world");
var res2 = str.match("World");
console.log(res1);
console.log(res2);


var str="1 plus 2 equal 3"
var res3 = str.match(/d+/g);
console.log(res3);

String.split

把字符串分割成字符串?dāng)?shù)組。

返回一個(gè)字符串?dāng)?shù)組。

1.
var str="How are you doing today?"
var res1 = str.split(" ");
var res2 = str.split("");
var res3 = str.split(" ",3);

2.
var words = str.split(/s+/)

3.
"hello".split("")

一般情況下，正則表達(dá)式的一個(gè)字符對(duì)應(yīng)字符串的一個(gè)字符。
如果我們想要匹配一類(lèi)的字符的時(shí)候，就可以通過(guò)元字符來(lái)處理，常用的元字符有：

DEMO

1.匹配前后都是空格的字符串
let reg = /w+/g;
let str = "my name is mmcai";
str.replace(reg,"xx");

2.修改時(shí)間格式2019 07 18為2019/07/18
let reg = /s/g;
let str = "2019 07 18";
str.replace(reg,"-");

3.匹配不是特殊符號(hào)的字符串
var str="Give 100%!";
var patt1=/w/g;

4.匹配以Is開(kāi)頭的字符串
var str="Is this his";
var patt1=/^Is/g;

5.對(duì)數(shù)字進(jìn)行全局搜索
var str="Give 100%!";
var patt1=/d/g;

6.對(duì)字符串結(jié)尾是is的進(jìn)行匹配
var str="Is this his";
var patt1=/is$/g;

要想查找數(shù)字，字母或數(shù)字，空白我們可以根據(jù)上面一節(jié)提到的元字符來(lái)匹配。但是如果想匹配的字符集合沒(méi)有預(yù)定義的元字符集合，怎么辦？這時(shí)候我們就可以通過(guò)定義字符類(lèi)類(lèi)的形式進(jìn)行匹配。

例如

[.?!]——匹配表單符號(hào)（.或?或!)
[abc]——匹配字符a或b或c
[aeiou]——匹配任何一個(gè)英文元音字母

除了以上方式，我們還可以通過(guò)-來(lái)指定一個(gè)字符范圍。

例如

[0-9]——匹配0到9的任意數(shù)字，含義和 d 元字符一樣
[a-zA-Z]——匹配26個(gè)英文字符，大小寫(xiě)都行

特點(diǎn)

使用元字符[]來(lái)構(gòu)建一個(gè)簡(jiǎn)單的類(lèi)

使用-字符定義一個(gè)字符范圍

所謂類(lèi)就是符合某些特性的對(duì)象，一個(gè)泛指，不是指某個(gè)字符

DEMO

1.匹配開(kāi)頭是a或b或c緊跟一個(gè)數(shù)字的字符
var reg =/[abc]d/g;
var str = "a1b2c3d4";
str.replace(reg,"-");
// result = "---d4";

2.匹配a到h之間的字符
var str="Is this all there is?";
var patt1=/[a-h]/g;

字符轉(zhuǎn)義理解起來(lái)相對(duì)簡(jiǎn)單，所謂的轉(zhuǎn)義其實(shí)是轉(zhuǎn)義我們的元字符，有時(shí)候我們需要匹配那些元字符本身的字符串，
就可以通過(guò)在元字符前面添加來(lái)進(jìn)行轉(zhuǎn)義；

例如下面一些例子：

// 匹配元字符.
let reg = /./;

// 匹配元字符/
let reg = ///

//匹配元字符*
let reg = /*/

//匹配字符類(lèi)的[]
let reg = /[]/

// 匹配本身
let reg = //;

就是表示匹配的數(shù)量，我們可以通過(guò)一些限定符類(lèi)指定匹配重復(fù)的數(shù)量

| 重復(fù)0次或更多次

| 重復(fù)一次或更多次

? | 重復(fù)0次或一次
{n} | 重復(fù)n次
{n,} | 重復(fù)n次或更多次
{n,m} | 重復(fù)n到m次

DEMO

// 匹配window后面跟1個(gè)或多個(gè)數(shù)字的字符
let reg = /windowd+/;

// 匹配字符的第一個(gè)單詞
let reg = /^w+/

//匹配時(shí)間格式為YYYY-MM-DD的字符串
let reg = /d{4}(-d{2}){2}$/;
let str = "2019-07-18";

//為了 避免匹配到"2019-07-1234124"這樣的字符串，添加$結(jié)尾符號(hào)
reg.test(str)

有時(shí)候我們匹配的時(shí)候，規(guī)則不是單一的，可能有多個(gè)規(guī)則，我們就可以通過(guò)分支條件來(lái)實(shí)現(xiàn)。

比如，我們想要匹配固定電話，有些是三位區(qū)號(hào)，八位本地號(hào)，有些是四位區(qū)號(hào)，7位本地號(hào)，我們就可以如下寫(xiě):

let reg = /0d{2}-d{8}|0d{3}-d{7}/

DEMO

1. 匹配IP
let reg = /^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)/
let str = "192.168.0.253";
reg.test(str);

// 必須添加^，否則會(huì)匹配315.168.0.254這樣的字段中的15.168.0.254這一段

反義就是取相反，例如d是匹配數(shù)字，D就是匹配不是數(shù)字的字符，s匹配空白符字符，S匹配不是空白符的字符。
在字符類(lèi)中我們也可以使用^表示反義，¹匹配除abc以外的字符，常見(jiàn)的反義代碼如下：

DEMO

參考匹配IP地址里面，是如何匹配.這個(gè)元字符的