JavaScript 正則表達式(1)


之前在前端群和一群人聊天,有人提到了正則表達式牵素,很多人都說,沒必要深入了解正則表達式澄者,拿來主義笆呆,有需要的時候直接網(wǎng)上找,都有現(xiàn)成的粱挡,我并不吃驚赠幕,因為我也是拿來主義,沒有系統(tǒng)的學習過询筏,或者說了解過正則表達式榕堰,但是出于好奇,百度了一下正則表達式嫌套,發(fā)現(xiàn)它并沒有想象中那么簡單逆屡,一旦真正學會它,我覺得在以后做項目中踱讨,會輕松很多魏蔗,或者說思路會廣闊很多,所以準備自己寫一點學習正則的感悟和理解痹筛,以供自己以后復習莺治。


申明正則表達式##

在JavaScript中,正則表達式其實是正則對象帚稠,也可以說成RegExp對象谣旁,既然是對象,那么就和對象聲明一樣滋早,有2種方式聲明榄审,一種是直接字面量聲明,如下:

var a = /^cat/i;

上述代碼很簡單杆麸,就是用字面量的方式創(chuàng)建了一個正則表達式瘟判。它的結構大概是這樣的:

var 正則的名字 = /正則表達式/正則的標志(行為)

其中最復雜的應該就是正則表達式部分了怨绣,這個先不提,慢慢學吧拷获。正則的標志有以下3種:

  • g:表示的是全局模式篮撑,在這種模式下,這條正則規(guī)則將會去匹配你規(guī)定的所有字符串匆瓜,而非發(fā)現(xiàn)一個匹配項就停止赢笨。
  • i:表示匹配的字符串不區(qū)分大小寫,在上述例子中驮吱,就可以理解為茧妒,匹配以cat,或者Cat左冬,或者CAT等等開頭的段落桐筏。
  • m:表示多行模式,在這種模式下到達了一行文本的末尾會繼續(xù)再下一行查找是否存在于之相匹配的拇砰。

正則的行為可以有多個梅忌。當然,還有第二種申明正則的方式除破,構造函數(shù)聲明(new關鍵字)牧氮,具體如下:

var a = new RegExp('^cat','i');

代碼也很簡單,結構大概是這樣的:

var 正則的名字 = new RegExp('正則表達式'瑰枫,'正則的標志')

2種方式都可以創(chuàng)建正則表達式踱葛,但是有一點要注意,字面量聲明是在//里面聲明光坝,而構造函數(shù)聲明傳進去的參數(shù)是字符串尸诽,所有遇到一些\n這樣轉義字符,需要雙重轉義盯另,變成\\\n逊谋,下面列出了一些例子:

字面量模式 構造函數(shù)模式的字符串
/\[bc\]at/ '\\[bc\\]at'
/\.at/ '\\.at'
/\w\\hello\123/ '\\w\\\\hello\\\\123'

正則表達式的基礎##

再上一個例子中,我們看到了

var a = /^cat/i

其中^cat土铺,^元字符胶滋,cat為普通字符,元字符的意思就是說悲敷,比起普通字符有更多的含義究恤,比如^的意思就是一行的開始,與之相對應的還有$元字符后德,代表一行的結束部宿。
^cat可以理解為,匹配以cat開頭的行。當然理张,還有更準確的理解赫蛇,匹配以c作為一行的第一個字符,緊接著是a雾叭,然后是t的文本悟耘。因為正則匹配都是按照字符而不是單詞,所以這樣理解會更加準確一些织狐。
下面總結一下常用的基礎的正則表達式元字符:

元字符 名稱 匹配對象
. 點號 單個任意字符
[···] 字符組 并列出的任意字符
[ ^···] 排除型字符組 未列出的任意字符
^ 脫字符 行的起始位置
$ 美元符 行的結束位置
< 反斜線-小于 單詞的起始位置
\> 反斜線-大于 單詞的結束位置
豎線 匹配分隔兩邊的任意一個表達式
(···) 括號 限制豎線的作用范圍暂幼,分組匹配,反向引用等

表示重復的元字符:

元字符 次數(shù)下限 次數(shù)上限 含義
? 1 可以出現(xiàn)移迫,也可以只出現(xiàn)一次(單次可選)
* 可以出現(xiàn)無窮多次旺嬉,也可以不出現(xiàn)(任意次數(shù)均可)
+ 1 可以出現(xiàn)無窮多次,但至少要出現(xiàn)一次(至少一次)

規(guī)定重復出現(xiàn)的次數(shù)范圍:{min,max}厨埋,如:

var a = /[0-9]{1,5}/  //匹配0至9的任意數(shù)字出現(xiàn)1至5次的行

正則實例方法##

JavaScript中邪媳,正則提供了2個方法。exec()test()荡陷。

exec()是專門為捕獲組而設計的雨效,它接受一個參數(shù),即要作用的字符串亲善,然后返回第一個匹配項信息的數(shù)組(沒有匹配項返回null)设易,該數(shù)組中逗柴,第一項是整個模式匹配的字符串蛹头,其他項是與模式中捕獲組的字符串(如果沒有捕獲組則只含有一項)。除此之外戏溺,該數(shù)組還包含2個屬性渣蜗,inputindexinput為作用的字符串旷祸,index為匹配項在字符串中的位置耕拷。具體例子如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = reg.exec(text);
console.log(match[0]);//CATCatCAt
console.log(match[1]);//CAt
console.log(match.index);//9
console.log(match.input);//123456789CATCatCAtnnlsnfl

test()方法相對來說就簡單一點了,它接受一個字符串參數(shù)托享,匹配成功骚烧,返回true,匹配失敗闰围,返回false赃绊,所以常用在if判斷句中。具體代碼如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var reg2 = /(caat)+/gi;
var match = reg.test(text);
var match2 = reg.test(text);
console.log(match);//true
console.log(match2);//false

String對象里的正則##

string對象有很多方法都是支持正則的羡榴,比如search(),match()等等碧查。下面,我們就來總結一下,string支持正則的方法忠售。


search()
search()方法支持傳入一個參數(shù)传惠,該參數(shù)可以是普通的字符串,也可以是一個正則表達式稻扬,如果是字符串卦方,那就返回第一個符合條件的位置,同理腐螟,如果是正則表達式愿汰,就返回匹配正則表達式的位置,如果匹配失敗乐纸,返回-1衬廷,具體代碼如下:

var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = text.search(reg);
var match2 = text.search('cat');
console.log(match);//9
console.log(match2);//-1

值得一提的是,在search()中汽绢,會忽略正則表達式的g標志吗跋,并且總是從字符串左向右匹配,一旦匹配到第一個符合條件的項就會立馬結束匹配宁昭,并返回項所在的位置跌宛。


match()
match()方法支持傳入一個參數(shù),該參數(shù)可以是普通的字符串积仗,也可以是一個正則表達式疆拘,如果是字符串,那就返回一個以第一個匹配的字符串寂曹,并且有index,input屬性的數(shù)組哎迄,其中,index是第一個匹配成功的位置隆圆,input是字符串本身漱挚,如果匹配失敗,則返回null渺氧;同理旨涝,如果是正則表達式,那就返回所有匹配成功的字符串組成的數(shù)組侣背,并有input白华,index,具體代碼如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /cat/gi;
var reg2 = /c.t/i;
var match = text.match(reg);
var match2 = text.match('cat');
var match3 = text.match(reg2);
console.log(match);//["cat", "CAT", "Cat", "CAt", "cAt"]
console.log(match2);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]
console.log(match3);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]

值得一提的是贩耐,如果正則表達式是全局匹配弧腥,即有g標志,返回的只是一個所有符合條件的項的數(shù)組憔杨,而沒有index鸟赫,input屬性。


replace()
replace()方法接受2個參數(shù),第一個參數(shù)是需要匹配的字符串或者正則表達式抛蚤,第二個參數(shù)是替換的字符串台谢。然后返回新的字符串。具體代碼如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)+/gi;
var match = text.replace(reg,'dog');
var match2 = text.replace('cat','dog');
console.log(match);//123456789dognnlsnfldog
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt

還沒完K昃朋沮!Perl中,我們知道有括號的分組匹配缀壤,即樊拓,用括號能夠‘記住’他們包含子表達式匹配的文本,在JavaScript中replace()中也有與之類似的功能塘慕,不過寫法不一樣筋夏,JavaScript,使用的是$图呢,可以用$來得到括號里面的值并保留条篷,具體如下:

var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)?(cat)/gi;
var match = text.replace(reg,' 1=$1 2=$2 ');
var match2 = text.replace('cat','dog');
console.log(match);//123456789 1=cat 2=CAT  1=Cat 2=CAt nnlsnflcAt
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt

使用$1可以去到第一個括號的值并保留,同理蛤织,可以一直向下取值赴叹。
當然,不僅僅只有$number的用法指蚜,具體還有

符號 含義
1....99 與regexp中的第1到第99個子表達式相匹配的文本乞巧。
$& 與RegExp相匹配的子字符串。
lastMatch或RegExp["$_"] 返回任何正則表達式搜索過程中的最后匹配的字符摊鸡。
lastParen或 RegExp["$+"] 返回任何正則表達式查找過程中最后括號的子匹配绽媒。
leftContext或RegExp["$`"] 返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。
rightContext或RegExp["$'"] 返回被搜索的字符串中從最后一個匹配位置開始到字符串結尾之間的字符柱宦。

split()
split()接受2個參數(shù)些椒, 第一個參數(shù)是一個字符串或者正則表達式播瞳,第二個參數(shù)可填可不填掸刊,是限制返回數(shù)組的最大長度。通過匹配字符串或者正則表達式赢乓,來對字符串進行切割忧侧,并返回一個切割的數(shù)組。具體代碼如下:

var text = '1,2-3,4.5,6-7*8,9'
var reg = /[,-.*]*/gi;
var match = text.split(reg);
var match2 = text.split(',');
var match3 = text.split(reg,3);
console.log(match);//["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(match2);//["1", "2-3", "4.5", "6-7*8", "9"]
console.log(match3);//["1", "2", "3"]

JavaScript 正則表達式(1)
JavaScript 正則表達式(2)
JavaScript 正則表達式(3)
JavaScript 正則表達式(4)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末牌芋,一起剝皮案震驚了整個濱河市蚓炬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌躺屁,老刑警劉巖肯夏,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡驯击,警方通過查閱死者的電腦和手機烁兰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徊都,“玉大人沪斟,你說我怎么就攤上這事∠窘茫” “怎么了主之?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長李根。 經(jīng)常有香客問我槽奕,道長,這世上最難降的妖魔是什么房轿? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任史翘,我火速辦了婚禮,結果婚禮上冀续,老公的妹妹穿的比我還像新娘琼讽。我一直安慰自己,他們只是感情好洪唐,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布钻蹬。 她就那樣靜靜地躺著,像睡著了一般凭需。 火紅的嫁衣襯著肌膚如雪问欠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天粒蜈,我揣著相機與錄音顺献,去河邊找鬼。 笑死枯怖,一個胖子當著我的面吹牛注整,可吹牛的內容都是我干的。 我是一名探鬼主播度硝,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼肿轨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蕊程?” 一聲冷哼從身側響起椒袍,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎藻茂,沒想到半個月后驹暑,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玫恳,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年优俘,在試婚紗的時候發(fā)現(xiàn)自己被綠了纽窟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡兼吓,死狀恐怖臂港,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情视搏,我是刑警寧澤审孽,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站浑娜,受9級特大地震影響佑力,放射性物質發(fā)生泄漏。R本人自食惡果不足惜筋遭,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一打颤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧漓滔,春花似錦编饺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至豁鲤,卻和暖如春秽誊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背琳骡。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工锅论, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人楣号。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓最易,卻偏偏與公主長得像,于是被迫代替她去往敵國和親竖席。 傳聞我的和親對象是個殘疾皇子耘纱,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,216評論 0 4
  • 初衷:看了很多視頻敬肚、文章毕荐,最后卻通通忘記了,別人的知識依舊是別人的艳馒,自己卻什么都沒獲得憎亚。此系列文章旨在加深自己的印...
    DCbryant閱讀 3,993評論 0 20
  • 推薦幾個正則表達式編輯器 Debuggex :https://www.debuggex.com/ PyRegex:...
    木易林1閱讀 11,480評論 9 151
  • 很久以前第美,有一位騎士蝶锋,他認為自己是一個善良又有愛心的人。于是他身穿盔甲什往,不停的拯救公主扳缕、打倒惡龍,受到人民的無限愛...
    時光蜜糖閱讀 1,008評論 3 51
  • 安卓别威,電腦:ADSafe 蘋果:樂網(wǎng) 瀏覽網(wǎng)頁躯舔、看視頻過濾廣告神器 -----------------------...
    只是一點閱讀 241評論 0 1