正則表達式 - RegExp - 年度匯總

題記:“離婁之明擅笔,公輸子之巧,不以規(guī)矩苔悦,不能成方圓翅楼!”初聞?wù)齽t表達式,以為一系列之規(guī)則,實則還為定義種種規(guī)矩潮尝!(∩_∩)~正則表達式言之“世間萬物皆有我來審判i藕稹!勉失!吾乃王道羹蚣!吾乃標準!”

“鈴鈴鈴”乱凿!下面進入正題顽素。

1.圖形化工具

首先,我們來聊聊正則表達式的工具吧徒蟆!此工具非彼工具胁出,那就是將書寫的正則表達式文字利用圖形化給展示出來!就是一款圖形化工具段审。


圖形化工具.PNG

接下來就聊聊怎么把它安裝到本地吧H(在安裝完nodejs環(huán)境后)
1 首先下載壓縮包。地址: https://github.com/javallone/regexper-static

2345截圖20161226003212.png

2 然后將壓縮包給解壓后打開文件夾寺枉,按住shift點擊鼠標右鍵抑淫,打開終端,輸入“npm install”姥闪,裝下環(huán)境依賴始苇;等其安裝完之后進行第三步。

3 在終端內(nèi)輸入“npm start”筐喳,等待其啟動完畢催式。

成功界面.PNG

這樣做得好處就是只要在瀏覽器中輸入"127.0.0.1:8080"就可以打開圖形化工具了,不會受到網(wǎng)絡(luò)的影響避归,速度也很快荣月。

圖形化界面.PNG

要想結(jié)束這個服務(wù),就在剛才的終端按下ctrl+c槐脏。


到底正則表達式是何方神圣呢喉童?用它能做到什么樣的功能呢?

例如顿天,我們在sublime中按Ctrl + h 調(diào)出替換框堂氯。 最讓小白驚奇的是:竟然在sublime中也可以使用正則表達式來完成替換工作!E品稀咽白!sublime插件真是相當強大的啊鸟缕!瞧晶框!下面例子:

將單詞is替換成IS

He is a good man.

This is a text.

Where are you?

Display is also a noun.

isn't it ?

What is your name?

通過正則表達式很容易的將 ' is ' 替換成 ' IS '排抬。

GIF.gif

在這里可以看出僅僅是將單詞 is 替換成 IS,而不會將this中的is也給替換了授段。

來來來 蹲蒲, 客官看這里

去掉首尾有特征字符串

去掉http協(xié)議的jpg文件的協(xié)議頭

http://defdsf/df.jpg

https://dsfasdf.jpg

http://dsfdsf.jpg

https://dsfadsfsaddsf/dsfdsf.jpg

我們可以通過正則表達式 ^http(://.+).jpg$ 來實現(xiàn)!這段正則表達式表示的是什么意思呢侵贵?可以通過圖形化工具來看看届搁!

圖形化.PNG

表示是以 http 開頭,然后分成一個組窍育,組內(nèi)是 :// 加上任意字符卡睦,最后是以 .jpg 結(jié)尾的規(guī)則。我們就開始替換了漱抓!

替換

正式學(xué)習(xí)正則表達式

No.1 兩種方法實例化正則表達式的方式

  • 字面量
    var reg = /\bis\b/g表锻; var reg = /\bis\b/gim;
  • 構(gòu)造函數(shù)法
    var reg = new RegExp("\bis\b","g")

tip:推薦使用字面量方法,因為看起來簡單(easy)

No.2 修飾符
  1. g: global全文搜索乞娄,不添加瞬逊,搜索到第一個匹配停止
  2. i: ignore case 忽略大小寫,默認大小寫敏感
  3. m: multiple lines 多行搜索

重點來說說這個m多行匹配吧:

如果 multiline 為 false补胚,那么 "^" 匹配字符串的開始位置码耐,而 "$" 匹配字符串的結(jié)束位置追迟。
同樣如果 multline 為 true溶其,那么 "^" 匹配字符串開始位置以及 "\n" 或 "\r" 之后的位置,而 "$" 匹配字符串結(jié)束位置以及 "\n" 或 "\r" 之前的位置敦间。
其實很簡單瓶逃,多行模式就是根據(jù) \r 或 \n 把字符串分隔為多個單行模式去分別匹配,關(guān)鍵是要與 ^ 或 $ 配合使用廓块!

var s = "haha, hello world!\nhaha, ni hao!";
alert(s.replace(/^haha/g, "heihei"));
alert(s.replace(/^haha/gm, "heihei"));

結(jié)果:


彈出框1
彈出框2

發(fā)現(xiàn)彈出框1中第一個haha被替換了厢绝,彈出框2中第一行和第二行中的haha都被替換了,這個也就是m 多行文本替換的功能啦带猴!

No.3 元字符
正則表達式由兩種基本字符類型組成
  1. 原義文本字符:例如字符 a 到 z
  2. 元字符:在正則表達式中含有特殊含義的非字母字符,如下:

** . * + ? $ ^ | \ () {} [] **

\t     水平制表符
\v     垂直制表符
\n     換行符
\r     回車符
\0     空字符
\f     換頁符
\cX    與X對應(yīng)的控制字符(Ctrl + X)

如果想要把元義字符轉(zhuǎn)換為普通字符昔汉,只需在其前面加 ** 即可

No.4 字符類

一般情況下正則表達式中一個字符對應(yīng)字符串一個字符
這里的 ab\t 對應(yīng)的就是* "ab"+tab*

我們可以通過使用元字符[]來構(gòu)建一個簡單的類

所謂的類是指符合某些特性的對象,一個泛指拴清,而不是特指某個字符
表達式[abc]把字符a或b或c歸為一類靶病,表達式可以匹配這類的字符

No.5 字符類取反

使用元字符^創(chuàng)建 反向類/負向類
反向類的意思是不屬于某類的內(nèi)容

表達式[^abc]表示不是字符a或b或c 的內(nèi)容

No.6范圍類

使用字符類匹配數(shù)字

我們可以使用[a-z]來連接兩個字符表示從a到z的任意字符

這是個閉區(qū)間 包含a和z本身
[ ]組成的類的內(nèi)部是可以連寫的 [a-zA-Z]

No.7 預(yù)定義類

正則表達式提供預(yù)定義類來匹配常見的字符類

字符 等價類 含義
. [^\r\n] 除了回車符和換行符以外的所有字符
\d [0-9] 數(shù)字字符
\D [^0-9] 非數(shù)字字符
\w [a-zA-Z_0-9] 單詞字符(字母、數(shù)字口予、下劃線)
\W [^a-zA-Z_0-9] 非單詞字符
\s [\t\n\x0B\f\r] 空白符
\S [^\t\n\x0B\f\r] 非空白符
No.8 邊界
字符 含義
^ 以XXX開始
$ 以XXX結(jié)束
\b 單詞邊界
\B 非單詞邊界
No.9 量詞
字符 含義
? 出現(xiàn)0次或1次 (最多一次)
+ 出現(xiàn)一次或多次 (最少一次)
* 出現(xiàn)零次或多次 (任意次)
{n} 出現(xiàn)n次
{n,m} 出現(xiàn)n到m次
{n,} 至少出現(xiàn)n次
No.10 貪婪模式 與 非貪婪模式
  1. 貪婪模式:盡可能多的匹配次數(shù)

  2. 非貪婪模式:讓正則表達式盡可能少的匹配娄周,也就是說一旦成功匹配不在繼續(xù)嘗試就是非貪婪模式。
    做法很簡單沪停,就是在量詞后加 ? 即可煤辨。
    例如:'123465789'.match(/\d{3,5}?/g)

var s = "d123456ddd321236";
var r = s.match(/\d{3,6}/g);
var w = s.match(/\d{3,6}?/g);
console.log(r);
console.log(w);
打印.png

這里就體現(xiàn)出貪婪模式與非貪婪模式的區(qū)別了裳涛。第一個就是貪婪模式,盡可能的匹配众辨;第二個就是非貪婪模式了端三,只匹配到3個數(shù)字就OK了。(這名字取得也是非常符合其原意熬槌埂<技纭)

No.11 分組

使用( )可以達到分組的功能,使量詞作用于分組浮声。
如果我們想連續(xù)替換某段字符串3次的話虚婿,例如替換ABoyonBoyonBoyonA中的Boyon的話,我們是否可以這樣做呢泳挥?

var s = "ABoyonBoyonBoyonA";
var r = s.match(/Boyon{3}/g);
console.log(r);

結(jié)果是不行的H蝗!屉符!

未使用分組

因為這段正則表達式的含義是匹配 Boyonnn 這個字符串剧浸,結(jié)果在s中未找到,所以打印的結(jié)果為 null;
要想達到效果的話矗钟,我們應(yīng)該這么寫:

var s = "ABoyonBoyonBoyonA";
var r = s.match(/(Boyon){3}/g);
console.log(r);
使用分組后

這里將 Boyon 當作一個整體來替換了唆香,所以就OK啦

No.12
  • 使用 | 可以達到 的效果
    Byron | Casper

  • 反向引用
    '2016-12-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,"$2-$3-$1")

  • 忽略分組
    不希望捕獲某些分組,只需要在分組內(nèi)加上 ?: 就可以了
    (?:Byron)

</br>

No.13 敬請期待6滞А9!

</br>




關(guān)于正則總結(jié)

由于本人小白一枚东涡,在剛開始學(xué)完正則后感覺還是every good冯吓,但是在寫表單驗證的時候,一臉懵逼疮跑。组贺。。不知所措祖娘!于是打算好好整理一下學(xué)過的正則表達式的內(nèi)容失尖,通過查看上課的筆記和網(wǎng)上的視頻學(xué)習(xí)后,感覺任督二脈瞬間被打通渐苏,神清氣爽掀潮,自信的感覺又回來了!

  1. 鞏固之前學(xué)習(xí)的內(nèi)容
  2. 盡綿薄之力整以,請多指教胧辽!

“我一定會回來的,公黑,邑商,啊啊啊啊” ?? ??????? —— ?摘自灰太狼經(jīng)典語錄

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摄咆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子人断,更是在濱河造成了極大的恐慌吭从,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恶迈,死亡現(xiàn)場離奇詭異涩金,居然都是意外死亡,警方通過查閱死者的電腦和手機暇仲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門步做,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奈附,你說我怎么就攤上這事全度。” “怎么了斥滤?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵将鸵,是天一觀的道長。 經(jīng)常有香客問我佑颇,道長顶掉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任挑胸,我火速辦了婚禮痒筒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嗜暴。我一直安慰自己凸克,他們只是感情好,可當我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布闷沥。 她就那樣靜靜地躺著,像睡著了一般咐容。 火紅的嫁衣襯著肌膚如雪舆逃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天戳粒,我揣著相機與錄音路狮,去河邊找鬼。 笑死蔚约,一個胖子當著我的面吹牛奄妨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播苹祟,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼砸抛,長吁一口氣:“原來是場噩夢啊……” “哼评雌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起直焙,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤景东,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后奔誓,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斤吐,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年厨喂,在試婚紗的時候發(fā)現(xiàn)自己被綠了和措。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蜕煌,死狀恐怖臼婆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情幌绍,我是刑警寧澤颁褂,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站傀广,受9級特大地震影響颁独,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜伪冰,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一誓酒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧贮聂,春花似錦靠柑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至耻警,卻和暖如春隔嫡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甘穿。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工腮恩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人温兼。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓秸滴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親募判。 傳聞我的和親對象是個殘疾皇子荡含,可洞房花燭夜當晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容