もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第20回 jQueryでAJAX入門:正規表現でサイトに表示したTwitterにリンクをつける

この記事を読むのに必要な時間:およそ 9 分

Twitterにリンクをつける

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

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

URLにリンクをつける

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

URL用の正規表現

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

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

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

URL用の正規表現を使い置換するサンプル

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で表示させることができます。

#jQueryのhashタグがついた発言を表示するURL

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

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

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

hashタグ用の正規表現

/#(\w+)/g

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

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

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のプラグインに導入して,表示させたいユーザーの発言一覧にリンクを付けて表示させるようにしてみましょう。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入