js正則匹配出所有圖片及圖片地址src的方法
本文實(shí)例講述了js正則匹配出所有圖片及圖片地址src的方法。分享給大家供大家參考。具體分析如下:
有很多時(shí)候我們需要用到文章里面的圖片,而且主要是用到它的圖片地址,這個(gè)時(shí)候我們需要通過正則匹配出圖片標(biāo)簽,然后做到我們需要的數(shù)據(jù)
平時(shí)也沒怎么用正則,一不學(xué)就忘,最近項(xiàng)目需要,然后又去goole了,好亂!一搜一大堆,也不是我想要的,最后把自己留一個(gè)已被后用:
實(shí)現(xiàn):通過js正則匹配出所有圖片及所有圖片地址src。
思路:1.匹配出圖片img標(biāo)簽(即匹配出所有圖片),過濾其他不需要的字符
從匹配出來的結(jié)果(img標(biāo)簽中)循環(huán)匹配出圖片地址(即src屬性)
代碼:(你可以復(fù)制到本地試試)
<script type="text/javascript"> //思路分兩步:作者(yanue). //1,匹配出圖片img標(biāo)簽(即匹配出所有圖片),過濾其他不需要的字符 //2.從匹配出來的結(jié)果(img標(biāo)簽中)循環(huán)匹配出圖片地址(即src屬性) var str = "this is test string <img src=\"http:yourweb.com/test.jpg\" width='50' > 123 and the end <img src=\"所有地址也能匹配.jpg\" /> 33! <img src=\"/uploads/attached/image/20120426/20120426225658_92565.png\" alt=\"\" />" //匹配圖片(g表示匹配所有結(jié)果i表示區(qū)分大小寫) var imgReg = /<img.*?(?:>|\/>)/gi; //匹配src屬性 var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; var arr = str.match(imgReg); alert('所有已成功匹配圖片的數(shù)組:'+arr); for (var i = 0; i < arr.length; i++) { var src = arr[i].match(srcReg); //獲取圖片地址 if(src[1]){ alert('已匹配的圖片地址'+(i+1)+':'+src[1]); } //當(dāng)然你也可以替換src屬性 if (src[0]) { var t = src[0].replace(/src/i, "href"); //alert(t); } } </script>
PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:
JavaScript正則表達(dá)式在線測試工具:
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js正則表達(dá)式之$1$2$3$4$5$6$7$8$9屬性,返回子匹配的結(jié)果
- js匹配網(wǎng)址url的正則表達(dá)式集合
- JS正則表達(dá)式匹配檢測各種數(shù)值類型(數(shù)字驗(yàn)證)
- String字符串匹配javascript 正則表達(dá)式
- JavaScript正則表達(dá)式匹配 div style標(biāo)簽
- js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號(hào)的方法
- js正則表達(dá)式匹配數(shù)字字母下劃線等
- js使用正則子表達(dá)式匹配首字母與尾字母相同單詞的方法
- js 正則表達(dá)式學(xué)習(xí)筆記之匹配字符串
- javascript正則匹配漢字、數(shù)字、字母、下劃線
- 解決js正則匹配換行問題實(shí)現(xiàn)代碼
- JS正則子匹配實(shí)例分析
相關(guān)文章
JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動(dòng)態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法
這篇文章主要介紹了利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03利用transition實(shí)現(xiàn)文字上下抖動(dòng)的效果
這篇文章主要給大家介紹了利用transition屬性如何實(shí)現(xiàn)文字上下抖動(dòng)的效果,文中給出了詳細(xì)的介紹和完整的實(shí)例代碼,相信對(duì)大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友們下面來一起看看吧。2017-01-01用nodejs訪問ActiveX對(duì)象,以操作Access數(shù)據(jù)庫為例。
有人提問“如果用nodejs訪問sql server?” 找了找資料,發(fā)現(xiàn)有兩類解決方法,使用第三方nodejs插件2011-12-12前端HTTP發(fā)POST請(qǐng)求攜帶參數(shù)與后端接口接收參數(shù)的實(shí)現(xiàn)
近期在學(xué)習(xí)的時(shí)候,碰到一個(gè)關(guān)于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關(guān)于前端HTTP發(fā)POST請(qǐng)求攜帶參數(shù)與后端接口接收參數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
本文主要分享了js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02實(shí)例講解DataTables固定表格寬度(設(shè)置橫向滾動(dòng)條)
下面小編就為大家?guī)硪黄獙?shí)例講解DataTables固定表格寬度(設(shè)置橫向滾動(dòng)條)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07