URLをリンク化するjQueryプラグインとブックマークレット


URL をリンク化する jQuery のラッパーメソッドプラグインとそれを実行するブックマークレットを作ったので公開します。 以前作った同じような処理をするブックマークレットよりも上品に動作します。 フレームやテキストノードを処理するサンプルコードとしても役に立つと思います。

以下のブラウザで動くことを確認しています。
: Internet Explorer (9.0)
: Chrome (19.0)
: Firefox (12.0)
: Safari (5.1)
: Opera (11.64)

プラグイン

機能

  • ラップ集合とその子孫の全テキストノードを対象に、URL 文字列をリンク化します。
  • 具体的には http:// や https:// で始まる文字列をリンク化します。
    先頭の h または ht が無い場合もリンク化します。
  • 既存のテキストノードを splitText で分割して処理しているため、動的にバインドされたイベントハンドラなどがリセットされずに済みます。
  • オプション引数で属性やコールバック関数を指定できます。

使い方

次のサンプルコードの様に、対象のラップ集合に対し url2link メソッドを呼び出せば良いです。

:javascript:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' charset='UTF-8' src='https://b.tipszone.jp/jquery.url2link.js'></script>
<script type='text/javascript'>
$(function(){
    $('body').url2link();

    // target="_blank" を指定する場合
    $('body').url2link({attr: {target: '_blank'}});

    // 外部サイトへのリンクのみ target="_blank" を指定する場合
    var origin = location.href.match(/^https?:\/\/[^/]+/i)[0];
    $('body').url2link({callback: function(url){
        if (origin != url.match(/^https?:\/\/[^/]+/i)[0])
            $(this).attr('target', '_blank');
    }});
});
</script>

ソースコード

jquery.url2link.js

ブックマークレット

機能

  • document.body と frame および iframe に対し再帰的に上記のプラグインを実行します。
  • 外部サイトへのリンクのみ target="_blank" を指定します。
  • ページ(各フレーム)の読み込みがまだ終わっていない場合には、終わるのを待ってから処理を実行します。
  • Same origin policy error が発生した場合、そのフレームに対する処理はスキップします。
  • 以下の script タグをページ内にあらかじめ書いておくことでも実行できます。

ブックマークレット用リンク

お気に入りなどに登録してご利用ください。
URLのリンク化v2

URL 文字列の例 http://example.com/
tps://example.com/
ttps://tipszone.jp/ https://tipszone.jp/20120604_jquery_url2link/

ソースコード

url2link-2.js

これらのコードは改変や配布を含め自由に使っていただいて構いません。
不具合などありましたら、コメント欄からご連絡ください。

[amazon asin="4798124281" /]

カテゴリー: 記事 タグ: , , , パーマリンク

1 Response to URLをリンク化するjQueryプラグインとブックマークレット

  1. ピンバック: URLをリンク化するブックマークレット | TipsZone

コメントを残す