正則表達(dá)式的概述

什么是正則表達(dá)式

正則表達(dá)式( Regular Expression ) 是用于匹配字符串中字符組合的模式。在js中，正則表達(dá)式也是對(duì)象！

正則表達(dá)式的作用

• 正則表達(dá)式通常被用來(lái)檢索、替換那些符合某個(gè)模式（規(guī)則）的文本。例如：我們?cè)趯?xiě)登錄注冊(cè)功能的時(shí)候使用的表單驗(yàn)證(對(duì)用戶名、密碼進(jìn)行一些字符或長(zhǎng)度進(jìn)行限制) ===> (匹配)
• 正則表達(dá)式還常用于過(guò)濾掉頁(yè)面內(nèi)容的一些敏感詞匯。例如：我們平常在打游戲時(shí)候的口吐芬芳被換成了***?? ===> (替換)
• 正則表達(dá)式從字符串中獲取我們想要的特定部分。例如：我們?cè)诠涮詫毜臅r(shí)候在搜索框中搜索內(nèi)容，會(huì)彈出很多與搜索相關(guān)的提示內(nèi)容 ===> (提取) etc…

正則表達(dá)式的特點(diǎn)

1. 靈活性、邏輯性和功能性非常的強(qiáng)
2. 可以迅速的用極簡(jiǎn)單的方式達(dá)到字符串的復(fù)雜控制
3. 對(duì)于剛接觸的人來(lái)說(shuō)，比較晦澀難懂(缺點(diǎn))
4. 在實(shí)際開(kāi)發(fā)中一般都是拿來(lái)主義，直接cv調(diào)用??，但是你得懂，這樣的話你可以進(jìn)行簡(jiǎn)單的修改！

正則表達(dá)式在js中的使用

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

在js中可以通過(guò)兩種方式創(chuàng)建正則表達(dá)式

利用 RegExp 對(duì)象來(lái)創(chuàng)建

let regexp = new RegExp(/123/);
    console.log(regexp); //  /123/

利用字面量創(chuàng)建(推薦使用!)

let rg = /123/
    console.log(rg); //  /123/

測(cè)試正則表達(dá)式 test

雖然在上面我們創(chuàng)建了正則表達(dá)式，但是在實(shí)際使用中，是要匹配正則表達(dá)式的，這里的話就引入了test

test() 是正則對(duì)象方法，用于檢測(cè)字符串是否符合該規(guī)則，該對(duì)象會(huì)返回true或false，其參數(shù)是測(cè)試字符串

代碼書(shū)寫(xiě):regexObj.test(str)

1. regexObj 是我們寫(xiě)的正則表達(dá)式

2. str 是我們要測(cè)試的文本

3. 就是檢測(cè)str文本是否符合我們所寫(xiě)的正則表達(dá)式規(guī)范

let rgp = /123/
        console.log(rgp.test(123));  // true

正則表達(dá)式中的特殊字符

正則表達(dá)式的組成

一個(gè)正則表達(dá)式可以由簡(jiǎn)單的字符構(gòu)成，比如/abc/,也可以是簡(jiǎn)單和特殊字符的組合，比如/ab*c/。其中特殊字符也被成為元字符,在正則表達(dá)式中是具有特殊意義的專用字符，如 ^、&、+ 等等。

特殊符號(hào)鏈接直達(dá) ===> ??正則表達(dá)式mdn??

邊界符

正則表達(dá)式中的邊界符用來(lái)提示字符所在的位置，主要有兩個(gè)字符

在上方內(nèi)容中講解創(chuàng)建正則表達(dá)式，如果我們僅僅采取/abc/這種沒(méi)有特殊符號(hào)的方式，會(huì)發(fā)生一些情況：

let rg = /123/
        console.log(rg.test(123));  //true
        console.log(rg.test(11234));  //true

我們可以發(fā)現(xiàn)當(dāng)我們測(cè)試的內(nèi)容只要是符合正則表達(dá)式都會(huì)打印出true，如果我們想設(shè)置以123開(kāi)頭的呢?這就需要我們的特殊符號(hào)了！

let reg = /^abc/
        console.log(reg.test('abc')); //true
        console.log(reg.test('aabce')); //false
        console.log(reg.test('aaabcc')); //false

通過(guò)以上的方式，我們限制了測(cè)試的字符串必須符合以abc開(kāi)頭的規(guī)范，所以下方兩行會(huì)返回false
當(dāng)你需要精確匹配的時(shí)候，你可以通過(guò)控制開(kāi)頭和結(jié)尾實(shí)現(xiàn)

let regs = /^abc$/
        console.log(regs.test('abc')); //true
        console.log(regs.test('abcd')); //false

該代碼表示，測(cè)試的字符串必須是abc，其余的都會(huì)打印false

字符類(lèi)

在實(shí)際開(kāi)發(fā)過(guò)程中，我們不可能要匹配一連串的字符，我們需要的功能是我可以隨意去匹配，只要滿足限制就行，字符類(lèi)就可以解決這個(gè)問(wèn)題。
字符類(lèi)：表示有一系列的字符可以選擇，只要匹配其中一個(gè)就可以了 符號(hào):[]

舉例：let rg = /[abc]/ ,表示只要測(cè)試字符串滿足 包含a 或 包含b 或 包含c 就返回true

我們可以加上特殊字符：let reg = /^[abc]$/,表示，你的測(cè)試字符串只能是a 或者 b 或者c！

如果你想匹配一個(gè)范圍內(nèi)的字符串可以使用特殊符號(hào)[-]

舉例 ： let reg = /^[A-z]$/,表示26個(gè)英語(yǔ)字母任何一個(gè)字母(大小寫(xiě)均可)，都會(huì)返回true，但是只能是其中的一個(gè)！

• 字符組合
  我們可以設(shè)置更有靈活性的正則表達(dá)式let rg = /^[A-z0-9_-]$/,表示26個(gè)英語(yǔ)字符、個(gè)位數(shù)字、兩個(gè)符號(hào)任意一個(gè)都會(huì)打印true
• 字符類(lèi)中的^符號(hào)
  我們知道^符號(hào)在外部表示從誰(shuí)開(kāi)始的意思，但是一旦它也出現(xiàn)在字符類(lèi)[]中，則表示取反的意思！
  舉例:let rg = /^[^A-z0-9_-]$/,第一個(gè)^表示從誰(shuí)開(kāi)始，第二個(gè)^表示對(duì)這個(gè)正則規(guī)范取反操作，如：不能是26個(gè)字母中的任意一個(gè) etc…

量詞符

量詞符顧名思義就是與數(shù)量有關(guān)，這時(shí)你就要想一想它跟字符類(lèi)的結(jié)合使用咯！量詞符用來(lái)設(shè)定某個(gè)模式出現(xiàn)的次數(shù)

量詞說(shuō)明*重復(fù)零次或多次+重復(fù)一次或更多次?重復(fù)零次或一次{n}重復(fù)n次，n 是一個(gè)正整數(shù)，匹配了前面一個(gè)字符剛好出現(xiàn)了 n 次。{n,}重復(fù)n次或更多次，n 是一個(gè)正整數(shù)，匹配前一個(gè)字符至少出現(xiàn)了 n 次。{n,m}重復(fù)n到m次，如果 n 或者 m 的值是 0， 這個(gè)值被忽略。

*的使用

*相當(dāng)于 >=0，可以出現(xiàn)0次或者很多次

let rg = /^a*$/，表示，a可以出現(xiàn)0次或者多次

let rg = /^a*$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

+的使用

相當(dāng)于 >=1 可以出現(xiàn)一次或多次

let rg = /^a+$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

?的使用

相當(dāng)于1 || 0

let rg = /^a?$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //false

{n}的使用(重點(diǎn)掌握)

let rg = /^a{3}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true

在這里表示字符串a重復(fù)了三次

{n,}的使用(重點(diǎn)掌握)

let rg = /^a{3,}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true
        console.log(rg.test('aaaaa')); //true

在這里表示字符串a必須要重復(fù)三次以及以上，否則打印false

{n,m}的使用(重點(diǎn)掌握)

let rg = /^a{3,16}$/;
    console.log(rg.test('')); //false
    console.log(rg.test('aaa')); //true
    console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa')); //false

在這里表示字符串a重復(fù)的區(qū)間是大于等于3 并且 小于等于16

結(jié)合某個(gè)模式應(yīng)用

let reg = /^[A-z0-9_-]{3,16}$/
        console.log(reg.test('1018703239')); // true
        console.log(reg.test('101a24543_q')); //true

這個(gè)正則表達(dá)式其實(shí)就可以用來(lái)寫(xiě)用戶名的表單驗(yàn)證了！

括號(hào)總結(jié)

• 大括號(hào){} : 是 量詞符 ，表示重復(fù)的次數(shù)
• 中括號(hào)[] : 是 字符集合, 表示匹配方括號(hào)中的任意字符
• 小括號(hào)() : 表示優(yōu)先級(jí)！

預(yù)定義類(lèi)

預(yù)定義類(lèi)指的是某些常見(jiàn)模式的簡(jiǎn)寫(xiě)方式。(簡(jiǎn)化之前的寫(xiě)法！)

舉例:

我們?cè)谶@里做一個(gè)需求，驗(yàn)證座機(jī)號(hào)碼,座機(jī)號(hào)碼有兩種形式 010-12345678 或者 0530-1234567.

（注 ： 正則表達(dá)式中的或者符號(hào)為 ： |）

let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        console.log(reg.test('010-12345678')); //true
        console.log(reg.test('0500-1234567')); //true

正則表達(dá)式的替換

1.replace替換

replace()方法可以實(shí)現(xiàn)替換字符串操作，用來(lái)替換的參數(shù)可以是一個(gè)字符串也可以是一個(gè)正則表達(dá)式

寫(xiě)法：
stringObj.replace(regexp/substr,replacement)

• 第一個(gè)參數(shù) ： 被替換的字符串或正則表達(dá)式
• 第二個(gè)參數(shù) : 替換為的字符串
• 返回值是一個(gè)替換完畢的新字符串

2.正則表達(dá)式參數(shù)

/表達(dá)式/[switch]
switch(也稱為修飾符)按照什么模式來(lái)匹配，有三種常用的值：
g : 全局匹配
i : 忽略大小寫(xiě)
g + i : 全局匹配 + 忽略大小寫(xiě)

案例:

<body>
<textarea cols="30" rows="10" class="one"></textarea>
<div class="t"></div>
<script>
    let text = document.querySelector('.one')
    let ts = document.querySelector('.t')
    text.onblur = function () {
        ts.innerHTML = text.value.replace(/星星幣|牛哇/g, '**')
    }
</script>

在這里就可以看到正則整體替換的效果了！

開(kāi)發(fā)中常用正則表達(dá)式

• Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
• 手機(jī)號(hào)碼：^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
• 國(guó)內(nèi)座機(jī)電話號(hào)碼(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
• 身份證號(hào)(15位、18位數(shù)字)，最后一位是校驗(yàn)位，可能為數(shù)字或字符X：(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)
• 帳號(hào)是否合法(字母開(kāi)頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)：1[a-zA-Z0-9_]{4,15}$
• 密碼(以字母開(kāi)頭，長(zhǎng)度在6~18之間，只能包含字母、數(shù)字和下劃線)：2\w{5,17}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 騰訊QQ號(hào)：[1-9][0-9]{4,} (騰訊QQ號(hào)從10000開(kāi)始)

^小結(jié)

前端的學(xué)習(xí)開(kāi)發(fā)過(guò)程中正則表達(dá)式是必須要掌握的，在開(kāi)發(fā)中登錄注冊(cè)，以及敏感詞匯的替換都需要正則表達(dá)式的作用，正則表達(dá)式上手非常的容易，在這篇文章中更多的去解析正則表達(dá)式文檔的api，api有更加詳細(xì)的大家可以認(rèn)真去看一下，這篇文章可以讓你解決絕大多數(shù)正則表達(dá)式的問(wèn)題！

到此這篇關(guān)于徹底搞懂JavaScript正則表達(dá)式的文章就介紹到這了,更多相關(guān)js正則表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！