画像ファイル名の末尾が特定の文字列の場合のみ置き換えたい

Question

画像ファイル名の末尾が特定の文字列の場合のみ置き換えたいです。

具体的には以下の連続する「hoge」内の画像の末尾が「3」のときのみ「2」に置き換えたいです。
※末尾が「3」以外の文字列の場合は処理不要

変更前

<div class="hoge"><img src="/XXXXXXXX3.jpg"></div>

変更後

<div class="hoge"><img src="/XXXXXXXX2.jpg"></div>

現在試して上手く行っていない処理は以下の通りです。

$('.hoge img').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/3.jpg/g,'2.jpg'));
});
});

ご教授のほどよろしくお願いいたします。

Answer 1

まず、以下のように txt を alert で表示してみると、空だと思います。

$('.hoge img').each(function(){
    var txt = $(this).html();
    alert(txt);
});

img の src を取りたいのですよね。
$xxx.html() はたとえば

<div>あいうえお</div>

の場合の "あいうえお" 部分を取るものなので、src を取りたい場合は別のものを使います。

---

$('.hoge img').each(function(){
    var $img = $(this);          // img自身
    var src = $img.attr("src");  // imgのsrc
    alert(src);                  // 確認
});

---

追記：末尾が 2 のものだけ処理したい、というのであれば
最初のセレクタの時点で絞ってしまっても良いかもしれませんね。

$('.hoge img[src$="2.png"]').each(function(){
    var $img = $(this);          // img自身
    var src = $img.attr("src");  // imgのsrc
    alert(src);                  // 確認
});

<div class="hoge"><img src="/XXXXXXXX1.jpg"></div>
<div class="hoge"><img src="/XXXXXXXX2.jpg"></div>
<div class="hoge"><img src="/XXXXXXXX3.jpg"></div>
<div class="hoge"><img src="/XXXXXXXX12.jpg"></div>

ただちょっと思ったのですが、末尾が 12 の場合なども 13 になってしまうと思いますが、それは良いのでしょうか。
（あらかじめ そんなに連番はないことが分かっているのですかね？なら平気ですけど）

Comments

[castail]

ご回答ありがとうございます。

せっかくですが「yambejp」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。

Answer 2

$(function(){
  var reg=new RegExp("2(?=\.[^.]+$)");
  $('.hoge img').each(function(){
    $(this).prop('src',$(this).prop('src').replace(reg,"3"));
  });
});

Comments

[castail]

ご回答ありがとうございます。

ご教授頂いた内容で無事実現できました。
お礼申し上げます。

ありがとうございました！