指定した要素の背景画像のパスを一括で変更したい

Question

.box {
 background: url(../images/bbb.png) no-repeat 0 0;
}
.conts {
 background: url(../images/ccc.png) no-repeat 0 0;
}

↓

bbb.pngとccc.pngに「aaa_」を一括で付与したい

bbb.pngをaaa_bbb.pngへ
ccc.pngをaaa_ccc.pngへ

$('.box').css('background-image', 'url(../images/aaa_bbb.png)');
$('.conts').css('background-image', 'url(../images/aaa_ccc.png)');

みたいな変更方法しかわからず、
「aaa_」を変数にいれて、指定した要素（.boxと.conts）の背景画像名を一括で付与、のような動きを書きたいのですが、どうすればよいでしょうか。。

どなたかご教示のほどお願いいたします。

Answer 1

単純に置きかえれるなら。

$( '.box' ).on( 'click', function() {
  $( this ).css( 'background-image', $( this ).css( 'background-image' ).replace( '.png', '_aaa.png' ) );
} );
/*
// 全部置き換える場合
$( '.box' ).each( function() {
  $( this ).css( 'background-image', $( this ).css( 'background-image' ).replace( '.png', '_aaa.png' ) );
} );
*/
```**動くサンプル：**[https://jsfiddle.net/w1s18jmc/1/](https://jsfiddle.net/w1s18jmc/1/)

Comments

[banbbanb0814]

こちらの全部置き換え版を利用させていただきました！
ありがとうございますm(_ _)m

Answer 2

例えばこんな感じ？

var replaceBackground = function(index, element){
  let path = $(element).css('background-image');
  let reg = new RegExp('[^/]+$');
  let f = path.match(reg);
  path = path.replace(reg, 'aaa_' + f[0]);
  $(element).css('background-image', path);
};

$('.box').each(replaceBackground);
$('.conts').each(replaceBackground);

Comments

[banbbanb0814]

ありがとうございます！
問題なく実装出来たんですが、IE10以下だと反映されず。。。
社内のブラウザ対象がIE9、10も含まれているので、IE10以下でも見れるようするにはどうすれば良いでしょうか?