javascriptで対象タグを選択状態にする

jQueryを使えば、テキストエリアの内容を選択状態にするのは簡単に行えるのですが、タグを選択状態にすることができません。テキストエリアだとプレーンなテキストのみコピーする形になるため。

pタグやhタグ、liタグなどの書式を持ったままコピーする場合にはテキストエリアを利用することは出来ません、この場合javascriptでタグを選択状態にしてやることで、ブラウザのクリップボードへコピーするコマンドと組み合わせることでより便利になります。

javascriptで対象タグを選択状態にする

// テキストエリア以外で要素内を選択する
function selectDomElm(obj){
 // Rangeオブジェクトの取得
 var range = document.createRange();
 // 範囲の指定
 range.selectNodeContents(obj);

 // Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
 var selection = window.getSelection();
 // 選択をすべてクリア
 selection.removeAllRanges();
 // 新規の範囲を選択に指定
 selection.addRange(range);
}

コードはこちらのサイトより参考にさせて頂きました
(クリックしたタグの領域を選択状態にする(jQuery対応) – コンユウメモ)

これに、コピーの動作を加えてやることで要素をクリックしたことでクリップボードに書式付きでコピーさせることができるようになります。

$("p").on('click',function(){
 selectDomElm(this);
 document.execCommand('copy');
});


// テキストエリア以外で要素内を選択する
function selectDomElm(obj){
 // Rangeオブジェクトの取得
 var range = document.createRange();
 // 範囲の指定
 range.selectNodeContents(obj);

 // Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
 var selection = window.getSelection();
 // 選択をすべてクリア
 selection.removeAllRanges();
 // 新規の範囲を選択に指定
 selection.addRange(range);
}

この例ではpタグをクリックすると、選択状態を作りdocument.execCommand(‘copy’)でコピーを実行させています、クリック動作の部分はjQueryを用いて行っています、

どんな使い方があるかというと、Wordpressのテキストエディタでは書式付きで貼り付けすることが出来ます。Wordpressの整形済みテキスト（preコード）に貼り付けを行う場合インデントが全て削除されてしまって平たいコードになって見づらくなってしまいます。

しかしpre自体で囲まれた書式付きのものをそのままテキストエディタにはりつけると、インデントの削除は行われずそのままの形式で貼り付けることが出来ます。Wordpressのテキストエディタに貼り付ける前に一旦preコードでHTMLで出力するアプリを作り、そこでpreの範囲をクリックすることで書式付きでクリップボードへコピーできるように利用しています。

WordPressのビジュアルモードからテキストモードに切り替えて行えば回避出来たりするのですが、この切替場結構面倒で煩わしくてビジュアルモードのままで貼り付けるだけで執筆作業を中断せずに行えるのでこの方法をとっています。