ツールチップにリンク先のドメインを表示する

以前スラドがリンク先のドメインを表示してるのを見て便利かもなーと思った。
けど自分で使う場合に地の文に出すのはちょっと……となって、ならツールチップ使えばいいんじゃねと考えて作ってみた。

http://unformedbuilding.com/demo/test/20120327/

さすがに装飾を施したツールチップは邪魔なのでブラウザデフォルトのものを使った。つまり title 属性を作って入れた。
じゃあ最初から title 属性があるものはどうするんだ、となるので、そっちには何もしないことに。最初からある文字列に追加してもいいけど長くなるのでやめた。

一応、内部リンクを除くために http と ftp から始まる URL のみにした。
同様の理由で除外ドメインを指定できるようにしてある。

jQuery(function ($) {

  var exclude, excheck;
  exclude = ['www.bing.com', 'www.yahoo.co.jp'];
  excheck = function (url) {
    for (var i = 0; i < exclude.length; i++) {
      if (url === exclude[i]) {
        return true;
      }
    }
    return false;
  };

  $('#target').find('a').each(function () {
    var tip = $(this).attr('title');
    if (!tip) {
      var url = $(this).attr('href');
      if(url.match(/^(https?|ftp)/)) {
        url = url.replace(/^(https?|ftp):\/\/([0-9a-zA-Z\.\-_]+\.[0-9a-z]+)\/?.*$/, '$2');
        if (!excheck(url)) {
          $(this).attr('title', url);
        }
      }
    }
  });

});

向こうのブログに書く必要もないというか、そもそもちゃんと試してないのでこっちに置いとく。

追記：

http://twitter.com/hell2u/statuses/184461790657249280
ということなので title 属性の有無に関わらず表示するようにした。
最初から入ってる title 属性値の直後に改行を追加する(Firefox は12からだそうで、今はだめ)。

http://unformedbuilding.com/demo/test/20120327-2/