今回はコンテンツの中にある、メールアドレスに自動でリンクを付ける、ということをやってみたいと思います。
CMSを使って動的なコンテンツを作るときや、ユーザからの入力を受け付けるWebアプリケーションでいちいちユーザがリンクを設定しなくてもよくなるのし操作性が上がるかなーと思います！
既に『jQuery Hyperlink all email addresses』という素晴らしいプラグインが公開されていますが、サイト内に使うプラグインをむやみやたらに増やしたく無かったのと、勉強を兼ねてプラグインを使わずに実装してみることにしました。
DEMO
まずは、実際の動作イメージはこんな感じです。
実装方法
実装にあたって下記のような考えで実装を進めました。
- HTMLを文字列として取得しておく
- 取得した文字列から正規表現を使ってメールアドレスを配列として取得
- 文字列中のメールアドレスをそれぞれ<a>タグで囲って置換する
- 置換したHTMLの文字列を反映
HTMLを用意
今回のテーマはプラグインを使わずに、コンテンツのテキストにあるテemailアドレスに自動でリンクを付けることです。
例えば、『exsample@mail.com』などのテキストが該当します。
『exsample@test』や『@mail.com』などのテキストにはリンクはつきません。メールアドレスを判定する際に使用している正規表現は、マイクロソフトがサンプルとして掲載しているものを参考にしています。
How To: ASP.NET への入力を制約するために正規表現を使用する方法
『.contents』の中にあるメールアドレスを自動でリンクにしたいと思います。
JSを実装
$(function(){
// セレクタの指定と、HTML文字列を取得する
var $target = $(".contents");
var html = $target.html();
// メールアドレスの判定用正規表現
// 参考: http://msdn.microsoft.com/ja-jp/library/ff650303.aspx
var emailReg = /[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9}/g;
// HTMLが取得出来ていなければ処理しない
if( html != "" && html != undefined ){
// 文字列の中からメールアドレスを全て配列として取得する
var match = html.match( emailReg );
if( match && match instanceof Array ){
// 配列を回して、それぞれのメールアドレスをタグに置換する
for( var i = 0; i '+email+'' );
}
// 配列を回し終えたら、置換したHTMLをターゲットへ反映する
$target.html( html );
}
}
});
どうでしょうか？ HTMLに書いていたメールアドレスが自動でリンクに代わって、クリックするとメーラーが立ち上がるかと思います。
件名や本文を付けるときは、HTMLを置換してaタグを作っている箇所で、『?subject=件名&body=内容』 のような形式で指定すると実現出来ます。
ただ、日本語を指定するとユーザ側の環境によっては文字化けしてしまうことがあるので注意が必要です。
コメントアウトやサンプルのHTMLにも書いているのですが、メールアドレスを判定する際に使用している正規表現はマイクロソフトのサンプルに載っていたものを参考に、少し変更を加えて使用しています。
