カミジン@ファンタの平穏な日常 Blog

パソコン・カメラ・アニメがないと3日持ちません。そんな学生のダラダラ日記。

イラスト:con_cen_t

0サイトにメールアドレスを表示したい場合

カテゴリー:Java Script

どうもカミジンです。

サイトにメールアドレスを表示したい場合。
みなさんどうしているんでしょうか。

画像ですか?
でもメールするときに一文字づつ書き写すのは勘弁。

「example☆example.com ☆→@にしてね!」ですか?
なかなかダサいです。

簡易的にJavaScriptを使って隠そうかなと言う講座的なあれです。

最終目標。

<a href="mailto:example@example.com">メールはこちら!</a>

jQueryを一部分で使いますが、ロジックには不要です。
適当に書き換えてください。

暗号化

って程でもないんですけど、文字列の順番をヒックリ返しましょう。
ローカルのJavaScriptで処理してください。

var mail = "example@example.com".split("");
mail.reverse();

と、JavaScriptを打ってやると

 ["m", "o", "c", ".", "e", "l", "p", "m", "a", "x", "e", "@", "e", "l", "p", "m", "a", "x", "e"]

という配列になると思います。

復号化

ここからはローカルでの作業ではなく、公開する側のJSに書いてくださいね。
さっきのをコピペして、次の部分を書き換えてください。

var mail = ["m", "o", "c", ".", "e", "l", "p", "m", "a", "x", "e", "@", "e", "l", "p", "m", "a", "x", "e"].reverse().join("");

あら不思議!mail変数にexample@example.comが!

これを

<a href="#" id="mailAddress">Email</a>

としておいたDOMに

$("#mailAddress").attr("href", "mailto:"+mail );

で挿入! 完璧です。
iPhoneからリンクを長押しして連絡先に追加とかできるし良い感じです。

実装例
http://kamijin-fanta.info/

.

Base64変換とかしてる人もいるけど、そこまで頑張った所で
JavaScriptを解析できるBOTなら文字列反転させてるだけのプログラムでも耐性は変わらん。

直接HTMLに書くのはセキュリティ上どうかと思うけど、画像も利便性が下がるしJavaScriptっていう選択が一番合理的かと。

aタグの中にメールアドレス書いた画像を入れておいて、JavaScriptで後から書き換えするとJavaScriptが無効な環境でも見れていい感じだと思うよ。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>