JavaScriptのgetSelectionを使ってカーソルで選択範囲の文字列を表示する方法｜DAD UNION

JavaScriptのgetSelectionを使ってカーソルで選択した範囲の文字列を表示する方法をご紹介します。
HTMLページ上に掲載のテキストをマウスカーソルで選択すると、選択範囲の文字列をtextareaに表示します。

Contents

カーソルで選択した範囲の文字列を表示するCSSの記述
ページ内テキストと選択範囲の文字列出力先HTMLの記述
getSelection()を使って選択範囲の文字列を返し、文字列を出力するJavaScript処理
【getSelection】カーソルで選択した範囲の文字列を表示するデモページ

カーソルで選択した範囲の文字列を表示するCSSの記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
h2{
  font-size:20px;
}
</style>

ページ内テキストと選択範囲の文字列出力先HTMLの記述

※textareaにページ内の選択範囲文字列を出力します。

<h1>マウスカーソルで選択した範囲の文字列をtextareaに表示します。<br>本ページの文字列をマウスカーソルで選択してみて下さい。</h1>
<br>

<h2>abcdefghijklmnopqrstuvwxyz</h2>
<br>
<h2>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</h2>
<br>
<h2>がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽ</h2>
<br>
<br>

<div>以下に本ページで選択した範囲の文字列を表示します。</div>
<textarea id="copy" cols="100" rows="18"></textarea>

getSelection()を使って選択範囲の文字列を返し、文字列を出力するJavaScript処理

※getSelectionで選択文字列を抽出し、id=”copy”タグ(textarea)に出力します。

<script type="text/javascript">
document.onselectionchange = function() {
  var cpytxt = document.getSelection();
  document.getElementById("copy").textContent = cpytxt;
}
</script>