JavaScript正則表達式替換字符串中圖片地址(img src)的方法
本文實例講述了JavaScript正則表達式替換字符串中圖片地址(img src)的方法。分享給大家供大家參考,具體如下:
今天開發(fā)中遇到一個問題:如何替換一段HTML字符串中包含的所有img標簽的src值?
開始想到的解決方法是:
content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) { console.log(match); });
輸出結(jié)果是:
得到的是整個img標簽,但我期望得到的是src中的網(wǎng)址,這樣只需在function(match)中返回新地址就行了。
于是,卡在這里了。。。
后來,通過Google搜索關(guān)鍵字“javascript replace callback”,在stackoverflow中找到了“replace callback function with matches”,才知道function(match)還有其他參數(shù)(詳見developer.mozilla.org)。
然后,改為下面的代碼,問題就解決了。
content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) { console.log(capture); });
輸出結(jié)果:
http://www.dbjr.com.cn/images/logo.gif
搞定!
PS:這里再為大家提供2款非常方便的正則表達式工具供大家參考使用:
JavaScript正則表達式在線測試工具:
http://tools.jb51.net/regex/javascript
正則表達式在線生成工具:
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
關(guān)于js中e.preventDefault()的具體使用
本文主要介紹了關(guān)于js中e.preventDefault()的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04Javascript執(zhí)行流程細節(jié)原理解析
這篇文章主要介紹了Javascript執(zhí)行流程細節(jié)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個用于 Electron 應(yīng)用程序打包的工具,需要下載并使用 Electron 運行時來創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12通過JAVASCRIPT讀取ASP設(shè)定的COOKIE
通過JAVASCRIPT讀取ASP設(shè)定的COOKIE...2007-02-02three.js中正交與透視投影相機的實戰(zhàn)應(yīng)用指南
在three.js中攝像機的作用就是不斷的拍攝我們創(chuàng)建好的場景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關(guān)于three.js中正交與透視投影相機應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-08-08JavaScript Cookie 直接瀏覽網(wǎng)站分網(wǎng)址
2009-12-12使用layui實現(xiàn)樹形結(jié)構(gòu)的方法
今天小編就為大家分享一篇使用layui實現(xiàn)樹形結(jié)構(gòu)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript編程設(shè)計模式之構(gòu)造器模式實例分析
這篇文章主要介紹了JavaScript編程設(shè)計模式之構(gòu)造器模式,簡單講述了構(gòu)造器模式的概念、原理,并結(jié)合實例形式分析了構(gòu)造器模式的定義與使用方法,需要的朋友可以參考下2017-10-10