jQueryの正規表現をしようして、リンク先によって拡張子を変更する

  • 2014年10月27日
jQueryの正規表現をしようして、リンク先によって拡張子を変更する

JQeuryの要素セレクターで正規表現を使用し、リンク先の拡張子やアドレスや要素などを判別して、タグのclassを変更する方法をご紹介します。

簡単な説明

今回はjQueryのaddClass()という関数を使用しています。jQueryのセレクタは正規表現も使用することができます。それを使用することでif文などの条件分岐を使用せず、簡単なコードにしました。セレクタの条件式を変更することで他にも色々な変更ができるはずです。

拡張子のclassを変更

xlsファイルへのリンクにxlsというclassをつける

$("a[href$=xls").addClass("xls");

pdfファイルへのリンクにpdfというclassをつける

$("a[href$=pdf]").addClass("pdf");

zipファイルへのリンクにzipというclassをつける

$("a[href$=zip]").addClass("zip");

jpgファイルへのリンクにjpgというclassをつける

$("a[href$=jpg]").addClass("jpg");

pngファイルへのリンクにpngというclassをつける

$("a[href$=png]").addClass("png");

txtファイルへのリンクにtxtというclassをつける

$("a[href$=txt]").addClass("txt");

xmlファイルへのリンクにxmlというclassをつける

$("a[href$=xml]").addClass("xml");

mp3ファイルへのリンクにmp3というclassをつける

$("a[href$=mp3]").addClass("mp3");

mp4ファイルへのリンクにmp4というclassをつける

$("a[href$=mp4]").addClass("mp4");

movファイルへのリンクにmovというclassをつける

$("a[href$=mov]").addClass("mov");

リンクのclassを変更

外部リンクへのリンクにblankというclassをつける
$(“a[target=’_blank’]”).addClass(“blank”);
twitterであればtwitterというclassをつける
$(‘a[href^=”https://twitter.com/”]’).addClass(“twitter”);
flickrであればflickrというclassをつける
$(‘a[href^=”http://www.flickr.com/”]’).addClass(“flickr”);
wordoressであればwpというclassをつける
$(‘a[href^=”http://wordpress.org/”]’).addClass(“wp”);
mailtoであればmailtoというclassをつける
$(‘a[href^=”mailto:”]’).addClass(“mailto”);

まとめ

最後に上で紹介しましたコードを関数化してまとめました。使用するときにchangelLinkClass()
を呼び出してもらうだけで使用できます。

function changelLinkClass() {
  //xlsファイルへのリンクにxlsというclassをつける 
  $("a[href$=xls], a[href$=xlsx]").addClass("xls");
  //pdfファイルへのリンクにpdfというclassをつける
  $("a[href$=pdf]").addClass("pdf");
  //zipファイルへのリンクにzipというclassをつける
  $("a[href$=zip]").addClass("zip");
  //jpgファイルへのリンクにjpgというclassをつける
  $("a[href$=jpg]").addClass("jpg");
  //pngファイルへのリンクにpngというclassをつける
  $("a[href$=png]").addClass("png");
  //txtファイルへのリンクにtxtというclassをつける
  $("a[href$=txt]").addClass("txt");
  //xmlファイルへのリンクにxmlというclassをつける
  $("a[href$=xml]").addClass("xml");
  //mp3ファイルへのリンクにmp3というclassをつける
  $("a[href$=mp3]").addClass("mp3");
  //mp4ファイルへのリンクにmp4というclassをつける
  $("a[href$=mp4]").addClass("mp4");
  //movファイルへのリンクにmovというclassをつける
  $("a[href$=mov]").addClass("mov");
  //外部リンクにblankというclassをつける
  $("a[target='_blank']").addClass("blank");
  
   //twitterであればtwitterというclassをつける
  $('a[href^="https://twitter.com/"]').addClass("twitter");	

  //flickrであればflickrというclassをつける
  $('a[href^="http://www.flickr.com/"]').addClass("flickr");
	
  //wordoressであればwpというclassをつける
  $('a[href^="http://wordpress.org/"]').addClass("wp");
	
  /mailtoであればmailtoというclassをつける
  $('a[href^="mailto:"]').addClass("mailto");
}

$(function(){
  
  //リンク先の拡張子によってclassを変更する
  changelLinkClass();
	
});