帶你入門（幾個小小點）
目錄
- 正則表達式的使用
- 正則表達式的基本構成元素
- 正則中的類(分類)，基本的元字符 + 五個基本類，構成正則的各種變化
- 正則表達式的分組 和 匹配出來的變量引用
- 正則的匹配原理 和 應用
正則表達式中不能正常顯示（不能正常使用）的字符基本都可以使用轉義來解決
$1 表示分組的第一個字符
\$1 表示一個 `$1` 字符
正則表達式可以快速處理基本字符,文本,網址,郵箱,日期等數據
-
日期的使用
^(\d{4})[/-](\d{2})[/-](\d{2})$ // 請試翻譯該正則表達式 2006/02/03 test/07/sd 1998-03-07 12345/23/1998
-
http 協議的使用
http:\/\/(.+\.jpg) // 請試翻譯該正則表達式
-
一些常用的正則含義
\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.小葵花媽媽課堂正式開課啦. 哈哈,上面的你要是不熟悉就當我是在裝逼格高啦!
-
兩種實例化RegExp對象的方法 （先來看看 regExp 哥哥長什么1樣子）
小時候是這樣（長得中規中矩）
var reg = new RegExp("正則表達式"，修飾符); // 修飾符是啥？后面聊長大了長這樣(這 TM 長的就很隨意啦)
var reg = /正則表達式/修飾符像上面這樣寫就可以生成一個 正則對象啦
-
聊聊修飾符 （長相很隨意，發型來幫忙）
g (global): 全文搜索，不添加g，搜索到第一個匹配停止； i (ignore case) : 忽略大小寫，不添加則默認為大小寫敏感； m ( multiple lines):多行搜索 g i m 可以一起使用 -
元字符（就像信息有一元分詞,二元分詞等）。就是作為正則表達式的
基本構成體注意：這里的元字符是一個整體并不是簡單的一個字符 a,b,c .... 表示一個個元字符 \t, \v, \n ... 也表示一個個元字符 $1, $2 ... 也表示一個個元字符作為基本字符的元字符（不解釋。。。）
-
特殊字符作為元字符
基本構成體，既然是體，肯定有線條，有孤獨，有凹有凸。。。。下面你看到的這些都是元字符 $ ^ | . + ? [] {} () \t 水平制表符 \n 換行符 ......特殊字符我們暫且
叫 她 元字體
2. 正則也是有族譜的，看看正則相關的分類
-
元字符
元字符每個就代表一個意思,表示取到這個字符的意思（元字體每個也都是單獨的意思）
-
字符類 （何為字符類，就是將 字符拼在一塊組成一類嘛。物以類聚，人以群分）
-
構成類, 使用 [] 將某些字符構成一類
表示或的意思[abc] a 或者 b 或者 c [0123456789] 0 或者 1 或者 2 ...等我吐完這口老血一定說到 9明白了沒？構成類表示或者意思
char.png -
字符類取反, ^ 表示取反的意思
[^abc] //不是 a,也不是 b, 也不是 c.. [^0123456789] // 小明你來念取反表示取這些之外字符。
NoneOf.png -
-
范圍類 0-9, a,-z, 12-15 就表示一個范圍呀
表示這個范圍內或的意思范圍類需要結合字符類一起使用，表示這個范圍里的或者
范圍類是個閉區間
直接上栗子 [0123456789] // 原來你這樣寫的 [0-9] // 范圍類這樣寫的number.png[abcdefghigklmnopqrstuvwxyz] // 原來這樣寫的 [a-zA-Z] //范圍類這樣寫 還比原來寫的多letter.png -
JavaScript預定義類
預定義類就是 正則 覺得你寫東西不容易，他幫你 預定義一些好用的 類（有一種冷是你媽媽覺得你冷）
chartClass.png解釋一下： 1. d -> digit s -> space w -> word 2. 使用之前的 字符類 + 范圍類 等也可以實現 預定義類 的匹配，but 預定義類不是更簡單嗎 \d 和 \D 大小寫正好是取反 \s 和 \S 大小寫取反 。。。。。 更多的大小寫取反 -
量詞啊！！！
-
所謂量詞就是表示多少數量的詞，從
0 - n滿足你花樣的數量匹配的需求。
numberword.png -
伴隨量詞而來的另一個問題，到底匹配多少次
'12345678'.replace(/\d{3, 6}/g, 'X'); // 誰能聊聊這個到底匹配了幾個字符 悄悄告訴圣僧，正則默認采用的的是貪婪模式（正則就像貪食蛇一樣盡可能多的匹配）正則的 貪婪模式 和非貪婪模式 （因為
其伴隨著量詞而生，所有總在量詞后面，使用一個 ? 來區分）'12345678'.replace(/\d{3,6}/g, 'X'); // X78 貪婪模式 '12345678'.replace(/\d{3,6}?/g, 'X'); // XX 78 非貪婪模式
-
-
邊界類
邊界類就是取字符的邊界 （文檔都應該有 上下左右留白,正則也是很有要面子的）
bianjie.png
b -> boundary // 解釋一下 b 代表的單詞
3. 從這里開啟新征程
-
分組 所謂分組就是將
組內的整體當做元字符使用。(byron){3} // 分組將 byron 作為整體 (byron|capital) // 分組將 byron或者capital 作為整體 by(ron|cap)ital // 分組將 ron或者cap 作為整體group.png
-
分組的引用 每個小小的分組其實都有一個默認的引用 (
拿啥引，拿錢引唄)'2015-11-21'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1') // "21/11/2015" 看見沒 $3 就表示 第三個分組(括號) 里面的 內容 $2 就表示 第二個分組(括號) 里面的 內容 $1 就表示 第一個分組(括號) 里面的 內容 這就是分組的引用 -
忽略分組 有些分組我們不想要怎么辦？？
(?:內容) 使用 ?: 就表示可以忽略該分組
比如我們想在寫的亂七八糟的數據里面找日期并且換種顯示方式 '2015-asdasd-11-21'.replace(/(\d{4})-(?:\w+)-(\d{2})-(\d{2})/, '$3/$2/$1'); // "21/11/2015"
有個小問題？
[]中括號 表示或者的意思，而|豎線 也表示或者的意思，這兩者有何區別？
4. 來看看 正則表達式的匹配原理是什么
記住四個字： 前瞻 后顧
正則表達式的前瞻:
1,正則表達式是從文本頭部向尾部開始解析，從文本尾部向文本前部，稱為‘前’
2,前瞻就是在正則表達式匹配到規則時，向前檢查是否符合斷言。
所謂的前瞻就是在正則表達式匹配到某個字符的時候，往“尚未解析過的文本”預先看一下，看是不是符合/不符合匹配模式，
而后顧，就是在正則引擎已經匹配過的文本看看是不是符合/不符合匹配模式。符合和不符合特定匹配模式我們又稱為肯定式匹配和否定式匹配。
反向/否定匹配稱為斷言不符合
本節課程基本沒有實用性，大家了解就好！！！！！！
5. 看看真正的正則表達式強人是怎么煉成的 （實踐證明全局和非全局是非常重要的）
-
正式表達式本質是個啥？是個對象呀（一幫叫做正則表達式對象）
是對象就應該有屬性和方法，下面來看看 （五大三粗少一粗
就是五個屬性兩個方法）- 屬性 有下面五個
attr.pngreg.global, reg.ignoreCase, reg.multiline 都是只讀的正則屬性-
解釋一下這個 lastIndex
與正則表達式相關的術語 :
當前表達式+最后一個字符+下一個字符有的同學說我這個正則表達式結果不穩定呀， 這個 test 只有第一次完全正確，以后都是不確定的，這個怎么辦？ 其實就是 lasrIndex 在作怪，下面詳細說明 var reg = /\w/g reg.test(a); // true reg.test(a); // false -
正則表達式的方法
-
test
Reg 對象屬性表示 測試后面的字符是否能在前面的 test 中找到test 只是用于測試是否存在，不關系 lastIndex...一些詳細信息 -
exec
RegExp.prototype.exec正則更詳細的信息在這里exec.pngexec 后結果解析： 匹配到了文本 返回數組 若沒有 匹配到的文本則返回null reg.index 表示匹配文本的第一個字符串 reg.input 表示被檢索的字符串exec 在全局和非全局 (有 g 和沒有 g) 結果下有不一樣的結果
非全局下
lastIndex == 0 （而且一直為零）全局情況下
lastIndex 隨著匹配的前瞻而變化
-
-
字符串的正則匹配方法 ** 四個大漢**
使用這四個方法進行匹配時，就算傳入的參數不是正則,javascript 也會盡可能嘗試將參數轉為正則
-
String.prototype.search(reg/str/...);
特點：
方法返回第一個匹配結果的index，查找不到返回-1； 方法不執行全局匹配，它將忽略標志g， 總是從字符串的開始進行檢索（總是從頭開始查找） -
String.prototype.match(reg/str/...)
特點：是否全局有區別 非全局情況下和 exec 的到的結果基本類似 result.index result ['匹配到的子字符串', '分組信息'] result.lastIndex (沒有該屬性) 全局情況下 匹配所有的匹配到的子字符串（是一個數組） result.lastIndex (沒有該屬性) result ['匹配到的子字符串1', '匹配到的子字符串2',.....] (沒有分組信息) -
String.prototype.split(reg/str/...)
特點: 將匹配到的字符作為分割符號 將字符串切成數組 -
String.prototype.replace('reg/str/...找誰）', '替換成的樣子')
特點: 將找到的字符替換成設定的字符串replace 送額外的福利啦
replace 需要替換的字符可以又一個函數的 callback 來承擔 String.prototype.replace(reg, function(resultStr, group1, gruop2, index, sourceStr) {})
-
-
大家聊聊
str.match(reg)和reg.exec(str)分別有什么不同提示一下: 是否帶有 g(全文搜索) 返回的結果（比如結果中都有神馬？index, lastIndex ....） -
幾個常見的注意事項
-
^ 放在外面和放在 [] (中括號)里面是不一樣的
^(135|136|177|180) // 放在外面的 ^ 表示以 某個字符開頭的 [^135] // 放在 中括號里面表示取反，不包括這些字符 -
? 單獨出現和放在 () (小括號中) 是不一樣的
? 放在單獨出現表示一個量詞 // 表示 問號 前面的量詞出現 零次或者一次 [123]? // 表示 1 或者 2 或者 3 ，三個數字最多出現一次 ? 放在小括號中 // 表示前瞻 后顧 負前瞻，負 后顧 前瞻： exp1(?=exp2) 查找exp2前面的exp1 后顧: (?<=exp2)exp1 查找exp2后面的exp1 負前瞻: exp1(?=exp2) 查找后面不是exp2的exp1 負后顧: (?<=exp2)exp1 查找前面不是exp2的exp1 可以發現，負前瞻、負后顧就是把前瞻、后顧中的"="改成了"!" 示例： (?<=博)客(?=園) // 表示只 匹配到 博客園 中的 客 字 (?<!博)客(?!園) // 表示只匹配其他字符串中的 客 字，不匹配 博客園 字符串中的客
-
