LoginSignup
5
4

More than 5 years have passed since last update.

【jQuery】特定のhref属性に、各サイトURLのファイル名をパラメータとして自動付与する

Last updated at Posted at 2019-03-17

やりたいこと

  • サイト内の「/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
}
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4