素材の壺

リンク先のURLを動的に変更したい場合、jQueryだととても手軽に実装することが出来ます。この記事ではaタグのhrefを指定したURLに差し替える例と、.comから.jpに一部だけ置換する例をご紹介します。

リンク先URLを指定したURLに差し替える例

変更前のHTMLがこのように書かれているとします。

リンクテキスト

例えばこのaタグのhrefの値を「https://www.google.co.jp/」に変更したい場合、下記のようにjQueryを記述します。

$(function(){
$("#link_text a").attr("href", "https://www.google.co.jp/")
});

これでリンク先URLが差し替えられて下記のようになります。

リンクテキスト

リンク先URLを部分的に置換する例

ドメインや拡張子など、部分的に置換したい場合は下記のように記述します。この例の場合、aタグ全てのhrefの値を「.com」から「.jp」に置換します。

$(function(){
$("a").each(function() { 
var replace = null;
var replace = $(this).attr('href').replace(/.com/g,'.jp');
$(this).attr('href',replace);
});
});

これでリンク先URLは下記のようになります。

リンクテキスト

以上、jQueryでaタグのhrefの値(リンク先URL)を差し替えもしくは置換する方法でした。