.match()

JavaScriptの.match()で外部リンクのaタグにtarget=”_blank”とrel属性を付与

2022年4月5日2022年4月9日 3分

以前作成した a タグに target="_blank"とrel属性を付与するスニペットに、「外部リンクの時だけ」という条件をつけたスニペットを作りました。

ちなみに以下は「全てのリンクにtarget="_blank"とrel属性を付与するスニペット」です。

2022年4月3日JavaScriptの.querySelectorAll()でaタグにtarget=”_blank”とrel属性を追加

かかかず

今回の記事の方が実用的なスニペットです。

比較的簡単なコードで実装できるので、ぜひ参考にしてみてください。

.match()
aタグにtarget=”_blank”とrel属性を付与したサンプル
実装の手順と方法
ざっくりとしたコードの解説
- HTML
- JavaScript
さいごに

.match()

JavaScriptの .match() は、文字列の照合結果を受け取るメソッドです。

element.match(検索条件)

一般的に文字列に含まれている特定の文字を検索したいときに使うメソッドで、この記事では if の条件分岐で使っています。

aタグにtarget=”_blank”とrel属性を付与したサンプル

早速サンプルです。

yahoo・Google・楽天市場の a タグの外部リンクには target="_blank" とrel属性が付きます。一方、当サイトのような内部リンクには target="_blank" などの属性がつかない通常のリンクです。

ちなみに、a タグにtarget="_blank" をつける場合は "noopener noreferrer" を付与することが推奨されます。その理由や詳細については以下の記事と併せてご覧ください。

2021年7月11日rel属性noopener・noreferrer・noopener・sponsoredの効果と役割

かかかず

rel属性を使いこなせると、かっこいいです。

実装の手順と方法

実装の手順と方法について、まずは簡単に解説します。

HTMLを記述

HTMLを設置したい場所に記述します。

コードを表示

<ul class="linkList">
<li><a href="https://www.yahoo.co.jp/">yahoo</a></li>
<li><a href="https://dubdesign.net/javascript/queryselectorall-href/">DUBDESiGNの記事</a></li>
<li><a href="https://dubdesign.net/">DUBDESiGNのトップページ</a></li>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.rakuten.co.jp/">楽天市場</a></li>
</ul>

ので、設置条件によっては割愛してOKです。

JavaScriptの記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  for (i = 0; i < hrefLink.length; i++) {
const urlAdd = hrefLink[i].href;
console.log(urlAdd)
if (urlAdd.match(location.hostname)) {
  }
else if (urlAdd.match(/^(https?|ftp):\/\//)) {
  hrefLink[i].target = "_blank";
  hrefLink[i].rel = "noopener noreferrer";
  hrefLink[i].classList.add('outLink');
}
}
});

かかかず

これで完了です。

ざっくりとしたコードの解説

コードはHTMLとJavaScriptの2種です。サンプルのCSSを多少いじっていますが、レイアウトをいじっている程度なのでコードは割愛させてください。

HTML

HTMLは、li で a タグを並べたシンプルな作りです。

<ul class="linkList">
<li><a href="https://www.yahoo.co.jp/">yahoo</a></li>
<li><a href="https://dubdesign.net/javascript/queryselectorall-href/">DUBDESiGNの記事</a></li>
<li><a href="https://dubdesign.net/">DUBDESiGNのトップページ</a></li>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="https://www.rakuten.co.jp/">楽天市場</a></li>
</ul>

JavaScriptで target="_blank"と rel属性 を追加するので、HTMLはこれだけでOKです。

JavaScript

JavaScriptは、まずはじめに対象とする要素を .querySelectorAll() で指定します。その後、.addEventListener の「DOMContentLoaded」のタイミングで、 for文のループを回し、内部リンクの場合と、外部リンクの場合で処理を分けます。

const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  for (i = 0; i < hrefLink.length; i++) {
const urlAdd = hrefLink[i].href;
console.log(urlAdd)
if (urlAdd.match(location.hostname)) {
  }
else if (urlAdd.match(/^(https?|ftp):\/\//)) {
  hrefLink[i].target = "_blank";
  hrefLink[i].rel = "noopener noreferrer";
  hrefLink[i].classList.add('outLink');
}
}
});

そして、外部リンクだった場合、target="_blank"と rel属性 を付与し、「outLink」のclass名を追加するようにしています。

かかかず

class名を追加するのは見た目で違いを持たせる為なので、不要な場合は .classList.add の一文は削除してもOKです。