js正則匹配出所有圖片及圖片地址src的方法
本文實例講述了js正則匹配出所有圖片及圖片地址src的方法。分享給大家供大家參考。具體分析如下:
有很多時候我們需要用到文章里面的圖片,而且主要是用到它的圖片地址,這個時候我們需要通過正則匹配出圖片標簽,然后做到我們需要的數(shù)據(jù)
平時也沒怎么用正則,一不學就忘,最近項目需要,然后又去goole了,好亂!一搜一大堆,也不是我想要的,最后把自己留一個已被后用:
實現(xiàn):通過js正則匹配出所有圖片及所有圖片地址src。
思路:1.匹配出圖片img標簽(即匹配出所有圖片),過濾其他不需要的字符
從匹配出來的結果(img標簽中)循環(huán)匹配出圖片地址(即src屬性)
代碼:(你可以復制到本地試試)
<script type="text/javascript"> //思路分兩步:作者(yanue). //1,匹配出圖片img標簽(即匹配出所有圖片),過濾其他不需要的字符 //2.從匹配出來的結果(img標簽中)循環(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表示匹配所有結果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]); } //當然你也可以替換src屬性 if (src[0]) { var t = src[0].replace(/src/i, "href"); //alert(t); } } </script>
PS:這里再為大家提供2款非常方便的正則表達式工具供大家參考使用:
JavaScript正則表達式在線測試工具:
http://tools.jb51.net/regex/javascript
正則表達式在線生成工具:
http://tools.jb51.net/regex/create_reg
希望本文所述對大家的javascript程序設計有所幫助。
- js正則表達式之$1$2$3$4$5$6$7$8$9屬性,返回子匹配的結果
- js匹配網(wǎng)址url的正則表達式集合
- JS正則表達式匹配檢測各種數(shù)值類型(數(shù)字驗證)
- String字符串匹配javascript 正則表達式
- JavaScript正則表達式匹配 div style標簽
- js實現(xiàn)正則匹配中文標點符號的方法
- js正則表達式匹配數(shù)字字母下劃線等
- js使用正則子表達式匹配首字母與尾字母相同單詞的方法
- js 正則表達式學習筆記之匹配字符串
- javascript正則匹配漢字、數(shù)字、字母、下劃線
- 解決js正則匹配換行問題實現(xiàn)代碼
- JS正則子匹配實例分析
相關文章
JS動態(tài)修改iframe內嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動態(tài)修改iframe內嵌網(wǎng)頁地址的方法,涉及javascript動態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04用nodejs訪問ActiveX對象,以操作Access數(shù)據(jù)庫為例。
有人提問“如果用nodejs訪問sql server?” 找了找資料,發(fā)現(xiàn)有兩類解決方法,使用第三方nodejs插件2011-12-12前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的實現(xiàn)
近期在學習的時候,碰到一個關于post的小問題,故拿出來分享一下,下面這篇文章主要給大家介紹了關于前端HTTP發(fā)POST請求攜帶參數(shù)與后端接口接收參數(shù)的相關資料,需要的朋友可以參考下2022-10-10js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果
本文主要分享了js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧2017-02-02