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

