JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式實(shí)例總結(jié)
本文實(shí)例總結(jié)了JS正則表達(dá)式貪婪和非貪婪模式。分享給大家供大家參考,具體如下:
首先上一段js代碼:
<script> try{ str="<p>abcdefg</p><p>abcdefghijkl</p>"; re1=str.match(/<p>[\W\w]+?<\/p>/ig); alert("非貪婪模式:\r\n\r\n1:"+re1[0]+"\r\n2:"+re1[1]); re1=str.match(/<p>[\W\w]+<\/p>/ig); alert("貪婪模式:\r\n\r\n"+re1); re1=str.match(/<p>(.+?)<\/p>/i); alert("非貪婪模式,且不要標(biāo)記:\r\n\r\n1:"+re1[1]); re1=str.match(/<p>(.+)<\/p>/i); alert("貪婪模式,且不要標(biāo)記:\r\n\r\n"+re1[1]); }catch(e){ alert(e.description) } </script>
下邊給出一些例子:
貪婪模式:
在使用修飾匹配次數(shù)的特殊符號(hào)時(shí),有幾種表示方法可以使同一個(gè)表達(dá)式能夠匹配不同的次數(shù),比如:"{m,n}", "{m,}", "?", "*", "+",具體匹配的次數(shù)隨被匹配的字符串而定。這種重復(fù)匹配不定次數(shù)的表達(dá)式在匹配過(guò)程中,總是盡可能多的匹配。比如,針對(duì)文本 "dxxxdxxxd",舉例如下:
貪婪模式:
表達(dá)式 | 匹配結(jié)果 |
---|---|
(d)(\w+) | "\w+" 將匹配第一個(gè) "d" 之后的所有字符 "xxxdxxxd" |
(d)(\w+)(d) | "\w+" 將匹配第一個(gè) "d" 和最后一個(gè) "d" 之間的所有字符 "xxxdxxx"。 雖然 "\w+" 也能夠匹配上最后一個(gè) "d",但是為了使整個(gè)表達(dá)式匹配成功, "\w+" 可以 "讓出" 它本來(lái)能夠匹配的最后一個(gè) "d" |
由此可見(jiàn),"\w+" 在匹配的時(shí)候,總是盡可能多的匹配符合它規(guī)則的字符。
雖然第二個(gè)舉例中,它沒(méi)有匹配最后一個(gè) "d",但那也是為了讓整個(gè)表達(dá)式能夠匹配成功。
同理,帶 "*" 和 "{m,n}" 的表達(dá)式都是盡可能地多匹配,帶 "?" 的表達(dá)式在可匹配可不匹配的時(shí)候,
也是盡可能的 "要匹配"。這 種匹配原則就叫作 "貪婪" 模式 。
非貪婪模式:
在修飾匹配次數(shù)的特殊符號(hào)后再加上一個(gè) "?" 號(hào),則可以使匹配次數(shù)不定的表達(dá)式盡可能少的匹配,使可匹配可不匹配的表達(dá)式,盡可能的 "不匹配"。這種匹配原則叫作 "非貪婪" 模式,也叫作 "勉強(qiáng)" 模式。如果少匹配就會(huì)導(dǎo)致整個(gè)表達(dá)式匹配失敗的時(shí)候,與貪婪模式類似,非貪婪模式會(huì)最小限度的再匹配一些,以使整個(gè)表達(dá)式匹配成功。舉例如下,針對(duì)文本 "dxxxdxxxd" 舉例:
表達(dá)式 | 匹配結(jié)果 |
---|---|
(d)(\w+?) | "\w+?" 將盡可能少的匹配第一個(gè) "d" 之后的字符, 結(jié)果是:"\w+?" 只匹配了一個(gè) "x" |
(d)(\w+?)(d) | 為了讓整個(gè)表達(dá)式匹配成功,"\w+?" 不得不匹配 "xxx" 才可以讓后邊的 "d" 匹配, 從而使整個(gè)表達(dá)式匹配成功。因此,結(jié)果是:"\w+?" 匹配 "xxx" |
更多的情況,舉例如下:
舉例1:表達(dá)式 "<td>(.*)</td>" 與字符串 "<td><p>aa</p></td> <td><p>bb</p></td>" 匹配時(shí),匹配的結(jié)果是:成功;匹配到的內(nèi)容是 "<td><p>aa</p></td> <td><p>bb</p></td>" 整個(gè)字符串, 表達(dá)式中的 "</td>" 將與字符串中最后一個(gè) "</td>" 匹配。
舉例2:相比之下,表達(dá)式 "<td>(.*?)</td>" 匹配舉例1中同樣的字符串時(shí),將只得到 "<td><p>aa</p></td>", 再次匹配下一個(gè)時(shí),可以得到第二個(gè) "<td><p>bb</p></td>"。
PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:
JavaScript正則表達(dá)式在線測(cè)試工具:
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達(dá)式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
淺談webpack構(gòu)建工具配置和常用插件總結(jié)
這篇文章主要介紹了淺談webpack構(gòu)建工具配置和常用插件總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-05-05登陸成功后自動(dòng)計(jì)算秒數(shù)執(zhí)行跳轉(zhuǎn)
本文實(shí)現(xiàn)的是這樣的一個(gè)功能登陸成功后自動(dòng)查秒跳轉(zhuǎn),具體示例如下,不了解的朋友可以學(xué)習(xí)下哦2014-01-01JS ES6展開(kāi)運(yùn)算符的幾個(gè)妙用
這篇文章主要介紹了JS ES6展開(kāi)運(yùn)算符的幾個(gè)妙用,想了解ES6的同學(xué),可以參考下2021-04-04微信小程序?qū)崿F(xiàn)自定義動(dòng)畫(huà)彈框/提示框的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自定義動(dòng)畫(huà)彈框/提示框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11JS實(shí)現(xiàn)下拉菜單列表與登錄注冊(cè)彈窗效果
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)下拉菜單列表與登錄注冊(cè)彈窗效果。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
現(xiàn)在很多網(wǎng)站都有這樣的一個(gè)效果,當(dāng)頁(yè)面滾動(dòng)到一定高度時(shí),菜單欄會(huì)固定在頁(yè)面頂部;該效果在 ie6 下不支持,因?yàn)閕e6不支持 position:fixed,效果很不錯(cuò),感興趣的朋友可以了解下啊2013-01-01javascript 動(dòng)態(tài)生成私有變量訪問(wèn)器
創(chuàng)建一個(gè)新的用戶對(duì)象,接受一個(gè)有許多屬性的對(duì)象作為參數(shù)2009-12-12EasyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹(shù)節(jié)點(diǎn)
這篇文章主要介紹了EasyUi combotree 實(shí)現(xiàn)動(dòng)態(tài)加載樹(shù)節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2016-04-04小程序使用scroll-view實(shí)現(xiàn)一個(gè)滑動(dòng)列表功能
scroll-view可實(shí)現(xiàn)一個(gè)可滾動(dòng)的視圖區(qū)域,下面這篇文章主要給大家介紹了關(guān)于小程序使用scroll-view實(shí)現(xiàn)一個(gè)滑動(dòng)列表功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08溫習(xí)Javascript基礎(chǔ)語(yǔ)法之詞法結(jié)構(gòu)
javascript是一門(mén)簡(jiǎn)單的語(yǔ)言,也是一門(mén)復(fù)雜的語(yǔ)言。這篇文章主要介紹了溫習(xí)Javascript基礎(chǔ)語(yǔ)法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-05-05