[jQuery] imgタグを含まないaタグ(外部リンク)にtarget=_blankを付けてアイコンを表示する方法

かなり欲張りなタイトルですが、こういう感じです。

1. 外部リンクである<a>タグにtarget=_blankを付ける
2. 外部リンクである<a>タグの後にアイコンを付ける
   • ただし<img>を包括する<a>タグは除く

検索したら出てきた方法

$('a[href^="http://"]')
  .not('a[href^="http://hoge.hoge/"]')
  .click(function () {
    window.open($(this).attr("href"), "_blank");
    return false;
  })
  .not(":has(img)")
  .addClass("icon-class");

外部リンクである<a>タグをクリックした際にtarget=_blankを付けてるようです。
これでも問題はないのですが、ドメインを変更やローカル環境でのテストなどメンテナンスが面倒くさいです。

私の場合

色々と方法はあるかと思いますが、個人的にはシンプルでメンテナンスのしやすい以下の方法で解決しています。

var host = new RegExp("/" + window.location.host + "/");

$("a").each(function () {
  if (!host.test(this.href)) {
    var $this = $(this);

    // 外部リンクに target=_blank を付ける
    $this.attr("target", "_blank");

    // 画像を包括していない<a>タグにアイコンを付ける
    $this.not(":has(img)").append($.parseHTML('<span class="icon-popup" />'));
  }
});

1. 各<a>タグを検索します。実際は .find() などで検索範囲を狭めるのが良いです
1. 正規表現を使い、表示しているページのホストと<a>タグのhrefがとマッチしないかをチェックします。
2. マッチしない場合(=外部リンク)、target=_blankを付けます。
3. マッチしない場合(=外部リンク)で、画像を包括していないなら<a>タグにアイコンを付けます。