js正則匹配出所有圖片及圖片地址src的方法
本文實例講述了js正則匹配出所有圖片及圖片地址src的方法。分享給大家供大家參考。具體分析如下:
有很多時候我們需要用到文章里面的圖片,而且主要是用到它的圖片地址,這個時候我們需要通過正則匹配出圖片標(biāo)簽,然后做到我們需要的數(shù)據(jù)
平時也沒怎么用正則,一不學(xué)就忘,最近項目需要,然后又去goole了,好亂!一搜一大堆,也不是我想要的,最后把自己留一個已被后用:
實現(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
希望本文所述對大家的javascript程序設(shè)計有所幫助。
- js正則表達(dá)式之$1$2$3$4$5$6$7$8$9屬性,返回子匹配的結(jié)果
- js匹配網(wǎng)址url的正則表達(dá)式集合
- JS正則表達(dá)式匹配檢測各種數(shù)值類型(數(shù)字驗證)
- String字符串匹配javascript 正則表達(dá)式
- JavaScript正則表達(dá)式匹配 div style標(biāo)簽
- js實現(xiàn)正則匹配中文標(biāo)點符號的方法
- js正則表達(dá)式匹配數(shù)字字母下劃線等
- js使用正則子表達(dá)式匹配首字母與尾字母相同單詞的方法
- js 正則表達(dá)式學(xué)習(xí)筆記之匹配字符串
- javascript正則匹配漢字、數(shù)字、字母、下劃線
- 解決js正則匹配換行問題實現(xiàn)代碼
- JS正則子匹配實例分析
相關(guān)文章
JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04利用Vconsole和Fillder進行移動端抓包調(diào)試方法
這篇文章主要介紹了利用Vconsole和Fillder進行移動端抓包調(diào)試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03用nodejs訪問ActiveX對象,以操作Access數(shù)據(jù)庫為例。
有人提問“如果用nodejs訪問sql server?” 找了找資料,發(fā)現(xiàn)有兩類解決方法,使用第三方nodejs插件2011-12-12前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的實現(xiàn)
近期在學(xué)習(xí)的時候,碰到一個關(guān)于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關(guān)于前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的相關(guān)資料,需要的朋友可以參考下2022-10-10js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果
本文主要分享了js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧2017-02-02實例講解DataTables固定表格寬度(設(shè)置橫向滾動條)
下面小編就為大家?guī)硪黄獙嵗v解DataTables固定表格寬度(設(shè)置橫向滾動條)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07