JavaScriptで画面上の文字列をクリップボードにコピーする方法

1. はじめに
2. Clipboard API and events を使う方法
3. Selection API を使う方法
4. おわりに

1. はじめに

ウェブページ上の文字列をクリップボードにコピーする JavaScriptの書き方を 2つ紹介します。

Clipboard API and events を使う方法
Selection API を使う方法

スポンサードリンク

2. Clipboard API and events を使う方法

Clipboard API and events を使います。こちらの方が簡単です。

(1) まず、画面上の文字列を取得します。ここでは id="pID" という属性を持った <p> タグの内容を取得して、変数 txt にセットしたとします。

const txt = document.querySelector('#pID').innerText;

(2) この文字列をクリップボードにコピーするには以下を記述するだけです。

navigator.clipboard.writeText(txt)

参考

ブラウザの対応状況

3. Selection API を使う方法

Selection API を使う方法です。結構面倒です。

メモ

クリップボードに文字列をコピーするには、clipboard.js というライブラリを使うこともできます。このライブラリの中では、GitHub – zenorocha/select という「HTML要素の文字列を選択する」ための JavaScriptコードが利用されています。

これらのライブラリは npmパッケージとしても提供されており、それぞれのリンクは以下となります。

今回はライブラリを使いませんが、clipboard.js と select のソースコードは参考にしました。

(1) 基礎知識

主に selection というオブジェクトと range というオブジェクトを利用します。画面上の要素の範囲を指定したり、その部分を選択状態にしたり、といった処理を行うことができます。

参考

ブラウザ実装状況

(2) プログラムの書き方

<p>要素内の文字列をクリップボードにコピーする例で説明します。

やりたいのは、「コピーしたい要素を選択状態にする」→「クリップボードにコピーする」という処理です。

最低限必要になるソースコードは以下です。説明はコメントに書いておきました。

HTML

<p id="targetID">この文字列をクリップボードにコピーします！</p>

JavaScript

// 目的の文字列が入っている p要素を取得します。
const element = document.querySelector('#targetID');
// seletionオブジェクトを取得します。
const selection = window.getSelection();
// rangeオブジェクトを生成します。
const range = document.createRange();
// rangeオブジェクトに p要素を与えます。
range.selectNodeContents(element);
// 一旦、selectionオブジェクトの持つ rangeオブジェクトを削除します。
selection.removeAllRanges();
// 改めて先程生成した rangeオブジェクトを selectionオブジェクトに追加します。
selection.addRange(range);
console.log('選択された文字列: ', selection.toString());
// クリップボードにコピーします。
const succeeded = document.execCommand('copy');
if (succeeded) {
    // コピーに成功した場合の処理です。
    console.log('コピーが成功しました！');
} else {
    // コピーに失敗した場合の処理です。
    console.log('コピーが失敗しました!');
}
// selectionオブジェクトの持つrangeオブジェクトを全て削除しておきます。
selection.removeAllRanges();