URLとタイトルをクリップボードにコピーする【JavaScript】

この記事では、URLとタイトルをクリップボードにコピーする方法を説明していきます。

execCommandは廃止されている機能で利用が非推奨であるため、他の方法で実現します。

navigator.clipboardを使います。

URLをクリックボードにコピーする

まずはシンプルに現在のページのURLをコピーしてみます。

以下のページで紹介した、locationを使います。

≫現在のページのURL情報を取得・整形するlocation

デモは以下になります。

何も動作しないですが、現在のページのURLがクリップボードにコピーされています。メモ帳などに貼り付けてみてください。

実際のコードは以下になります。

<input type="button" value="コピー" onclick="copyUrl()">

function copyUrl() {
  var url = location.href;
  navigator.clipboard.writeText(url);
}

とてもシンプルですね。

ページタイトルとURLをクリップボードにコピーする

それでは、現在のページのタイトルとURLをクリップボードにコピーしてみましょう。

デモは以下になります。

タイトル＋空白＋URLの文字列がクリップボードにコピーされるはずです。

実際のコードは以下になります。

<input type="button" value="コピー" onclick="copyUrlTitle()">

function copyUrlTitle() {
  var url = location.href;
  var title = document.title;
  navigator.clipboard.writeText(title + " " + url);
}

document.titleで、meta titleを取得しています。

この部分は好みに応じて変更いただければ大丈夫です。

（例えばh1タグにidをつけて、document.getElementById()でテキストを取得するなど）