JavaScript

JavaScriptで選択範囲の文字列を取得！getSelectionメソッドの使い方

  /

今回はJavaScriptの便利な機能の一つ、getSelectionメソッドを使ったテキスト選択のテクニックについて紹介します。
この方法を使えば、ユーザーがページ上でテキストを選択した際、その選択範囲の文字列を取得し、表示することができます。
初心者の方にもわかりやすいように、一歩ずつ進めていきましょう！

Contents

まずは基本から：getSelectionとは？

JavaScriptのgetSelectionメソッドは、ユーザーがウェブページ上でテキストを選択したとき、その選択範囲の情報を取得するのに使います。この機能は、テキストのコピー＆ペースト、ハイライト表示、特定のテキストの検索といった場面で非常に便利です。

CSSでスタイリング

まずは、ページに適切なスタイルを適用しましょう。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>

　
このCSSコードは、ページのベースとなるフォントやパディング、マージンを設定し、見出しのスタイルを整えます。

HTMLでテキストを表示

次に、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>

JavaScriptで選択範囲の文字列を取得

最後に、JavaScriptを使って選択したテキストをtextareaに表示しましょう。これはgetSelectionメソッドを使用して行います。
getSelectionで選択文字列を抽出し、id=”copy”タグ(textarea)に出力します。

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

　
このコードは、ユーザーがページ上でテキストを選択するたびに、そのテキストを取得しtextareaに表示します。

【getSelection】カーソルで選択した範囲の文字列を表示するデモページ

さて、これで基本的な機能は完成です。以下のデモページで実際に試してみてください。ページ上の任意のテキストを選択すると、そのテキストが下部のtextareaに表示されます。

【getSelection】カーソルで選択した範囲の文字列を表示するデモ

まとめ

今回は、JavaScriptのgetSelectionメソッドを使って、ユーザーがページ上で選択したテキストを取得し、表示する方法を紹介しました。このシンプルなテクニックは、ユーザーの操作性を向上させるだけでなく、開発者にとっても非常に役立つものです。ぜひ、自分のプロジェクトで活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

getSelection 選択文字列
関連記事