【Javascript】選択したテキストをクリップボードに自動でコピーする方法

Last updated on 2023年2月9日

---

Javascriptを使って選択したテキストをコピーする方法をご紹介します。
マウスでドラッグしたテキストを自動でクリップボードにコピーできるようになることが目的です。

最初は、Pythonでこの機能を実装しようとしていたのですが、どうしても詰まってしまい、Javascriptでやったほうがいいのでは・・・と言われてやってみたらできたので共有し用途思います。

作りたいもの：ユーザーが文字列を選択すると自動的にクリップボードにコピーしてくれるスクリプト

これを分解して、
Step1.ユーザーが選択した文字列を取得する
Step2.選択された文字列をクリップボードにコピーする
とします。

Step1.　window.getSelectionを使用して選択したテキストを取得

Javascriptでよく使用されるWeb APIのインターフェースであるwindow.getSelectionを使用します。

・ドキュメント：https://developer.mozilla.org/ja/docs/Web/API/Window/getSelection

window.getSelectionはユーザーが選択した文字列の範囲を取得します。toStringメソッドを呼び出すことで文字列を返します。

参考コード（上記ドキュメントより引用）

function foo() {
    var selObj = window.getSelection();
    alert(selObj);
    var selRange = selObj.getRangeAt(0);

}

var selectedText = selObj.toString();

最初にStep1の実装から始めます。
window.getSelectionを使って、ユーザーが選択したテキストを取得する関数を書きます。

function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ 
        selectedText = window.getSelection().toString()
    }
    return selectedText
}

変数selectedTextに選択した文字列を代入し、返します。

Step2. navigator.clipboard.writeText()を使ってクリップボードを操作する

以前はdocument.execCommand(‘copy’);でクリップボードにコピーすることができたのですが現在は非推奨とのことで、別のやり方でやっていきます。

今回のようにクリップボードを操作する場合は、navigator.clipboard.writeText()を使用するのが今後の主流となりそうです。

・ドキュメント：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

使い方は至って簡単。
navigator.clipboard.writeText()にコピーしたいテキストを渡すだけです。

navigator.clipboard.writeText('コピーしたい文章')

今回の場合はコピーしたい文章が予め決まっているわけではなく、ユーザーが選択した文字列になる予定なので、そこを少し工夫したいと思います。

下記が参考コードです。

function copySelectionText(elem){
    var copysuccess 
    try{
        copysuccess = navigator.clipboard.writeText(elem)
    } catch(elem){
        copysuccess = false
    }
    return copysuccess

変数copysuccessにnavigator.clipboard.writeText()を代入するのですが、ここを関数copySelectionTextの引数としておきます。
なお、ここでtry…catch…を使っていますが、このnavigator.clipboard.writeText()が比較的新しい方法で、対応していないブラウザがあるのでその備えとして使っています。

では、実際のスクリプト全体を書いていきます。

function getSelectionText(){
    var selectedText = ""
    if (window.getSelection){ 
        selectedText = window.getSelection().toString()
    }
    return selectedText
}

function copySelectionText(elem){
    var copysuccess 
    try{
        copysuccess = navigator.clipboard.writeText(elem)
    } catch(elem){
        copysuccess = false
    }
    return copysuccess
}

document.body.addEventListener('mouseup', function(){
    var selected = getSelectionText()
    if (selected.length > 0){ 
        var copysuccess =  copySelectionText(selected) 
    }
}, false)

最後のイベントリスナー部分について、
getSelectionTextを呼び出し、変数selectedに選択された文字列を保管します。
その文字列が０より長い場合、copySelectionTextに変数selectedを渡し、クリップボードにコピーします。

以上で、選択した文字列をクリップボードにコピーするスクリプトが完成しました。

余談

最初、Pythonで試そうとしたと書きましたが、実はPythonにもクリップボードを操作する仕組みがあります。
pyautoguiとpyperclipをつかうことで、同じことができないかと悪戦苦闘したのが以下のコードです。

import pyautogui as pya
import pyperclip
def copy_text(request):
        pya.drag()
        pya.hotkey('ctrl', 'c')
        time.sleep(.01)
        sentence= pyperclip.paste()

pya.drag()で文字列を選択し、pya.hotkey('ctrl', 'c')でコピー、pyperclip.paste()でペーストするつもりだったのですが、そもそもpyautoguiはマウスを自動で動かしたりキーボードの操作を自動化するものだったので、どうしても「ユーザーが選択した文字列」を取得することができず、断念しました。

参考:http://www.javascriptkit.com/javatutors/copytoclipboard.shtml

スペシャルサンクス：選択したテキストを自動コピーするスクリプトをPythonで書くにはどうすればいいか聞いたところ、Javascriptでやれと厳しく教えてくれたStackOverFlowのみなさま