Comments今回はjQueryでhrefやsrcに設定されてるURLの一部を置換・変更する方法。末尾にID名を書き足す方法も一緒に書いてくよ。拡張子を抜いたURLの一部を置換ファイル名のナンバリングを置換ナンバリングの桁数を揃えてURLを置換URLに区切れる文字列がない場合URLに置換対象と同じ文字列が複数含まれる場合プルダウンで選んでURLを置換する今回使うjQueryの目玉は.attr()、.replace()、.split()の3つね。.attr()指定した要素の属性を取得・設定をする.replace()指定した要素の文字列を置換する.split()文字列を指定した文字毎に区切ります。ここまで説明したらわかるとは思うけど、.attr()で属性(href,src)を取得して.split()で区切って.replace()で置換するって感じね。そんじゃ実際に動かしてみましょう。固定URLの一部を置換http://eitch.net/wp-content/uploads/2015/11/small.jpghttp://eitch.net/wp-content/uploads/2015/11/medium.jpghttp://eitch.net/wp-content/uploads/2015/11/large.jpg今回使うURLは上の画像3つを用意しました。それぞれのURLのsmall,medium,largeの部分をjQueryで置換してみましょう。htmlはこんな感じ。src="http://eitch.net/wp-content/uploads/2015/11/medium.jpg">jQueryはこんな感じね。CodePen.20775これでbuttanをクリックすれば画像がmediumからlargeに変わります。$('buttan').click(function(){1$('buttan').click(function(){まずはbuttanのクリックイベントを入れます。'large.jpg');ここで.replace()を使ってmedium.jpgという文字列をlarge.jpgに置換します。changeL);最後に置換したURLを.attrを使ってsrcに入れて完了です。これがaタグの場合はimgの部分をaに、srcの部分をhrefにしてください。ちなみにaタグの置換をする時に****.htmlの部分を****.html#hogeにすればアンカーリンクになり、任意の場所を頭出し出来ます。上記では簡単にURLを置換できますが、URLが固定の時にしか使えません。今回だとmedium.jpgですね。次でどんなURLや拡張子でも対応できるように.split()を使って置換してみましょう。changeL);});});まずはbuttanのクリックイベントを入れるのは同じで、3行目にご注目。$('img').attr('src').split('/');この3行目で画像のURLを/で区分けします。'large.jpg');それから上で区切ったURLの何番目の区切りかをimgSrc[7]で指定して.replace()でlargeに置換してます。区切りの数字は0から始まるので、今回は7となっています。changeL);最後にlargeに置換したURLを元のimgのURLと置換して完了です。CodePen.20775これで元のURLがmedium.jpgでなくても置換できるようになりました。上でどんなURLでもと言いましたが、実際は/で区切った時に同じ場所にある場合ですね。上のjQueryではクリックして置換できるURLがlarge.jpg限定でしたが、これも値を持たせたりすれば自由にURLを置換出来たりします。その場合のHTMLはこんな感じ。src="http://eitch.net/wp-content/uploads/2015/11/large.jpg">まずbuttanのtitleに置換したい文字列を入れます。今回は拡張子が着いているのでtitleにしていますが、普通の英数字ならidやclassでも大丈夫です。そんでもってjQueryはこんな感じ。$(this).attr('title');今回はclickのイベントを入れた直後に上の1行でクリックしたボタンのtitleを取得しています。今までlarge.jpgと書いていた部分に上の変数を入れてやれば、クリックしたボタンのtitleの文字列がURLに入るという仕組みです。これでURLの好きな部分を好きな文字列に置換・変更ができます。今までは一度URLを置換したら置換対象が固定だったり、置換後のURLが固定だったりで一方通行でしたが、これで何度でもURLを置換出来るようになりました。上の項目では拡張子込みで置換・変更していましたが、今度は拡張子抜きでURLの一部を置換してみましょう。やり方は上のjQueryの応用でできます。src="http://eitch.net/wp-content/uploads/2015/11/small.jpg">buttanのtitleをlarge.jpgからlargeに変更しました。そんでjQueryはこれ。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.jpghttp://eitch.net/wp-content/uploads/2015/11/small_002.jpg今回は上記の2つのファイルを用意したので、このナンバリングのみを置換してみましょう。CodePen.20775今度は6行目に下記を追加してやりました。imgJpg[0].split('_');拡張子を区切った時と一緒で、もう一度ナンバリングだけ取得できるように.split()でスパッと区切ってあげるのです。.split(‘.’)より先に.split(‘_’)してもかまいません。置換する時に厄介なのが桁数です。拾ってこれる数字が1だけど、ファイル名は001にしたいって時のやり方ね。今回のimgはhttp://eitch.net/wp-content/uploads/2015/11/small_001.jpg。そんでbuttanについてるtitleは2ね。CodePen.20775今回は拾ってきた置換用の数字に.slice()を使って桁数を揃えました。buttanAttr).slice(-3);変数で置換用の数字を持ってきたら、あわせたい桁数の数だけ頭に0を足してやります。3桁の場合は000+変数、5桁の場合は00000+変数ってな感じ。そこから.slice()で桁数分マイナスしてやれば完了。3桁なら-3で、5桁なら-5ね。要は数字の頭を0でいっぱいにして、尻から必要な分だけ残すって感じ。会社の人に教えてもらったんだー。今度はファイル名のナンバリング部分が記号などで区切られてない時の対象方法です。これは置換対象をファイル名全体にして、置換する文字列を名前+ナンバリングにしてやればいいだけ。imgはhttp://eitch.net/wp-content/uploads/2015/11/small001.jpgで、buttanについてるtitleは2でやってみましょーう。CodePen.20775今回は7行目の仕上げの部分に細工をしました。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になっちゃうので、下記で回避します。CodePen.20775これも数字を数字に置換するのではなく、ファイル名を文字列+記号+数字にしてやればいいのです。URLの置換対象を2015を含まないimgJpg[0](small_01)にしてやります。そんで_で.split()した文字列に接続記号と新しいナンバリングをくっつけた文字列に置換してやるのです。プルダウンで選んでURLを置換する応用ってことで今迄使ったjQueryをふんだんに使ってみました。無駄に最初非表示にしといて、タイトルとリンクなんかも追加しちゃったりして。リンク先も変わってるよん。CodePen.20775プルダウンが選ばれた時のイベントはこの1行だけ。$('select').change(function(){1$('select').change(function(){今回は拾ってくる数字をopsionのvalueにしたけど、特にシステムで拾ったりとかない場合はidやclassでよいかと。コメントをキャンセルメールアドレスが公開されることはありません。