やりたいこと
- サイト内の「/text/」という文字列を含むすべてのhref属性にパラメータを自動付与する。
- 例えば、サイトURLがhttp://www.example/category/page.html の場合、パラメータ「ref=page」を自動付与する。
- すでに別のパラメーター(id)が付与されている場合。 → &に続けて付与する。
- パラメーター(id)が付与されていない場合。 → ?に続けて付与する。
以下コードで達成
$("a[href*='text']").each(function() { //1行目
var obj = $(this);
var link = obj.attr("href"); //3行目
var pathname = location.pathname.split("/"); //4行目
var filename = pathname[pathname.length-1]; //5行目
var filename2 = filename.split('.')[0]; //6行目
if(filename){ //7行目
if ( link.match("/?id")) { //8行目
obj.attr("href",link + "&ref=" + filename2) //9行目
} else {
obj.attr("href",link + "?ref=" + filename2) //11行目
}
}
});
解説
1行目: 指定した文字列をhrefに含むa要素を探す。
イコール前のアスタリスク(*)が重要。
$('a[href*="text"]')
1行目: each()で繰り返し処理を行う
each()前のHTML要素に対して繰り返し処理を行う。
$('a[href*="text"]').each(function(){
//繰り返し処理を記述する
})
3行目: attr()でhref属性を取得する
var obj
に格納されているのは、1行目で指定した文字列「text」を含むa要素。
そのhref属性を操作できるようになる。
var link = obj.attr("href");
4行目: サイトURLのパスを取得する
location.pathname
で、サイトURLのパスが取得できる。
location.pathname
//結果:/category/page.html
4行目: split()で、文字列を分割する
.splitで文字列を分割し、配列としてpathname
に格納する。
.split("区切り文字")とすれば、任意の文字で分割できる。
var pathname = location.pathname.split("/");
//結果:category, page.html
5行目:パス最後のディレクトリ部分だけ取得
配列pathname
の、最後のオブジェクトから数えて1番目のもの(つまり最後のオブジェクト)を変数filename
に格納。
.length
は、配列の要素数を取得する。.length-1
の「-1」を「-2」「-3」と変えることで任意の階層のフォルダパスを取得できる。
var filename = pathname[pathname.length-1];
//結果:page.html
6行目:不要な拡張子を取り除く。
.split(.)で、拡張子とファイル名を分割する。
配列[0]でファイル名だけをfilename2に格納する。
var filename2 = filename.split('.')[0];
//結果:page
7行目:filenameの有無で条件分岐させる
filenameが無い場合(トップページなど)は、「?ref= 」と不自然な表示になってしまうため。
8~11行目: match()で別パラメータが付与済みかどうか判別
変数link
にmatch()で指定した「?id」が含まれているか否かで処理を分ける。
attr()を使って、obj
のhrefを変更する。
if ( link.match("/?id")) {
obj.attr("href",link + "&ref=" + filename2)
//結果: http://www.example/link?id=xxx&ref=page
} else {
obj.attr("href",link + "?ref=" + filename2)
//結果: http://www.example/link?ref=page
}