帶你入門(幾個(gè)小小點(diǎn))
目錄
- 正則表達(dá)式的使用
- 正則表達(dá)式的基本構(gòu)成元素
- 正則中的類(分類),基本的元字符 + 五個(gè)基本類,構(gòu)成正則的各種變化
- 正則表達(dá)式的分組 和 匹配出來的變量引用
- 正則的匹配原理 和 應(yīng)用
正則表達(dá)式中不能正常顯示(不能正常使用)的字符基本都可以使用轉(zhuǎn)義來解決
$1 表示分組的第一個(gè)字符
\$1 表示一個(gè) `$1` 字符
正則表達(dá)式可以快速處理基本字符,文本,網(wǎng)址,郵箱,日期等數(shù)據(jù)
-
日期的使用
^(\d{4})[/-](\d{2})[/-](\d{2})$ // 請(qǐng)?jiān)嚪g該正則表達(dá)式 2006/02/03 test/07/sd 1998-03-07 12345/23/1998

-
http 協(xié)議的使用
http:\/\/(.+\.jpg) // 請(qǐng)?jiān)嚪g該正則表達(dá)式

-
一些常用的正則含義
\d -> digit \b -> word boundary \w -> word $ -> End of line ^ -> Start of line [0-9] -> One of: '0' - '9' [/-] -> One of: '/' '-' (\w) -> group #1 word g -> global i -> ignore case
1.小葵花媽媽課堂正式開課啦. 哈哈,上面的你要是不熟悉就當(dāng)我是在裝逼格高啦!
-
兩種實(shí)例化RegExp對(duì)象的方法 (先來看看 regExp 哥哥長(zhǎng)什么1樣子)
小時(shí)候是這樣(長(zhǎng)得中規(guī)中矩)
var reg = new RegExp("正則表達(dá)式",修飾符); // 修飾符是啥?后面聊長(zhǎng)大了長(zhǎng)這樣(這 TM 長(zhǎng)的就很隨意啦)
var reg = /正則表達(dá)式/修飾符像上面這樣寫就可以生成一個(gè) 正則對(duì)象啦
-
聊聊修飾符 (長(zhǎng)相很隨意,發(fā)型來幫忙)
g (global): 全文搜索,不添加g,搜索到第一個(gè)匹配停止; i (ignore case) : 忽略大小寫,不添加則默認(rèn)為大小寫敏感; m ( multiple lines):多行搜索 g i m 可以一起使用 -
元字符(就像信息有一元分詞,二元分詞等)。就是作為正則表達(dá)式的
基本構(gòu)成體注意:這里的元字符是一個(gè)整體并不是簡(jiǎn)單的一個(gè)字符 a,b,c .... 表示一個(gè)個(gè)元字符 \t, \v, \n ... 也表示一個(gè)個(gè)元字符 $1, $2 ... 也表示一個(gè)個(gè)元字符作為基本字符的元字符(不解釋。。。)
-
特殊字符作為元字符
基本構(gòu)成體,既然是體,肯定有線條,有孤獨(dú),有凹有凸。。。。下面你看到的這些都是元字符 $ ^ | . + ? [] {} () \t 水平制表符 \n 換行符 ......特殊字符我們暫且
叫 她 元字體
2. 正則也是有族譜的,看看正則相關(guān)的分類
-
元字符
元字符每個(gè)就代表一個(gè)意思,表示取到這個(gè)字符的意思(元字體每個(gè)也都是單獨(dú)的意思)
-
字符類 (何為字符類,就是將 字符拼在一塊組成一類嘛。物以類聚,人以群分)
-
構(gòu)成類, 使用 [] 將某些字符構(gòu)成一類
表示或的意思[abc] a 或者 b 或者 c [0123456789] 0 或者 1 或者 2 ...等我吐完這口老血一定說到 9明白了沒?構(gòu)成類表示或者意思
char.png -
字符類取反, ^ 表示取反的意思
[^abc] //不是 a,也不是 b, 也不是 c.. [^0123456789] // 小明你來念取反表示取這些之外字符。
NoneOf.png -
-
范圍類 0-9, a,-z, 12-15 就表示一個(gè)范圍呀
表示這個(gè)范圍內(nèi)或的意思范圍類需要結(jié)合字符類一起使用,表示這個(gè)范圍里的或者
范圍類是個(gè)閉區(qū)間
直接上栗子 [0123456789] // 原來你這樣寫的 [0-9] // 范圍類這樣寫的number.png[abcdefghigklmnopqrstuvwxyz] // 原來這樣寫的 [a-zA-Z] //范圍類這樣寫 還比原來寫的多letter.png -
JavaScript預(yù)定義類
預(yù)定義類就是 正則 覺得你寫東西不容易,他幫你 預(yù)定義一些好用的 類(有一種冷是你媽媽覺得你冷)
chartClass.png解釋一下: 1. d -> digit s -> space w -> word 2. 使用之前的 字符類 + 范圍類 等也可以實(shí)現(xiàn) 預(yù)定義類 的匹配,but 預(yù)定義類不是更簡(jiǎn)單嗎 \d 和 \D 大小寫正好是取反 \s 和 \S 大小寫取反 。。。。。 更多的大小寫取反 -
量詞啊?。?!
-
所謂量詞就是表示多少數(shù)量的詞,從
0 - n滿足你花樣的數(shù)量匹配的需求。
numberword.png -
伴隨量詞而來的另一個(gè)問題,到底匹配多少次
'12345678'.replace(/\d{3, 6}/g, 'X'); // 誰能聊聊這個(gè)到底匹配了幾個(gè)字符 悄悄告訴圣僧,正則默認(rèn)采用的的是貪婪模式(正則就像貪食蛇一樣盡可能多的匹配)正則的 貪婪模式 和非貪婪模式 (因?yàn)?code>其伴隨著量詞而生,所有總在量詞后面,使用
一個(gè) ? 來區(qū)分)'12345678'.replace(/\d{3,6}/g, 'X'); // X78 貪婪模式 '12345678'.replace(/\d{3,6}?/g, 'X'); // XX 78 非貪婪模式
-
-
邊界類
邊界類就是取字符的邊界 (文檔都應(yīng)該有 上下左右留白,正則也是很有要面子的)
bianjie.png
b -> boundary // 解釋一下 b 代表的單詞
3. 從這里開啟新征程
-
分組 所謂分組就是將
組內(nèi)的整體當(dāng)做元字符使用。(byron){3} // 分組將 byron 作為整體 (byron|capital) // 分組將 byron或者capital 作為整體 by(ron|cap)ital // 分組將 ron或者cap 作為整體group.png
-
分組的引用 每個(gè)小小的分組其實(shí)都有一個(gè)默認(rèn)的引用 (
拿啥引,拿錢引唄)'2015-11-21'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1') // "21/11/2015" 看見沒 $3 就表示 第三個(gè)分組(括號(hào)) 里面的 內(nèi)容 $2 就表示 第二個(gè)分組(括號(hào)) 里面的 內(nèi)容 $1 就表示 第一個(gè)分組(括號(hào)) 里面的 內(nèi)容 這就是分組的引用 -
忽略分組 有些分組我們不想要怎么辦??
(?:內(nèi)容) 使用 ?: 就表示可以忽略該分組
比如我們想在寫的亂七八糟的數(shù)據(jù)里面找日期并且換種顯示方式 '2015-asdasd-11-21'.replace(/(\d{4})-(?:\w+)-(\d{2})-(\d{2})/, '$3/$2/$1'); // "21/11/2015"
有個(gè)小問題?
[]中括號(hào) 表示或者的意思,而|豎線 也表示或者的意思,這兩者有何區(qū)別?
4. 來看看 正則表達(dá)式的匹配原理是什么
記住四個(gè)字: 前瞻 后顧

正則表達(dá)式的前瞻:
1,正則表達(dá)式是從文本頭部向尾部開始解析,從文本尾部向文本前部,稱為‘前’
2,前瞻就是在正則表達(dá)式匹配到規(guī)則時(shí),向前檢查是否符合斷言。
所謂的前瞻就是在正則表達(dá)式匹配到某個(gè)字符的時(shí)候,往“尚未解析過的文本”預(yù)先看一下,看是不是符合/不符合匹配模式,
而后顧,就是在正則引擎已經(jīng)匹配過的文本看看是不是符合/不符合匹配模式。符合和不符合特定匹配模式我們又稱為肯定式匹配和否定式匹配。
反向/否定匹配稱為斷言不符合

本節(jié)課程基本沒有實(shí)用性,大家了解就好?。。。。?!
5. 看看真正的正則表達(dá)式強(qiáng)人是怎么煉成的 (實(shí)踐證明全局和非全局是非常重要的)
-
正式表達(dá)式本質(zhì)是個(gè)啥?是個(gè)對(duì)象呀(一幫叫做正則表達(dá)式對(duì)象)
是對(duì)象就應(yīng)該有屬性和方法,下面來看看 (五大三粗少一粗
就是五個(gè)屬性兩個(gè)方法)- 屬性 有下面五個(gè)
attr.pngreg.global, reg.ignoreCase, reg.multiline 都是只讀的正則屬性-
解釋一下這個(gè) lastIndex
與正則表達(dá)式相關(guān)的術(shù)語 :
當(dāng)前表達(dá)式+最后一個(gè)字符+下一個(gè)字符有的同學(xué)說我這個(gè)正則表達(dá)式結(jié)果不穩(wěn)定呀, 這個(gè) test 只有第一次完全正確,以后都是不確定的,這個(gè)怎么辦? 其實(shí)就是 lasrIndex 在作怪,下面詳細(xì)說明 var reg = /\w/g reg.test(a); // true reg.test(a); // false -
正則表達(dá)式的方法
-
test
Reg 對(duì)象屬性表示 測(cè)試后面的字符是否能在前面的 test 中找到test 只是用于測(cè)試是否存在,不關(guān)系 lastIndex...一些詳細(xì)信息 -
exec
RegExp.prototype.exec正則更詳細(xì)的信息在這里exec.pngexec 后結(jié)果解析: 匹配到了文本 返回?cái)?shù)組 若沒有 匹配到的文本則返回null reg.index 表示匹配文本的第一個(gè)字符串 reg.input 表示被檢索的字符串exec 在全局和非全局 (有 g 和沒有 g) 結(jié)果下有不一樣的結(jié)果
非全局下
lastIndex == 0 (而且一直為零)全局情況下
lastIndex 隨著匹配的前瞻而變化
-
-
字符串的正則匹配方法 ** 四個(gè)大漢**
使用這四個(gè)方法進(jìn)行匹配時(shí),就算傳入的參數(shù)不是正則,javascript 也會(huì)盡可能嘗試將參數(shù)轉(zhuǎn)為正則
-
String.prototype.search(reg/str/...);
特點(diǎn):
方法返回第一個(gè)匹配結(jié)果的index,查找不到返回-1; 方法不執(zhí)行全局匹配,它將忽略標(biāo)志g, 總是從字符串的開始進(jìn)行檢索(總是從頭開始查找) -
String.prototype.match(reg/str/...)
特點(diǎn):是否全局有區(qū)別 非全局情況下和 exec 的到的結(jié)果基本類似 result.index result ['匹配到的子字符串', '分組信息'] result.lastIndex (沒有該屬性) 全局情況下 匹配所有的匹配到的子字符串(是一個(gè)數(shù)組) result.lastIndex (沒有該屬性) result ['匹配到的子字符串1', '匹配到的子字符串2',.....] (沒有分組信息) -
String.prototype.split(reg/str/...)
特點(diǎn): 將匹配到的字符作為分割符號(hào) 將字符串切成數(shù)組 -
String.prototype.replace('reg/str/...找誰)', '替換成的樣子')
特點(diǎn): 將找到的字符替換成設(shè)定的字符串replace 送額外的福利啦
replace 需要替換的字符可以又一個(gè)函數(shù)的 callback 來承擔(dān) String.prototype.replace(reg, function(resultStr, group1, gruop2, index, sourceStr) {})
-
-
大家聊聊
str.match(reg)和reg.exec(str)分別有什么不同提示一下: 是否帶有 g(全文搜索) 返回的結(jié)果(比如結(jié)果中都有神馬?index, lastIndex ....) -
幾個(gè)常見的注意事項(xiàng)
-
^ 放在外面和放在 [] (中括號(hào))里面是不一樣的
^(135|136|177|180) // 放在外面的 ^ 表示以 某個(gè)字符開頭的 [^135] // 放在 中括號(hào)里面表示取反,不包括這些字符 -
? 單獨(dú)出現(xiàn)和放在 () (小括號(hào)中) 是不一樣的
? 放在單獨(dú)出現(xiàn)表示一個(gè)量詞 // 表示 問號(hào) 前面的量詞出現(xiàn) 零次或者一次 [123]? // 表示 1 或者 2 或者 3 ,三個(gè)數(shù)字最多出現(xiàn)一次 ? 放在小括號(hào)中 // 表示前瞻 后顧 負(fù)前瞻,負(fù) 后顧 前瞻: exp1(?=exp2) 查找exp2前面的exp1 后顧: (?<=exp2)exp1 查找exp2后面的exp1 負(fù)前瞻: exp1(?=exp2) 查找后面不是exp2的exp1 負(fù)后顧: (?<=exp2)exp1 查找前面不是exp2的exp1 可以發(fā)現(xiàn),負(fù)前瞻、負(fù)后顧就是把前瞻、后顧中的"="改成了"!" 示例: (?<=博)客(?=園) // 表示只 匹配到 博客園 中的 客 字 (?<!博)客(?!園) // 表示只匹配其他字符串中的 客 字,不匹配 博客園 字符串中的客
-









