Last updated on 2023年2月9日
Contents
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に選択した文字列を代入し、返します。
以前は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のみなさま