網(wǎng)易微專業(yè)之《前端工程師》學(xué)習(xí)筆記(11)-JS正則

正則表達(dá)式RegExp

兩種方式:

/pattern/attrs
new RegExp(pattern,attrs)


regexObj.test(str)
測(cè)試正則表達(dá)式與指定字符串是否匹配

/13566668888/.test("1356666888");  //false
/13566668888/.test("13566668888");   //true
/13566668888/.test("x1356666888y");   //true

第三個(gè)也是true的补胚,不是我們希望的绳矩,那要怎么辦呢灵份。

就要用到”錨點(diǎn)“

錨點(diǎn)

錨點(diǎn)是用來干什么的呢,它是用來匹配位置的

  • ^:起始位置
/^http:/.test("http://www.163.com");  //true
/^http:/.test("ahttp://www.163.com");  //false
  • $:結(jié)尾位置
/\.jpg$/.test("1.jpg");  //true
/\.jpg$/.test("1.jpga");   //false

  • \b:?jiǎn)卧~邊界
/\bis\b/.test("this");  //false
/\bis\b/.test("this is tom");   //true

學(xué)過錨點(diǎn)了之后阶捆,我們?cè)賮砜醋畛醯哪莻€(gè)問題拓春,我們可以把它改成下面的正則語句释簿,然后測(cè)試那個(gè)剛才讓我們不是很滿意的問題。

/^13566668888$/

/^13566668888$/.test("x13566668888y");  //false
/^13566668888$/.test("13566668888");  //true

但是呢痘儡,我們比如做個(gè)下面的測(cè)試:

···
/^13566668888$/.test("13512345678"); //false
···

這個(gè)結(jié)果顯然也不是我們想要的辕万,我們想要的結(jié)果是做一個(gè)通用的手機(jī)號(hào)碼測(cè)試的正則表達(dá)式,那這個(gè)怎么辦呢沉删,就需要用到第二個(gè)我們要講的知識(shí)點(diǎn)——”字符類“

字符類

字符類是什么呢渐尿,是匹配一類字符中的一個(gè)。

  • [abc]:a或b或c矾瑰;
  • [0-9]:一個(gè)數(shù)字砖茸; [^0-9]:非數(shù)字的一個(gè)字符;
  • [a-z]:一個(gè)字母殴穴;
  • .:任一字符(換行除外)凉夯;

學(xué)了字符類以后呢,我們就可以把我們最初的正則表達(dá)式再重新調(diào)整下采幌,然后測(cè)試下能不能測(cè)試通用的手機(jī)號(hào)碼劲够。

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13512345678"); //true

但是問題又來了,我們會(huì)不會(huì)覺得這[0-9]寫的太長(zhǎng)了休傍,能不能簡(jiǎn)寫呢征绎,這個(gè)問題的解決方法,我們就要用到正則表達(dá)式的第三個(gè)知識(shí)點(diǎn)——元字符磨取。

元字符

元字符是什么呢人柿,是具有特殊意義的字符柴墩。

其實(shí)我們上面已經(jīng)介紹過一些元字符了,比如:

  • ^凫岖、$江咳、\b

另外還有一些元字符:

  • \d:[0-9];\D:[^\d]哥放;

  • \s:空白符歼指;\S:[^\s]表示非空白符;

  • \w:[A-Za-z0-9_]婶芭;\W:[^\w]

有了元字符东臀,我們?cè)賮砀牧枷挛覀兊倪@個(gè)正則表達(dá)式着饥。

/^1\d\d\d\d\d\d\d\d\d\d$/
/^1\d\d\d\d\d\d\d\d\d\d$/.test("13512345678"); //true

那么問題又來了犀农,這個(gè)改良過的正則表達(dá)式,還是不夠簡(jiǎn)練宰掉,里面有10個(gè)\b呵哨,怎么樣寫的更加簡(jiǎn)練些呢,這個(gè)時(shí)候我們就要用到第四個(gè)知識(shí)點(diǎn)——量詞轨奄。

量詞

什么是量詞呢孟害,就是出現(xiàn)的次數(shù)。

  • {m,n}:m到n次

  • *:{0,}表示出現(xiàn)0次到無窮次

  • 挪拟?:{0,1}表示出現(xiàn)0次到1次

  • +:{1,}表示出現(xiàn)1次到 無窮次

看栗子

/https?:/.test("http://www.163.com"); //true
/https?:/.test("https://www.163.com"); //true
/https?:/.test("httpss://www.163.com"); //true

現(xiàn)在挨务,有了這個(gè)量詞以后,我們的匹配手機(jī)號(hào)碼的表達(dá)式也可以調(diào)整改良下玉组。

/^1\d{10}$/
/^1\d{10}$/.test("13512345678");  //true

講完了匹配手機(jī)號(hào)碼的正則表達(dá)式谎柄,我們?cè)賮砜纯矗齽t表達(dá)式中還有哪些知識(shí)點(diǎn)需要講惯雳。

轉(zhuǎn)義符

什么是轉(zhuǎn)義符朝巫,就是需要匹配的字符是元字符。比如:

/^http:\/\//

/@163\.com$/

接下來再看一個(gè)需求石景,比如我們想要匹配網(wǎng)易的郵箱劈猿,但是比如別的郵箱都是報(bào)false的,這個(gè)怎么處理呢潮孽。網(wǎng)易郵箱有@126.com|@163.com|@188.com這幾種揪荣。

要怎么寫呢,做這個(gè)需求的時(shí)候往史,我們就要用到正則表達(dá)式中另一個(gè)知識(shí)點(diǎn)——多選分支仗颈。

/thi(c|n)k/===/thi[cn]k/
/\.(png|jpg|jpeg|gif)$/

照著上面的模樣,我們可以試試怎么寫匹配網(wǎng)易郵箱的正則表達(dá)式怠堪。

/(.+)@(126|163|188)\.com$/

下面要說的一個(gè)復(fù)雜的實(shí)例:

假如我們要在這上面的地址的地方揽乱,獲取它子串的內(nèi)容名眉,要怎么辦呢,這就要用到正則表達(dá)式凰棉,又一個(gè)知識(shí)點(diǎn)——捕獲损拢、

捕獲

捕獲要做的事情呢,就是保存匹配到的字符串撒犀,日后再用福压。那么捕獲的語法呢:

  • ():捕獲
  • (?:):不捕獲
    比如上面的例子中有用到()的:
/(.+)@(126|163|188)\.com$/

捕獲的東西就會(huì)放在()中或舞,那么要怎么使用捕獲到的東西呢荆姆?

str.match(regexp);

用這個(gè)來獲取匹配的字符串。

var url="http://blog.163.com/album?id=1#comment";
var reg=/^(https?:)\/\/(^\/)+(\/[^\?]*)?(\?[^#]*)?(#.*)?$/;
var arr= url.match(reg);
var protocol=arr[1];
var host=arr[2];
var pathname=arr[3];
var search=arr[4];
var hash=arr[5];



再來看下一個(gè)需求:

要把5替換成5.00的價(jià)格形式的映凳,怎么替換呢胆筒,就要用到下面的一個(gè)方法:

str.replace(regexp/substr,replacement)

看實(shí)例代碼:

var str="the price of tomato is 5,the price of apple is 10.";
str.replace(/(\d+)/g,"$1.00");
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市诈豌,隨后出現(xiàn)的幾起案子仆救,更是在濱河造成了極大的恐慌,老刑警劉巖矫渔,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彤蔽,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡庙洼,警方通過查閱死者的電腦和手機(jī)顿痪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來油够,“玉大人蚁袭,你說我怎么就攤上這事〉” “怎么了撕阎?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)碌补。 經(jīng)常有香客問我虏束,道長(zhǎng),這世上最難降的妖魔是什么厦章? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任镇匀,我火速辦了婚禮,結(jié)果婚禮上袜啃,老公的妹妹穿的比我還像新娘汗侵。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布晰韵。 她就那樣靜靜地躺著发乔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雪猪。 梳的紋絲不亂的頭發(fā)上栏尚,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音只恨,去河邊找鬼译仗。 笑死,一個(gè)胖子當(dāng)著我的面吹牛官觅,可吹牛的內(nèi)容都是我干的纵菌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼休涤,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼咱圆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起滑绒,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤闷堡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后疑故,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡弯菊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年纵势,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片管钳。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钦铁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出才漆,到底是詐尸還是另有隱情牛曹,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布醇滥,位于F島的核電站黎比,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏鸳玩。R本人自食惡果不足惜阅虫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望不跟。 院中可真熱鬧颓帝,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至瘪板,卻和暖如春米诉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背篷帅。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工史侣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人魏身。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓惊橱,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親箭昵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子税朴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

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

  • 初衷:看了很多視頻、文章家制,最后卻通通忘記了正林,別人的知識(shí)依舊是別人的,自己卻什么都沒獲得颤殴。此系列文章旨在加深自己的印...
    DCbryant閱讀 4,014評(píng)論 0 20
  • 溫馨提示:文章很長(zhǎng)很長(zhǎng)瞳脓,保持耐心,必要時(shí)可以跳著看澈侠,當(dāng)然用來查也是不錯(cuò)的劫侧。 正則啊,就像一座燈塔哨啃,當(dāng)你在字符串的海...
    Stinson閱讀 4,337評(píng)論 2 82
  • 轉(zhuǎn)自: JS正則表達(dá)式一條龍講解烧栋,從原理和語法到JS正則、ES6正則擴(kuò)展棘催,最后再到正則實(shí)踐思路 溫馨提示:文章很長(zhǎng)...
    前端渣渣閱讀 1,812評(píng)論 1 32
  • 正則表達(dá)式到底是什么東西劲弦?字符是計(jì)算機(jī)軟件處理文字時(shí)最基本的單位,可能是字母醇坝,數(shù)字邑跪,標(biāo)點(diǎn)符號(hào)次坡,空格,換行符画畅,漢字等...
    獅子挽歌閱讀 2,147評(píng)論 0 9
  • 夕陽西下白鷺歸 淺搖羽扇念卿回 落紅流水愁相對(duì) 楊柳青青碧波碎 黃花知倦蝶厭飛 懷舊愿為陳香醉
    秋之楓葉閱讀 246評(píng)論 0 0