一趴俘、JavaScript正則引入

①-正則引入

今天我們學(xué)習(xí)的技術(shù)是正則表達式忌傻，在說正則表達式之前屁置，我們需要知道的通贞，正則表達式是一門對字符串處理的技術(shù)（最早引入是神學(xué)網(wǎng)絡(luò)學(xué)里面---引入Unix操作系統(tǒng)---Linux操作 sed命令 ---perl語言（正則支持最好的語言）百度百科）朗若，很多編程語言對正則都有支持（例如Perl、Java昌罩、php哭懈、JavaScript....）。今天我們學(xué)習(xí)的是JavaScript里面的正則表達式技術(shù)峡迷。一般正則也叫火星文银伟。

Paste_Image.png

問題引入：大部分人對正則還是不是很清楚，一般對傳統(tǒng)字符串處理方式很清晰绘搞。

1.在學(xué)習(xí)正則表達式之前彤避，先做一個小案例來對比傳統(tǒng)的字符串操作和正則對字符串操作的不同之處
2.案例：查找一個字符串里面所有的整數(shù)
a)var string = ‘12absdfdsf45sdafdsaf56’; // [12, 45, 56]
3.完成這個案例之前的話，我們先要補充一個知識夯辖，字符串之間是可以比較的琉预，按照字符串的ascii碼值比較的( 'a' < 'b' )[ 97 < 98]

Paste_Image.png

4.那么我們?nèi)绾闻袛嘁粋€字符是否是數(shù)字類型的字符呢？('0'-'9')

Paste_Image.png

5.可以判斷這個字符是否在'0'-'9'這個數(shù)字類型字符范圍之內(nèi)即可

傳統(tǒng)字符串處理方式
代碼：

Paste_Image.png

效果：

Paste_Image.png

正則處理方式
代碼：

Paste_Image.png

效果：

Paste_Image.png

通過上面的簡單的引入蒿褂，發(fā)現(xiàn)使用正則在處理字符串方面還是有其獨特的優(yōu)勢圆米。

②-什么是正則表達式？

看一下場景：

Paste_Image.png

對于人類來說啄栓，基于日常的生活經(jīng)驗娄帖，我們可以很方便的看出某些字符的規(guī)律。但是對于計算機來說昙楚，它是很笨的近速，它并不能很好的理解人類所理解規(guī)則。但是計算笨不假，只有有電削葱，干活還是很快（1G 42億指令）所有人類喜歡奴隸計算幫助我們?nèi)祟愖鍪虑榻毖恰Ｋ锌梢允褂靡欢ň幊陶Z言來幫我們?nèi)ヌ幚硎虑椤２⑶疫@里學(xué)習(xí)是正則析砸，所有我們得學(xué)習(xí)正則的編程語言來處理日常生活中常見的字符串昔字。

正則定義：

正則其本質(zhì)就是一個字符串規(guī)則（這個規(guī)則得滿足一定的語法），然后通過這個規(guī)則可以非常方便的幫我們?nèi)ヌ幚碜址追保页龊Ａ孔址锩鏉M足我們定義的規(guī)則的字符作郭。正則其底層是一個對象。

一般使用的場景主要是：前臺的驗證蛮瞄、正則處理滿足條件的字符串（網(wǎng)絡(luò)爬蟲 Python編程）數(shù)據(jù)采集（大宗點評：商家評論 抓人鳌） curl函數(shù)庫：模擬http請求。

③-正則語法

我們這次說的語法是js里面的語法挂捅，在其他語言里面不一定一樣。
在js里面正則的語法一般有兩種方式書寫：
// 定界符堂湖，需要在定界符里面書寫正則的表達式闲先，千萬主要不要在定界符的外層加引號
方式一：
var reg = /\d+/; 常用，簡便 這種寫法一般也被稱為語法糖无蜂。
方式二：
var reg = new RegExp(‘\d+’);

var arr = [];
var arr1 = new Array();

var json = {};
var json1 = new Object();

④-test方法

正則對象的第一個方法：test方法

案例1：測試某個字符串里面是否存在滿足正則的規(guī)則的字符

Paste_Image.png

效果：

Paste_Image.png

總結(jié)：正則對象的test方法的返回值是一個boolean值伺糠，如果在處理的字符串里面能夠找到滿足正則規(guī)則的字符，返回true斥季；否則返回false训桶。比較多

⑤-字符串方法和正則對象的配合

一般來說正則對象單獨作為一個對象去調(diào)用方法比較少，一般都是和字符串的方法配合使用酣倾，作為字符串方法的參數(shù)進行傳遞舵揭。

字符串串里面常見的方法：
1.substring 做字符串的截取 [start, end)
2.search 做某個字符串搜索，返回值是從0開始對應(yīng)的下標(biāo)躁锡，找不到返回-1
3.replace 做字符串的替換午绳，查詢某個字符串里面是否存在滿足條件的字符串，使用新的字符串進行替換
4.match 做查找的匹配映之，并且把匹配的結(jié)果以數(shù)組的方式返回
5.repeat 讓某個字符串重復(fù)出現(xiàn)多少次
6.split 做字符串的分割拦焚，把某個字符串按照一定的分隔符分割成數(shù)組

字符串-match方法

案例1： 直接把字符作為參數(shù)傳遞給match方法

Paste_Image.png

效果

Paste_Image.png

案例2：把正則對象作為參數(shù)傳遞給match方法

Paste_Image.png

效果：

Paste_Image.png

特別注意：
元字符：
\d代表的含義被稱為js正則里面的轉(zhuǎn)移字符， d 代表就代表一個普通的字符d 杠输，但是在前面加了一個 \ 赎败，現(xiàn)在\d含義就變了，變成了一類字符的集合0-9之間的任何一個數(shù)字蠢甲。

模式修飾符：

1. 在js的真這個里面match方法默認(rèn)是找到滿足條件的就停止僵刮，不再繼續(xù)的向后查找，如果要讓它向后繼續(xù)查找，需要在正則表達式加上g妓笙，這個g被稱為模式修飾符若河。主要是修飾正則表達式該如何去操作，代表的意思寞宫，不要停止萧福，繼續(xù)去字符串找到所有滿足條件的字符。

2. 在js里面還有一個模式修飾符辈赋，i代表含義是ignore鲫忍，不區(qū)分大小寫

Paste_Image.png

效果：

Paste_Image.png

量詞：

1. • 在js正則里面被稱為量詞，用來修飾前面的正則規(guī)則出現(xiàn)的次數(shù)钥屈，+代表1次或者多次 多
2. • 代表的含義就是 0次或者以上悟民，但是一般少用 手機號碼 0*18620628729
3. ? 代表出現(xiàn)0次或者1次

案例3：在一個字符串里面查找所有的整數(shù)
代碼：

Paste_Image.png

效果：

Paste_Image.png

特別注意：

1. \d 代表 0-9之間的任何一個數(shù)字，對于這種寫法還有另外的一種方式表示篷就， [0-9] 代表0-9之間一個數(shù)字
2. • 這種寫法也存在另外的一種寫法射亏，{1,}代表出現(xiàn)最少一次，最多不限

字符串-replace方法

案例1：傳統(tǒng)字符串方式字符串竭业，替換里面滿足條件的字符

Paste_Image.png

效果：

Paste_Image.png

注意：replace方法找到滿足條件的字符進行替換后智润，里面停止，不再向后繼續(xù)處理未辆。

案例2：正則對象使用窟绷，替換里面滿足條件的字符

Paste_Image.png

效果：

Paste_Image.png

案例3：做一個敏感字替換，效果如下

Paste_Image.png

代碼：

Paste_Image.png

效果：

Paste_Image.png

優(yōu)化：如果敏感字有幾個長度咐柜，則替換的位置顯示多少個*號兼蜈。

Paste_Image.png

效果：

Paste_Image.png

特別注意：
1.replace可以接受第二個參數(shù)，是一個回調(diào)函數(shù)拙友，當(dāng)使用正則去處理字符串的時候为狸，如果能夠找到滿足條件的部分，回調(diào)函數(shù)里面會執(zhí)行
2.replace第二個參數(shù)的返回值就是新的替換值献宫；在js如果函數(shù)不存在返回值钥平，返回undefined

3. replace回調(diào)函數(shù)存在參數(shù)，第一個參數(shù)就是滿足正則的字符串姊途，會被傳遞回調(diào)函數(shù)

案例4：把下面的中劃線的命名變成小駝峰的方式
使用傳統(tǒng)字符串方式實現(xiàn)：

Paste_Image.png

效果：

Paste_Image.png

正則實現(xiàn)：

Paste_Image.png

效果

Paste_Image.png

特別注意：
1.在js正則里面的()被稱為子項（分組）,從左往右數(shù)涉瘾，第一個小括號被稱為第一個子項，依次類推
2.在js的replace方法的第二個回調(diào)函數(shù)里面的第一個參數(shù)是滿足整個正則的字符串捷兰，其后的參數(shù)就是滿足子項的字符串

案例5：把某一個字符串里面出現(xiàn)次數(shù)最多的字符找出來
傳統(tǒng)字符串方式處理：

Paste_Image.png

效果：

Paste_Image.png

正則處理：

Paste_Image.png

效果：

Paste_Image.png

特別注意：

1. 正則表達式里面的小括號被稱為子項立叛，從左到右，依次稱為第一個贡茅，第二個...秘蛇；如果需要獲取子項里面的內(nèi)容獲其做，可以使用\1 代表對第一個子項的引用 ，\2代表是對第二個引用赁还。

擴展：數(shù)組去重

Paste_Image.png

效果:

Paste_Image.png

二妖泄、正則字符類

1.什么是字符類？
答：就是js正則里面一類字符的集合艘策，例如所有的小寫字母蹈胡。
[a-z]
所有的大寫字母
[A-Z]
所有的數(shù)字
[0-9]
需要某一個部分的字符[&*]、[abcd]朋蔫、[a-d]

例如常見的字符類也存在簡寫
[0-9] \d
js里面所有的字符 0-9a-zA-Z_ 表示方法：\w 罚渐、[ [a-zA-Z0-9]

案例1：注冊用戶名檢測
規(guī)則：
1.用戶的首字母不能是數(shù)字
2.長度一般是4-8位長度
3.其他后面的部分是可以a-zA-Z0-9_中的字符

Paste_Image.png

效果

Paste_Image.png

特別注意：
1.在字符類里面，如果在中括號里面加上^號之后驯妄，代表不取這個[]里面的字符
2.[]只代表其中的一個字符
3.^如果不是在[]里面使用荷并，代表字符串的行首； $代表是行尾青扔，一般在表單的驗證的時候都要加上行首行尾源织。但是一般來說我們也很少自己去寫表單驗證，一般是要驗證的插件微猖，等會學(xué)習(xí)一個validate插件雀鹃，可以幫我們做前臺驗證。

三、正則里面的量詞

一般在js正則里面，有的需要修飾前面的字符出現(xiàn)的次數(shù)下面，這個時候我們可以使用量詞來操作畏妖。
量詞常見存在兩種寫法：
寫法1：
a.+ 代表前面的字符出現(xiàn)最少一次，最多不限制
b.* 代表最少出現(xiàn)0踢代，最多不限
c.? 代表出現(xiàn)0或者1次 （手機號碼）

寫法2：
a.{1,} 代表出現(xiàn)最少1次
b.{3,6} 代表最少出現(xiàn)3盲憎，最多出現(xiàn)6次（最多）
c. {0,1} 代表最少0次，最多1次
d. {9} 代表正好要出現(xiàn)9次

案例1：手機號碼驗證（面試）
手機號碼規(guī)則：
1.現(xiàn)在手機號碼可能11或者12胳挎；例如：18620628729 018620628729饼疙，手機號碼最前的0可以出現(xiàn)，也可以不出現(xiàn)
2.對于11手機號碼慕爬，首位必須1
3.除開首位之后的第二位只能是 3 4 5 7（阿里）8
4.除開首位和第二位之后的位數(shù)可以0-9之間任何一個

Paste_Image.png

案例2：去除字符串里面的空格（筆試寫一個正則）

Paste_Image.png

效果：

Paste_Image.png

案例3：QQ號驗證
規(guī)則：
1.目前QQ號最少5位窑眯，最多10位
2.QQ號的首位不能為0
3.首位之后的其他為0-9中任何一個

Paste_Image.png

案例4：郵箱驗證(主要是為了面試)
規(guī)則：
gogery@163.com
第一部分：目前的用戶名只能[0-9a-zA-Z_] 出現(xiàn)的次數(shù){3,10}
第二個部分：@
第三個部分：[a-z0-9] 域名 出現(xiàn)的次數(shù){1,4}
第四個部分：. 但是需要特別注意 ，. 在js正則里面存在特殊的含義医窿，也被稱為元字符磅甩，代表除開換行之外的任何字符都可以。如果我們希望去除掉特殊姥卢，需要進行轉(zhuǎn)義,前面加一個 \ 卷要， . 這個時候只代表普通的 .
第五部分：根域 [a-z]渣聚， 出現(xiàn){2,4}

Paste_Image.png

四、正則中文的處理

一般在字符都存在一個編碼的規(guī)則僧叉，對于中文的編碼一般都是使用utf-8編碼奕枝，并且js天生使用的就是utf-8對待字符串。并且utf-8的編碼是存在一個范圍的[\u4e00-\u9fa5]基本把所有常見中文都涵蓋瓶堕。

案例1：一般是在相親網(wǎng)站里面的用戶注冊一般都需要首字母是中文隘道。

Paste_Image.png

一般來說我們作用戶名檢查的時候，都是需要注意用戶名字符串里面不包含中文捞烟。

面試寶典：設(shè)計一個簡單的算法薄声，來計算相親網(wǎng)站一個用戶注冊的時候，給他|她|它匹配一個緣分指數(shù)题画。（開放性的問題）
面試題：現(xiàn)在存在一個1kw人口城市默辨，需要多少個理發(fā)師（合理）？思路
面試題：井蓋為什么是圓的苍息？人的手指不是一般長缩幸？
面試題：2個2T文件，里面數(shù)據(jù)是按行分割竞思，找出里面重復(fù)的單元表谊。（開放性思維）

五、正則里面的正向預(yù)言和反向預(yù)言

一般也叫作正向言寬和反向言寬盖喷。因為這個知識點很少很少爆办。

案例1：正向預(yù)言

Paste_Image.png

效果

Paste_Image.png

反向預(yù)言：

Paste_Image.png

效果：

Paste_Image.png

補充：單詞的邊界
在js里面對于一個字符來說，空格课梳，行首和行尾被稱為邊界距辆，使用元字符\b表示。
案例補充：同一個字符串里面的單詞的個數(shù)

Paste_Image.png

效果：

Paste_Image.png

案例2：現(xiàn)在存在一個數(shù)字類型的字符暮刃，需要使用千分符的方式來處理這個字符串
var string = ‘12345678’;
千分符：一般在顯示金錢的時候跨算，要使用（電商網(wǎng)站）
形如這樣：12,345,678

傳統(tǒng)字符串的方式處理：
思路：

1. 由于千分符是3位一分割，所有我們?nèi)ゲ榭醋址拈L度是否正好是3的倍數(shù)椭懊，那就可以那字符串的長度對3取摸【取余】诸蚕，查看余數(shù)是多少 0 1 2
2. 如果是0則正好是3的倍數(shù)，則3為一分割
3. 如果不是0氧猬，先把多余部分的分割出來背犯，剩下部分3為一分割

Paste_Image.png

Paste_Image.png

效果：

Paste_Image.png

正則處理：正向預(yù)言和反向預(yù)言實現(xiàn)和邊界

Paste_Image.png

效果：

Paste_Image.png

擴展：在php里面存在一個number_format函數(shù)可以實現(xiàn)千分符。

六狂窑、擴展-validate插件使用

①-簡介

Paste_Image.png

展示效果：

Paste_Image.png

②-插件使用

1.把對應(yīng)的插件下載到本地媳板，放置網(wǎng)站根目錄的資源目錄里面

Paste_Image.png

2. 順序引入的引入插件

   
   
   Paste_Image.png

3.為定義form的id屬性，方便插件調(diào)用時候獲取該DOM元素

Paste_Image.png

4.js調(diào)用代碼

Paste_Image.png

Paste_Image.png

5.為提示信息加一個邊框樣式

Paste_Image.png

在點擊提交沒有通過的通過的情況下泉哈，會在input后面增加一個class為error的label標(biāo)簽蛉幸，只需要給label.error寫一個樣式破讨。

Paste_Image.png

效果：

Paste_Image.png