この記事は以前はてなダイアリーで書いたものを書き直したものです。

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

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

サンプルファイルをダウンロード

さすがに装飾を施したツールチップは邪魔なのでブラウザデフォルトのものを使うことにしました。つまり title 属性を作って入れていきます。
じゃあ最初から title 属性があるものはどうするんだ、となるので、そっちには初期の文字列の直後に改行を入れて、その後にドメイン名を表示することにしました。

一応、内部リンクを除くために http から始まる URL のみにしています。正規表現は適当なので使うなら上手いことやってください。
同様の理由で除外ドメインを指定できるようにもしました。

HTML と CSS はあんまり関係ないので、jQuery 部分だけを書いておきます。

jQuery(function ($) {

  var exclude, excheck, domaincheck;

  // 除外設定
  exclude = ['www.bing.com', 'www.yahoo.co.jp'];
  // 除外判定
  excheck = function (domain) {
    // 除外ドメインに *マッチしない* 場合 -1 を返す
    return $.inArray(domain, exclude);
  };
  // ドメインを抜き出すのに使う正規表現
  domaincheck = /^https?:\/\/([0-9a-zA-Z\.\-_]+\.[0-9a-z]+)\/?.*$/;

  // 指定セレクタ内の href 属性を持つ a 要素
  $('#target').find('a[href]').each(function () {

    var defaulttip, url, tip, urlmatch;

    // title 属性に入っている文字列
    defaulttip = $(this).attr('title');
    // href 属性に入っている文字列 (リンク先 URL)
    url = $(this).attr('href');
    // title 属性に何か書かれていたら、その直後に改行を追加する
    tip = defaulttip ? defaulttip + '\u000A' : '';
    // リンク先 URL からドメイン部分を前に指定した正規表現でチェック
    // マッチしたら配列に、しなければ null になる
    urlmatch = url.match(domaincheck);

    // URL がドメインチェックでマッチしている場合
    if (urlmatch) {
      // ドメイン名
      var domain = urlmatch[1];
      // ドメイン名を除外判定する
      // 除外判定されなかったら -1 が返ってくる
      if (excheck(domain) < 0) {
        // ドメイン名を [] で囲って、前に作った tip に追加
        tip = tip + '[' + domain + ']';
        // title 属性に入れる
        $(this).attr('title', tip);
      }
    }

  });

});