Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

やりかた

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

uuuno
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away