從今天起開啟對(duì)正則表達(dá)式的學(xué)習(xí)

FreeZinG 發(fā)布于2019-08-23 13:42 / 2916人閱讀

摘要：由于正則表達(dá)式采用了括號(hào)分組，所以在返回匹配結(jié)果的同時(shí)，依次返回該結(jié)果的所有分組兩個(gè)分組，無輸出全局匹配分組時(shí)，和返回結(jié)果不同。

原文鏈接

從今天開始關(guān)于webpack的討論就告一段落了，如果遇到webpack有重大更新，我會(huì)隨時(shí)更新，請(qǐng)對(duì)我保持持續(xù)關(guān)注。
每次遇到與表單驗(yàn)證和校驗(yàn)的相關(guān)問題都會(huì)很難避免的卡住，是時(shí)候攻克一下這個(gè)問題
從今天開始進(jìn)入對(duì)javascript正則表達(dá)式的學(xué)習(xí)

前期準(zhǔn)備

為了本地調(diào)試方便我們先安裝本地服務(wù)器

npm install http-server -g

然后新建一個(gè)html文件
啟動(dòng)服務(wù)

http-server

必備知識(shí)點(diǎn) 創(chuàng)建正則表達(dá)式

javascript正則表達(dá)是的創(chuàng)建有兩種方式

最常見的就這這種，首尾用兩個(gè)斜線/分隔符，例如

var reg = /d/

實(shí)例化

var reg=new RegExp("d");//和上面等價(jià)
var reg=new RegExp(/d/);//等價(jià)

new RegExp("d")，使用字符串創(chuàng)建，一個(gè)反斜線用來轉(zhuǎn)義d==>d,一個(gè)反斜線用來轉(zhuǎn)義另一個(gè)反斜線即==>
當(dāng)然最常用的還是用兩個(gè)反斜線創(chuàng)建正則表達(dá)式
javascript的正則表達(dá)式是RegExp，
RegExp是javascript的內(nèi)置構(gòu)造函數(shù)，即存在protoytpe，可以翻看之前的js原型系列文章查看，我看看下RegExp的原型對(duì)象

console.log(RegExp.prototype)

輸出

我們重點(diǎn)看test()和exec()這個(gè)方法

正則表達(dá)式內(nèi)置方法test()

RegExp.prototype.test(String)是RegExp原型對(duì)象上的內(nèi)置方法，我們可以直接使用，它返回一個(gè)布爾類型的值，是否在參數(shù)String中找到匹配項(xiàng)
并不是要求整個(gè)sring都由表達(dá)式匹配，如果要檢測整個(gè)string有表達(dá)式匹配需要在表達(dá)式兩端添加^和$,
感受一下的

console.log(/w/.test(1)); //=>true
console.log(/d/.test("1")); //=>true
console.log(/d/.test("q1"));    //=>true
console.log(/^d$/.test("q1"));//=>fase

test()中的參數(shù)為string類型，如果不是string類型，會(huì)被轉(zhuǎn)正string類型

console.log(/w/.test(1));//=>true
console.log(/w/.test("1"));//=>true

正則表達(dá)式內(nèi)置方法exec()

提到exec(),就不得不提match(),他們很相似

match是字符串方法，寫法為：str.match(reg)
exec是正則表達(dá)式方法，寫法為：reg.exec(str)

異同

match和exec在匹配成功時(shí)返回的都是數(shù)組，在沒有匹配上時(shí)返回的都是null

var s = "aaa bbb ccc";
var reg = /w+/;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看輸出：是相同的

當(dāng)不使用全局匹配時(shí)，兩者的匹配效果是一樣的，僅返回第一次匹配成功的結(jié)果
繼續(xù)看代碼

var s = "aaa bbb ccc";
var reg = /w+/g;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看輸出：是不同的

繼續(xù)

var s = "aaa bbb ccc";
var reg = /w+/g; //有g(shù)
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:", rs_match1);
console.log("match2:", rs_match1);
console.log("exec1:", rs_exec1);
console.log("exec2:", rs_exec2);
console.log("exec3:", rs_exec3);
console.log("exec4:", rs_exec4);

看輸出

當(dāng)使用全局匹配時(shí)，兩者的匹配結(jié)果出現(xiàn)區(qū)別

全局匹配時(shí)，match會(huì)返回所有匹配上的內(nèi)容；而exec僅匹配單次匹配上的內(nèi)容

全局匹配且進(jìn)行多次匹配時(shí)，exec會(huì)從上次匹配結(jié)束的下一位開始匹配，返回本次匹配上的內(nèi)容，直至無可以匹配的內(nèi)容，返回null

分組
無全局匹配分組時(shí)，match和exec返回結(jié)果相同。由于正則表達(dá)式采用了括號(hào)分組，所以在返回匹配結(jié)果的同時(shí)，依次返回該結(jié)果的所有分組：

var s = "aaa1 bbb2 ccc3";
var reg = /(w+)(d{1})/;//兩個(gè)分組，無g
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);

輸出

　全局匹配分組時(shí)，match和exec返回結(jié)果不同。match會(huì)返回所有匹配到的結(jié)果；而exec會(huì)返回本次匹配到的結(jié)果，若表達(dá)式中出現(xiàn)分組，則會(huì)依次返回本次匹配的全部分組：

var s = "aaa1 bbb2 ccc3";
var reg = /(w+)(d{1})/g;
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);
console.log("exec3:",rs_exec3);
console.log("exec4:",rs_exec4);

基本概念 普通字符

普通字符是正則表達(dá)式的基礎(chǔ)，字符組，就是一組字符，標(biāo)示在同一個(gè)位置可能出現(xiàn)的各種字符，寫法是在[和]之間列出所有可能出現(xiàn)的字符，像[ab]、[1234]、[!@#%]都是字符組

console.log(/moshanghan/.test("moshanghan"));//=>true
console.log(/[abc]/.test("a"));//=>true
console.log(/[abc]/.test("b"));//=>true
console.log(/[0-9]/.test(0));//=>true

元字符

元字符是相對(duì)于普通字符來說的,

GPU云服務(wù)器云服務(wù)器 php郵箱的正則表達(dá) 從現(xiàn)在起正則正則表達(dá)式正則匹配正則表達(dá)式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99428.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

FreeZinG

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Kuai Che Dao：喜提香港運(yùn)營商牌照，美西服務(wù)統(tǒng)統(tǒng)6折！$91/年/2核/2GB內(nèi)存/10G

閱讀 3482·2021-09-02 09:53
數(shù)脈科技：香港華為云專線，月付315元，附簡單測評(píng)

閱讀 1804·2021-08-26 14:13
關(guān)于css margin，你需要知道的一切

閱讀 2766·2019-08-30 15:44
在原生CSS中使用變量

閱讀 1324·2019-08-30 14:03
cml遷移指南(CML Migrate Guide)

閱讀 1974·2019-08-26 13:42
[vuejs 踩坑實(shí)戰(zhàn)系列] 路由場景下父子組件的生命周期順序來個(gè)刨根問底

閱讀 3025·2019-08-26 12:21
html+js(swiper.js)+css左右滑動(dòng)切換頁面效果，適配移動(dòng)端

閱讀 1315·2019-08-26 11:54
webpak最全的簡單入門

閱讀 1909·2019-08-26 10:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

從今天起開啟對(duì)正則表達(dá)式的學(xué)習(xí)

相關(guān)文章

**javascript正則表達(dá)式RegExp再次研究-replace**

我所理解的正則表達(dá)式

我所理解的正則表達(dá)式

深入理解js

60分鐘正則從入門到深入

發(fā)表評(píng)論

0條評(píng)論

FreeZinG

男|高級(jí)講師

TA的文章

Kuai Che Dao：喜提香港運(yùn)營商牌照，美西服務(wù)統(tǒng)統(tǒng)6折！$91/年/2核/2GB內(nèi)存/10G

數(shù)脈科技：香港華為云專線，月付315元，附簡單測評(píng)

關(guān)于css margin，你需要知道的一切

在原生CSS中使用變量

cml遷移指南(CML Migrate Guide)

[vuejs 踩坑實(shí)戰(zhàn)系列] 路由場景下父子組件的生命周期順序來個(gè)刨根問底

html+js(swiper.js)+css左右滑動(dòng)切換頁面效果，適配移動(dòng)端

webpak最全的簡單入門

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

從今天起開啟對(duì)正則表達(dá)式的學(xué)習(xí)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！