JavaScriptの画像ソースパスを圧縮する

Question

私はいくつかのimgを他のimgに置き換えるWebアプリケーションを持っています。

例：パスhttp://example.com/example/example/images/dir/1.gifの画像はhttp://cdn.example.com/dir/1.gifで再送信されます。

これを行うには、jQuery attr（）を使用します。

だから私のコードは次のようなものになります。

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif"); 
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif"); 
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif"); 
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif"); 
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif"); 
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif"); 
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif"); 
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif"); 
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif"); 
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif") 

をだから、これを圧縮する方法はありますか？それで、それは少ない文字で書かれていますか？

注：各行で、両方のウェブサイトの画像は同じです。たとえば、1.gifは1.gifに置き換えられますが、別のサーバーに置き換えられます。 基本的に私はサーバを交換したいと思います。 http://www.example.com/dir/images/dir/がhttp://cdn.example.com/dir/に置き換えられます。

Answer 1

それは、ループを使用するのと同じくらい簡単です：

var i; 
for (i = 1; i <= 10; i++) 
{ 
    $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif'); 
} 

それともでしたすべてを見つけるために探して交換するように頼んでいますか？

あなたは使用することができattr starts with selector：

$('img[src^="http://www.example.com/"]').each(function(index,element){ 
    var $this, src, newSrc; 
    $this = $(this); 
    src = $this.attr('src'); 
    //do your replacement here 
    newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
    $this.attr('src', newSrc); 
}); 

Moinザーマンが指摘したように、attrはこのスクリプトを短縮するだけでなく、パラメータとしての機能取ることができます：

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){ 
    return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
}); 

Answer 2

たくさん

おかげであなたがものを置き換えるために、正規表現でのJavaScriptの.replace（）メソッドが必要になります。

jQueryの属性セレクタ^=は、で始まる属性値を検索することを意味します。

私はそのに「www.example.com」で始まるすべての画像を仮定している、これを試してみてください：

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src', 
    function(i,src){ 
     return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});