今回はjQueryでhrefやsrcに設定されてるURLの一部を置換・変更する方法。
末尾にID名を書き足す方法も一緒に書いてくよ。

今回使うjQueryの目玉は.attr()、.replace()、.split()の3つね。

.attr()

指定した要素の属性を取得・設定をする

.replace()

指定した要素の文字列を置換する

.split()

文字列を指定した文字毎に区切ります。

ここまで説明したらわかるとは思うけど、.attr()で属性(href,src)を取得して.split()で区切って.replace()で置換するって感じね。
そんじゃ実際に動かしてみましょう。

固定URLの一部を置換

http://eitch.net/wp-content/uploads/2015/11/small.jpg
http://eitch.net/wp-content/uploads/2015/11/medium.jpg
http://eitch.net/wp-content/uploads/2015/11/large.jpg

今回使うURLは上の画像3つを用意しました。
それぞれのURLのsmall,medium,largeの部分をjQueryで置換してみましょう。
htmlはこんな感じ。

<buttan>クリック</buttan> <img src="http://eitch.net/wp-content/uploads/2015/11/medium.jpg">

1 2	<buttan>クリック</buttan> <img src="http://eitch.net/wp-content/uploads/2015/11/medium.jpg">

jQueryはこんな感じね。

jQuery(function($){ $('buttan').click(function(){ var changeL = $('img').attr('src').replace('medium.jpg' , 'large.jpg'); $('img').attr('src', changeL); }); });

1 2 3 4 5 6

jQuery(function($){ $('buttan').click(function(){ var changeL = $('img').attr('src').replace('medium.jpg' , 'large.jpg'); $('img').attr('src', changeL); }); });

See the Pen URL置換/01 by sorry (@eitch) on CodePen.20775

これでbuttanをクリックすれば画像がmediumからlargeに変わります。

$('buttan').click(function(){

1	$('buttan').click(function(){

まずはbuttanのクリックイベントを入れます。

var changeL = $('img').attr('src').replace('medium.jpg' , 'large.jpg');

1	var changeL = $('img').attr('src').replace('medium.jpg' , 'large.jpg');

ここで.replace()を使ってmedium.jpgという文字列をlarge.jpgに置換します。

$('img').attr('src', changeL);

1	$('img').attr('src', changeL);

最後に置換したURLを.attrを使ってsrcに入れて完了です。

これがaタグの場合はimgの部分をaに、srcの部分をhrefにしてください。
ちなみにaタグの置換をする時に****.htmlの部分を****.html#hogeにすればアンカーリンクになり、任意の場所を頭出し出来ます。

変動するURLの一部を置換

上記では簡単にURLを置換できますが、URLが固定の時にしか使えません。今回だとmedium.jpgですね。
なので次でどんなURLや拡張子でも対応できるように.split()を使って置換してみましょう。

jQuery(function($){ $('buttan').click(function(){ var imgSrc = $('img').attr('src').split('/'); var changeL = $('img').attr('src').replace(imgSrc[7] , 'large.jpg'); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7

jQuery(function($){ $('buttan').click(function(){ var imgSrc = $('img').attr('src').split('/'); var changeL = $('img').attr('src').replace(imgSrc[7] , 'large.jpg'); $('img').attr('src', changeL); }); });

まずはbuttanのクリックイベントを入れるのは同じで、3行目にご注目。

var imgSrc = $('img').attr('src').split('/');

1	var imgSrc = $('img').attr('src').split('/');

この3行目で画像のURLを/で区分けします。

var changeL = $('img').attr('src').replace(imgSrc[7] , 'large.jpg');

1	var changeL = $('img').attr('src').replace(imgSrc[7] , 'large.jpg');

それから上で区切ったURLの何番目の区切りかをimgSrc[7]で指定して.replace()でlargeに置換してます。
区切りの数字は0から始まるので、今回は7となっています。

$('img').attr('src', changeL);

1	$('img').attr('src', changeL);

最後にlargeに置換したURLを元のimgのURLと置換して完了です。

See the Pen URL置換/02 by sorry (@eitch) on CodePen.20775

これで元のURLがmedium.jpgでなくても置換できるようになりました。
上でどんなURLでもと言いましたが、実際は/で区切った時に同じ場所にある場合ですね。

URLの一部を選んだ文字列に置換

上のjQueryではクリックして置換できるURLがlarge.jpg限定でしたが、これも値を持たせたりすれば自由にURLを置換出来たりします。
その場合のHTMLはこんな感じ。

<buttan title="small.jpg">ボタン1</buttan> <buttan title="medium.jpg">ボタン2</buttan> <buttan title="large.jpg">ボタン3</buttan> <img src="http://eitch.net/wp-content/uploads/2015/11/large.jpg">

1 2 3 4 5

<buttan title="small.jpg">ボタン1</buttan> <buttan title="medium.jpg">ボタン2</buttan> <buttan title="large.jpg">ボタン3</buttan>   <img src="http://eitch.net/wp-content/uploads/2015/11/large.jpg">

まずbuttanのtitleに置換したい文字列を入れます。
今回は拡張子が着いているのでtitleにしていますが、普通の英数字ならidやclassでも大丈夫です。
そんでもってjQueryはこんな感じ。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var imgSrc = $('img').attr('src').split('/'); var changeL = $('img').attr('src').replace(imgSrc[7] , buttanAttr); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var imgSrc = $('img').attr('src').split('/'); var changeL = $('img').attr('src').replace(imgSrc[7] , buttanAttr); $('img').attr('src', changeL); }); });

See the Pen URL置換/03 by sorry (@eitch) on CodePen.20775

var buttanAttr = $(this).attr('title');

1	var buttanAttr = $(this).attr('title');

今回はclickのイベントを入れた直後に上の1行でクリックしたボタンのtitleを取得しています。
そして今までlarge.jpgと書いていた部分に上の変数を入れてやれば、クリックしたボタンのtitleの文字列がURLに入るという仕組みです。
これでURLの好きな部分を好きな文字列に置換・変更ができます。
今までは一度URLを置換したら置換対象が固定だったり、置換後のURLが固定だったりで一方通行でしたが、これで何度でもURLを置換出来るようになりました。めでたし！

拡張子を抜いたURLの一部を置換

上の項目では拡張子込みで置換・変更していましたが、今度は拡張子抜きでURLの一部を置換してみましょう。
やり方は上のjQueryの応用でできます。こんな感じ。

<buttan title="large">ボタン1</buttan> <img src="http://eitch.net/wp-content/uploads/2015/11/small.jpg">

1 2	<buttan title="large">ボタン1</buttan> <img src="http://eitch.net/wp-content/uploads/2015/11/small.jpg">

buttanのtitleをlarge.jpgからlargeに変更しました。
そんでjQueryはこれ。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var imgSrc = $('img').attr('src').split('/'); var imgJpg = imgSrc[7].split('.'); var changeL = $('img').attr('src').replace(imgJpg[0] , buttanAttr); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8 9

jQuery(function($){   $('buttan').click(function(){       var buttanAttr = $(this).attr('title');       var imgSrc = $('img').attr('src').split('/');       var imgJpg = imgSrc[7].split('.');       var changeL = $('img').attr('src').replace(imgJpg[0] , buttanAttr);       $('img').attr('src', changeL);     }); });

See the Pen URL置換/04 by sorry (@eitch) on CodePen.20775

var imgJpg = imgSrc[7].split('.');

1	var imgJpg = imgSrc[7].split('.');

今回は5行目に上の1行を追加しました。
ここではimgのsrcから取得したsmall.jpgをさらに.split()を使って.で区切って拡張子とファイル名の二つに分割しました。
/で.split()して、さらにそこから.で.split()してあげるだけなんです。
これでファイル名だけを変更出来ます。やったね。
ちなみに[0]の部分を[1]にしてやれば拡張子を置換することもできます。

URLのナンバリングだけを置換

ファイル名にナンバリングがある場合は、上の方法を使って拡張子だけでなくナンバリングの数字を置換することもできますね。

http://eitch.net/wp-content/uploads/2015/11/small_001.jpg
http://eitch.net/wp-content/uploads/2015/11/small_002.jpg
今回は上記の2つのファイルを用意したので、このナンバリングのみを置換してみましょう。
とりあえずjQueryをば。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var imgSrc = $('img').attr('src').split('/'); var imgJpg = imgSrc[7].split('.'); var imgNum = imgJpg[0].split('_'); var changeL = $('img').attr('src').replace(imgNum[1] , buttanAttr); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8 9 10

jQuery(function($){   $('buttan').click(function(){     var buttanAttr = $(this).attr('title');     var imgSrc = $('img').attr('src').split('/');     var imgJpg = imgSrc[7].split('.');     var imgNum = imgJpg[0].split('_');     var changeL = $('img').attr('src').replace(imgNum[1] , buttanAttr);     $('img').attr('src', changeL);   }); });

See the Pen URL置換/0 by sorry (@eitch) on CodePen.20775

今度は6行目に下記を追加してやりました。

var imgNum = imgJpg[0].split('_');

1	var imgNum = imgJpg[0].split('_');

拡張子を区切った時と一緒で、もう一度ナンバリングだけ取得できるように.split()でスパッと区切ってあげるのです。
もちろん.split(‘.’)より先に.split(‘_’)してもかまいません。

ナンバリングの桁数を揃えてURLを置換

置換する時に厄介なのが桁数です。
例えば拾ってこれる数字が1だけど、ファイル名は001にしたいって時のやり方ね。
今回のimgはhttp://eitch.net/wp-content/uploads/2015/11/small_001.jpg。
そんでbuttanについてるtitleは2ね。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var buttanNum = ("000" + buttanAttr).slice(-3); var imgSrc = $('img').attr('src').split('/'); var imgJpg = imgSrc[7].split('.'); var imgNum = imgJpg[0].split('_'); var changeL = $('img').attr('src').replace(imgNum[1] , buttanNum); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8 9 10 11

jQuery(function($){   $('buttan').click(function(){     var buttanAttr = $(this).attr('title');     var buttanNum = ("000" + buttanAttr).slice(-3);     var imgSrc = $('img').attr('src').split('/');     var imgJpg = imgSrc[7].split('.');     var imgNum = imgJpg[0].split('_');     var changeL = $('img').attr('src').replace(imgNum[1] , buttanNum);     $('img').attr('src', changeL);   }); });

See the Pen URL置換/06 by sorry (@eitch) on CodePen.20775

今回は拾ってきた置換用の数字に.slice()を使って桁数を揃えました。
解説は以下から。

var buttanNum = ("000" + buttanAttr).slice(-3);

1	var buttanNum = ("000" + buttanAttr).slice(-3);

変数で置換用の数字を持ってきたら、あわせたい桁数の数だけ頭に0を足してやります。
3桁の場合は000+変数、5桁の場合は00000+変数ってな感じ。

そこから.slice()で桁数分マイナスしてやれば完了。
3桁なら-3で、5桁なら-5ね。
要は数字の頭を0でいっぱいにして、尻から必要な分だけ残すって感じ。
頭いいでしょ。会社の人に教えてもらったんだー。

URLに区切れる文字列がない場合

今度はファイル名のナンバリング部分が記号などで区切られてない時の対象方法です。
これは置換対象をファイル名全体にして、置換する文字列を名前+ナンバリングにしてやればいいだけ。

imgはhttp://eitch.net/wp-content/uploads/2015/11/small001.jpgで、buttanについてるtitleは2でやってみましょーう。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var buttanNum = ("000" + buttanAttr).slice(-3); var imgSrc = $('img').attr('src').split('/'); var imgJpg = imgSrc[7].split('.'); var changeL = $('img').attr('src').replace(imgJpg[0] , "small" + buttanNum); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8 9 10

jQuery(function($){   $('buttan').click(function(){     var buttanAttr = $(this).attr('title');     var buttanNum = ("000" + buttanAttr).slice(-3);     var imgSrc = $('img').attr('src').split('/');     var imgJpg = imgSrc[7].split('.');     var changeL = $('img').attr('src').replace(imgJpg[0] , "small" + buttanNum);     $('img').attr('src', changeL);   }); });

See the Pen URL置換/07 by sorry (@eitch) on CodePen.20775

今回は7行目の仕上げの部分に細工をしました。

var changeL = $('img').attr('src').replace(imgJpg[0] , "small" + buttanNum);

1	var changeL = $('img').attr('src').replace(imgJpg[0] , "small" + buttanNum);

URLの置換対象をimgJpg[0](small_01)にしてあげて、置換後の方に“small” + buttanNumと書いてあげます。
置換後の方はsmallという文字と、桁を揃えた数字を足した文字に置換するってことね。
URLの置換対象を狭められないのなら置換後の方に細工してやろう！ということ。

URLに置換対象と同じ文字列が複数含まれる場合

こいつも面倒ですが上でやったことの応用になります。
例えば01を02に変換したいが2015という文字が入っていて、そこが2025に置換されてしまう。という場合ね。
今回の画像はhttp://eitch.net/wp-content/uploads/2015/11/small_01.jpgで、titleは2ね。
これで01を02に置換しようとすると/2025/11/small_01.jpgになっちゃうので、下記で回避します。

jQuery(function($){ $('buttan').click(function(){ var buttanAttr = $(this).attr('title'); var buttanNum = ("00" + buttanAttr).slice(-2); var imgSrc= $('img').attr('src').split('/'); var imgJpg = imgSrc[7].split('.'); var imgNum = imgJpg[0].split('_'); var changeL = $('img').attr('src').replace(imgJpg[0] , imgNum[0] + "_" + buttanNum); $('img').attr('src', changeL); }); });

1 2 3 4 5 6 7 8 9 10 11

jQuery(function($){   $('buttan').click(function(){     var buttanAttr = $(this).attr('title');     var buttanNum = ("00" + buttanAttr).slice(-2);     var imgSrc= $('img').attr('src').split('/');     var imgJpg = imgSrc[7].split('.');     var imgNum = imgJpg[0].split('_');     var changeL = $('img').attr('src').replace(imgJpg[0] , imgNum[0] + "_" + buttanNum);     $('img').attr('src', changeL);   }); });

See the Pen URL置換/07 by sorry (@eitch) on CodePen.20775

これも数字を数字に置換するのではなく、ファイル名を文字列+記号+数字にしてやればいいのです。

まずはURLの置換対象を2015を含まないimgJpg[0](small_01)にしてやります。
そんで_で.split()した文字列に接続記号と新しいナンバリングをくっつけた文字列に置換してやるのです。
意味としてはsmall + _ + 02、となってます。

プルダウンで選んでURLを置換する

応用ってことで今迄使ったjQueryをふんだんに使ってみました。
無駄に最初非表示にしといて、タイトルとリンクなんかも追加しちゃったりして。
もちろんリンク先も変わってるよん。

jQuery(function($){ $('select').change(function(){ //　画像URL取得 var opval = $(this).val();　 var imgSplit = $('div img').attr('src').split('/'); var imgName = imgSplit[7].split('.'); var imgUrl = $('div img').attr('src').replace(imgName[0] , opval); $('div img').attr('src', imgUrl);　 //　リンク取得 var aSplit = $('div a').attr('href').split('/'); var aUrl = $('div a').attr('href').replace(aSplit[5] , opval); $('div a').attr('href', aUrl); //　タイトル取得 var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div span").text(str); //　表示する $('div').css('display' , 'block'); }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

jQuery(function($){     $('select').change(function(){              //　画像URL取得       var opval = $(this).val();　       var imgSplit = $('div img').attr('src').split('/');       var imgName = imgSplit[7].split('.');       var imgUrl = $('div img').attr('src').replace(imgName[0] , opval);       $('div img').attr('src', imgUrl);　              //　リンク取得       var aSplit = $('div a').attr('href').split('/');       var aUrl = $('div a').attr('href').replace(aSplit[5] , opval);       $('div a').attr('href', aUrl);              //　タイトル取得       var str = "";       $("select option:selected").each(function () {           str += $(this).text() + " ";       });       $("div span").text(str);              //　表示する       $('div').css('display' , 'block');     }); });

See the Pen URL置換/09 by sorry (@eitch) on CodePen.20775

プルダウンが選ばれた時のイベントはこの1行だけ。

$('select').change(function(){

1	$('select').change(function(){

今回は拾ってくる数字をopsionのvalueにしたけど、特にシステムで拾ったりとかない場合はidやclassでよいかと。

共有

• Twitter
• Facebook
• Google
• Pocket
• Hatena

関連

jQuery