ウェブページ上のテキストを簡単にコピーできるJavaScript

コード

ウェブページ上のテキストを簡単にコピーできるJavaScript

document.addEventListener('DOMContentLoaded', () => {
  const copyButtons = document.querySelectorAll('button[data-url]');
  copyButtons.forEach(button => {
    button.addEventListener('click', async () => {
      const url = button.dataset.url;
      try {
        const tmp = button.textContent;
        await navigator.clipboard.writeText(url);
        button.textContent = 'コピーしました';
        setTimeout(() => {
          button.textContent = tmp;
        }, 1000);
      } catch (error) {
        console.error(error);
      }
    });
  });
});

解説

質問のjsコードは、HTMLの中にあるdata-url属性を持つbutton要素を取得し、それぞれにクリックイベントのリスナーを登録するコードです。

クリックイベントが発生したら、button要素のdata-url属性の値を取得し、navigator.clipboard.writeText()メソッドを使ってクリップボードにコピーします。

コピーに成功したら、button要素のテキストを「コピーしました」と変更し、1秒後に元に戻します。

コピーに失敗したら、console.error()メソッドでエラーを表示します。