<a>タグに外部リンクが指定されている場合、jqueryを使い自動でターゲット属性を付与したい。

Question

現在のドメイン以外のリンクが<a>タグに指定されている場合、
ターゲット属性を自動で付与できるようにしたいです。

http://www.aabbcc.co.jp/index.html
↑こちらのドメインで表示している時

<a href="http://www.XXYYZZ.co.jp/index.html">...</a>
↑のようなリンクが指定されている場合、自動でターゲット属性を付与したい。

また合わせて、リンク先にPDFファイルが指定されている場合（test.pdf）
も同様にターゲット属性を付与できるようにしたいです。

解決方法をご教授いただければと思います。

<div id="contents">
<ul>

<li>
<a href="/sample/01.html">
<p class="copy">テキストが入りますテキストが入りますテキストが入ります</p>
</a>
</li>

<li>
<a href="http://www.XXYYZZ.co.jp/index.html">
<p class="copy">テキストが入りますテキストが入りますテキストが入ります</p>
</a>
</li>
<!--↑ブランクを指定したい-->

<li>
<a href="test.pdf">
<p class="copy">テキストが入りますテキストが入りますテキストが入ります</p>
</a>
</li>
<!--↑ブランクを指定したい-->

</ul>
</div>

// <div id="contents"></div>内だけで自動振り分けできるようにしたいので
//eachでループできればと考えています。
$('#contents').each(function(){
  
}

Comments

[kei344]

例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

$('#contents a').each(function(index, element) {
  if (element.host != location.host) {
    element.target = '_blank';
  } else if (element.pathname.slice(-4).toLowerCase() === '.pdf') {
    element.target = '_blank';
  }
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/host

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname

Answer 2

// #contents内のaタグだけを繰り返します
$('#contents a').each(function(index){
    var href = $(this).prop('href');
    // .pdfで終わる、またはURLに自ドメインを含まない
    if((href.lastIndexOf('.pdf') == href.length - '.pdf'.length)
        || (href.indexOf(document.domain) == -1)) {
        // 対象のaタグにtarget=_blankを設定
        $(this).attr('target', '_blank');
    }
});

Answer 3

たとえばこんな感じです

$(function(){
  $('a').filter(function(){return $(this).attr('href').match(/^http|\.pdf$/)}).attr('target','_blank');
});

#追記
前方一致や後方一致だけならセレクタで十分だったかもしれません

$(function(){
   $('a[href^="http"],a[href$=".pdf"]').attr('target','_blank');
});

Comments

[退会済みユーザー]

<a href="//teratail.com/questions/93271" > 形式を無視してるが質問者は意図してないから問題ないか

[yambejp]

asahina1979さん、ご指摘ありがとうございます。

filterにしてもセレクタにしても例示してあれば、
あとはユーザー側の運用次第ですね
サンプルの「http」始まりだって「http.htm」かもしれないし、
あまり深く考えないようにしています。
hrefは手で書いているみたいですから、その範囲でユーザーが工夫すればいいと思います