JavaScript正則表達(dá)式替換字符串中圖片地址(img src)的方法
本文實(shí)例講述了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://www.fzitv.net/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è)計(jì)有所幫助。
相關(guān)文章
完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題
下面小編就為大家分享一篇完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了純js寫的分頁，表格數(shù)據(jù)為json串,需要的朋友可以參考下2014-02-02
如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對象)、BOM(瀏覽器對象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來實(shí)現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了原生JS實(shí)現(xiàn)的輪播圖功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)輪播圖的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
這篇文章是JavaScript插件化開發(fā)系列教程的第五篇，還是著重于實(shí)戰(zhàn)，通過具體的實(shí)例來學(xué)習(xí)jQuery的方式如何開發(fā)插件，有相同需求的小伙伴來參考下吧。2015-02-02
前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對比詳解
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
javascript中加var和不加var的區(qū)別 你真的懂嗎
var 語句用于聲明變量，本文給大家介紹javascript 中加’var‘和不加'var'的區(qū)別，涉及到j(luò)avascript var相關(guān)知識，對javascript var相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
很多時候我們都把時間戳作為id值,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取當(dāng)前時間戳的5種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
javascript獲取不重復(fù)的隨機(jī)數(shù)的方法比較
js永不重復(fù)隨機(jī)數(shù)實(shí)現(xiàn)代碼比較2008-09-09
JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法
這篇文章主要介紹了JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了希爾排序與快速排序的原理及javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12