好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

Javascriptを使って選択しているテキストを取得する

インターン先で担当しているお仕事に使えそうなのでメモします。

コード

chromeでの使用を想定しています

<div>あいうえお</div>
<button id="btn">取得する</button>
window.onload = function() {

  var btnEl = document.getElementById('btn');
  var str = '';

  btnEl.addEventListener('click', function() {

    var str = window.getSelection().toString();
    alert(str);

  }, false);

}

サンプル

ポイント

getSelection()メソッドを使うことで現在選択している範囲をSelectionオブジェクトとして取得することができます。
SelectionオブジェクトからtoString()メソッドを使って文字列を取得すればokです。

※window.getSelection()はdocument.getSelection()でもいいっぽい

まとめ

jQuery.selection使えやって話ですが、どうやって実装されてるのかな〜と気になったので調べてみました。