完全に備忘録です。
前提条件
- jqueryをheadタグ内で読み込んでいる
- ES2015(ただlet使用しているだけ…)を使用しても問題ない状況である
$(function() {
$('a').each(function() {
let href = $(this).attr('href');
let target = $(this).attr('target');
// href属性がhttp(s)で始まっているか
let link = href.match(/^https?:\/\//);
if ( link == null ) return;
// target属性に先客がいないか
if ( typeof target === 'undefined' || target === false ) return;
// ドメインが閲覧中ページと同じか
if ( href.indexOf(location.host) != -1) return;
$(this).attr('target', '_blank');
$(this).attr('rel', 'noreferrer noopener');
}
});
メモ
- aタグにさらにクラスを加えても良し
- jQuery非依存のコードもあとで残しておく
- aタグすべてを対象にするのではなく指定クラスを持ったaタグだけに処理対象をしぼった方がブラウザに優しい
- クラスをつけれないようなユーザーが操作する状況があるのならaタグ全般に処理した方がユーザーに優しい