jQueryを使ってみよう その4

All Aboutの「スパムを防ぐ！メールアドレスの公開方法」を読んで、jQueryを使った別の方法を考えてみました。

まずこの記事の対策1にあるように、メールアドレスはHTMLに直接テキストで記述するのではなく、代わりにメアドを記した画像を表示させるようなタグを書いておきます。その際「email」というクラスを割当てておきます。

<p>E-mail： <img src="images/mail.gif" width="88" height="14" alt="mail address" class="email" /></p>

また以下のように、アンカータグを使用してメアドのリンクを貼ったり、alt属性にメアドを記述すると、スパム業者にメアドを収集されてしまい、わざわざ画像を使用した意味がなくなるのでご注意を。

<p>E-mail： <a href="mailto:example@gmail.com"><img src="images/mail.gif" width="88" height="14" alt="example@gmail.com" class="email" /></a></p>

上記のような対策で、メアドは収集されなくなりますが、これだとリンクがなかったりして不便です。なので、今回はjQueryを使って、この画像をクライアント側で動的にテキストリンクに変換します。コードは以下のような感じです。

//ページロード時に関数を実行
$(function (){
	convertMailAddImgToTextLink();
});

//メアド画像をメアドのテキストリンクに変換する関数
function convertMailAddImgToTextLink(){
 var obj = $('img.email');
 if(obj.length == 0) return;
 var email1 = "example";
 var email2 = "gmail.com";
 var eamil = email1 + "@" + email2;
 obj.after('<a href="mailto:' + eamil + '">' + eamil + '</a>');
 obj.remove();　//<img>タグを削除
}

そうすると、「email」といクラス名をもつimgタグはすべて以下のようにテキストリンクへと書き換えられます。

<p>E-mail:<a href="mailto:example@gmail.com">example@gmail.com</a></p>

なおスクリプト内でメールアドレスを、以下のように2つの変数に代入して@マークで結合していますが、

var email1 = "example";
var email2 = "gmail.com";
var eamil = email1 + "@" + email2;

これはJavaScript内のコードもスパムエンジンが読んでいる場合は、単純に

var email = "example@gmail.com";

と記述すると、やはりメアドが収集されてしまうからです。

またjavaScriptを無効にしている環境でも、もともとの画像は表示されるので、最低限の情報提供は確保できます。

例によって、思いつきで考えたスクリプトですので、ご使用になられる場合は、自己責任でお願いしまーす。