Edited at

テキストが選択・ドラッグされたときに、選択された文章を取得する方法【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