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

公開：2012年04月25日 14:51

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

さすがに装飾を施したツールチップは邪魔なのでブラウザデフォルトのものを使うことにしました。つまり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);
      }
    }

  });

});