javascript - ページ上のすべての img src の一部を変更するには?

Question

私が探しているのは、Java スクリプトを使用してページ上のすべての img src を変更する方法です。

言うなら：

<img src="myimg1-small.png"></img>
<img src="myimg2-small.gif"></img>
<img src="myimg3-small.jpg"></img>
.......

「-small」を「-large」に変更し、最初の部分と拡張子を保持したいだけです。

誰かが私を助けてくれたら、それはとてもありがたいです。

score 3 · Accepted Answer

これがJQueryコードです。

$('img').each(function(){
    $(this).attr('src',$(this).attr('src').replace(/-small\./g,'-large'));
});

score 1 · Accepted Answer

通常のjsが必要な場合：

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].src = imgs[i].src.replace('small','large');
}

score 1 · Accepted Answer

$('img').each(function(){
    $(this).attr('src', $(this).attr('src').replace('-small','-large'));
});

編集: 私たちの何人かは、互いに 1 分ほどで基本的に同じ回答をしたことに気付きました。ただし、いくつかの注意事項があります。

(1) 単純な文字列の一致がより効率的に機能する場合は、正規表現を使用しないでください。

(2) ハイフンなしの文字列「small」を含むイメージ名と誤って混同しないように、一致にハイフン (-) を含めました。結局、たとえば画像が小さな花の画像で、画像名が「smallflower-small.jpg」の場合、ハイフンを使用しない一致は壊れます。

score 1 · Accepted Answer

$('img[src^="myimg1-small"]').attr('src', function() {
    return this.src.replace('small', 'large');
});

score 0 · Accepted Answer

jQuery を使用すると、次のことができます。

$(document).ready(function (){
    $('img').each(function (){
        $(this).attr('src', $(this).attr('src').replace('small', 'medium'))
    })
});

5 に答える 5