スキップしてメイン コンテンツに移動

投稿

1月, 2014の投稿を表示しています

JavaScriptで正規表現を使用し img/* もしくは ../img/* の下にある画像ファイル名を変更する

【やりたいこと】 トップページと下層ページで共通のJavaScriptを使用している場合で、相対パスで記述している場合に、ファイル名「hoge.jpg」を「fuga.jpg」に変更したい。


【HTML】 下層ページの場合:
<img src="../img/hoge.jpg" id="myHogeImg" alt=""/> トップページの場合:
<img src="img/hoge.jpg" id="myHogeImg" alt=""/>

【JavaScript】(jQuery)$(document).ready(function () {   $("#myHogeImg").attr('src', $("#myHogeImg").attr("src").replace(/^(.*img\/)(.+)$/, "$1fuga.jpg")); });


【解説】 replace(/^(.*img\/)(.+)$/, "$1fuga.jpg")の部分の解説
/^(.*img\/)
src="img/ もしくは src="../img/ (imgの前は何でも良い) => $1 に格納

(.+)$/
hoge.jpg(img/ 以降の任意の文字) => $2 に格納(使用はしない)

"$1fuga.jpg"
img/fuga.jpg もしくは ../img/fuga.jpg に変更


以上です。
本年もスキルを磨くとともに、日々の業務で得た知見を公開してゆきたいと思います。
よろしくお願いします。