テキストが選択・ドラッグされたときに、選択された文章を取得する方法【Javascript/jQuery】

ページの中のテキストが選択やドラッグされたときにイベントを発火して、選択された文章を取得する方法のメモです。

やりかた

javascriptやjqueryには、「ドラッグされたことを検知するイベント」はないみたいなので、　jqueryのon.('mouseup')で代替します。
主な流れは下の通り

1. on.('mouseup')でイベント発火
2. window.getSelectionでselectionオブジェクトを取得
3. 上のオブジェクトをtoString()で文章を抽出
4. 文章が空文字もしくは改行文字でないかチェック(クリックと区別するため)

コード例

$('body').on('mouseup', function(e){  //mouseupでイベント発火
  var selectedStr;
  if(window.getSelection){  //selectionオブジェクト取得
    selectedStr = window.getSelection().toString();  //文章取得
    if(selectedStr !== '' && selectedStr !== '\n'){  //文章チェック
      console.log(selectedStr);
    }
  }
});

お世話になったサイト

Selected text event trigger in Javascript

window.getSelection - Web API インターフェイス | MDN