jQuery / javascriptでリンクが外部であるかどうかをテストしますか?
質問
リンクが外部リンクか内部リンクかを確認するにはどうしたらよいですか?ご注意ください。
- ローカル ドメインをハード コードすることはできません。
- http" のテストはできません。http の絶対リンクで自分のサイトにリンクしているのと同じように簡単にできます。
- 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' );
});
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] JSのDateからDay名
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法