Twitterにリンクをつける

前回は.getJSON()メソッドを使い，Twitter上での発言をサイトに表示できるようにしてみました。しかし，時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが，前回のままではそのままテキストとして表示されるだけになってしまいます。

以前，フォームの内容を紹介した時に正規表現の紹介をしましたが，今回はその正規表現を利用して，Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。

URLにリンクをつける

まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために，正規表現を利用します。

/(http:\/\/[\x21-\x7e]+)/gi

「[\x21-\x7e]」の部分は16進数で表現したASCII文字で，「[\x21-\x7e]」を利用するだけで，空白を除く大文字・小文字のアルファベットと各種記号を抜き出すことができる。

これを.replace()メソッドを使い置換するサンプルをみてみましょう。

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //URLをリンク付きに置換
        txt = txt.replace(/(http:\/\/[\x21-\x7e]+)/gi,'<a href="$1">$1</a>');
        $(this).html(txt);
    });
});

これでURL部分にリンクがつきます。

「<a href="$1">$1</a>」の部分での$1というのは，今回の例で言うと，正規表現で該当したURLがそこに代入されます。正規表現中の括弧でまとめたものを，順に$○で指定することができるのです。今回は正規表現のURL全体を括弧でまとめているので$1は該当したURLがそのまま入ることになります。

hashタグにリンクをつける

次にhashタグにリンクをつけてみます。Twitter上の発言でつけたhashタグは，Twitter内の検索を利用することでまとめてみることができます。

例えば「#jQuery」というhashタグをつけたものを見つけたい時は，下記のURLで表示させることができます。

http://twitter.com/#search?q=%23jQuery

#jQueryの検索をすると，その文字列は「%23jQuery」となります。「#」が「%23」となるのです。

さて，hashタグを見つける正規表現をみてみましょう。

/#(\w+)/g

数字とアルファベットだけでいいので，シンプルになります。「#」を括弧の外に出しているのは.replace()メソッドを利用した際の$1で代入する際に「#」を含めない為です。

それではhashタグをリンク付きに置換するサンプルを見てみましょう。

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //hashタグをリンク付きに置換
        txt = txt.replace(/#(\w+)/g,'<a href="http://twitter.com/#search?q=%23$1">#$1</a>')
        $(this).html(txt);
    });
});

これでhashタグに，hashタグ一覧表示のURL付きリンクになりました。

@ユーザー名にリンクをつける

最後に，@ユーザー名が含まれていた場合，そのユーザーのタイムラインへのリンクを付ける正規表現を紹介します。先程のhashタグの「#」を「@」にすることで，文中の@ユーザー名は見つけることができます。

/@(\w+)/g

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //ユーザー名（スクリーン名）をリンク付きに置換
        txt = txt.replace(/@(\w+)/g,'<a href="http://twitter.com/$1">@$1</a>'); 
        $(this).html(txt);
    });
});

これで各種，リンクを付けるサンプルが出そろいました。これらを，前回紹介したTwitterのプラグインに導入して，表示させたいユーザーの発言一覧にリンクを付けて表示させるようにしてみましょう。