1. ホーム
  2. javascript

jQuery / javascriptでリンクが外部であるかどうかをテストしますか?

2023-10-22 16:42:27

質問

リンクが外部リンクか内部リンクかを確認するにはどうしたらよいですか?ご注意ください。

  1. ローカル ドメインをハード コードすることはできません。
  2. http" のテストはできません。http の絶対リンクで自分のサイトにリンクしているのと同じように簡単にできます。
  3. cssではなく、jQuery / javascriptを使いたいのですが。

答えはlocation.hrefのどこかにあると思うのですが、解決策が見当たりません。

ありがとうございます!

どのように解決するのですか?

var comp = new RegExp(location.host);

$('a').each(function(){
   if(comp.test($(this).attr('href'))){
       // a link that contains the current host           
       $(this).addClass('local');
   }
   else{
       // a link that does not contain the current host
       $(this).addClass('external');
   }
});

注:これは単なるクイック&アンプ;ダーティな例です。これは、すべての href="#anchor" リンクを外部リンクとしてマッチさせるでしょう。 を外部リンクとしてマッチさせてしまいます。いくつかの余分な RegExp チェックを行うことによって、改善されるかもしれません。


2016年11月17日更新

この質問はまだ多くのトラフィックを獲得しており、私はこの受け入れられたソリューションがいくつかの場面で失敗することをトンによって言われました。私が述べたように、これは、この問題を解決する主要な方法を示すための非常に迅速で汚い回答でした。もっと洗練された解決策としては <a> (アンカー) 要素でアクセス可能なプロパティを使用することです。この回答で @Daved がすでに指摘しているように、キーとなるのは hostname と現在の window.location.hostname . を比較するのが望ましいと思います。 hostname プロパティが含まれることはないからです。 port に含まれる host

$( 'a' ).each(function() { if( location.hostname === this.hostname || !this.hostname.length ) { $(this).addClass('local'); } else { $(this).addClass('external'); } });

Array.from( document.querySelectorAll( 'a' ) ).forEach( a => { a.classList.add( location.hostname === a.hostname || !a.hostname.length ? 'local' : 'external' ); });