DOM

Window.getSelection() メソッド

 編集:2022.09.15 by T.A.

[Edge]。→

Window でユーザーが選択した文字列の範囲やキャレットの現在位置を示す Selection オブジェクトを返します。

構文
Window.getSelection()
Window Window
戻り値

Selection オブジェクト。

文字列へ型変換すると、空の文字列("")を追加するか Selection.toString() を使って、選択された文字列を返します。

表示されていない <iframe> に対して呼び出された場合(例えば display: none が設定されている場合)、Firefox は null を、他のブラウザーは None を設定した Selection.type オブジェクトを返します。

function foo() {
    const selObj = window.getSelection();
    alert(selObj);
    const selRange = selObj.getRangeAt(0);
    // 以下、取得した選択文字列に対して何らかの処理を行う
}
メモ
Selection オブジェクトの文字列表現

JavaScript では、文字列が渡されることを前提としている関数(window.alert() や document.write())にオブジェクトが渡されると、そのオブジェクトの toString() メソッドが呼び出され、その結果が関数へ渡されます。このため、実際はプロパティとメソッドを持つオブジェクトなのに、文字列であるかのように見えてしまいます。

上の例では、selObj.toString() が window.alert() へ渡されるときに自動的に呼び出されます。しかし、JavaScript の String のプロパティや、lengthsubstr() などのメソッドを直接 Selection オブジェクトに対して使おうとすると、オブジェクトにその名前のプロパティやメソッドが存在しないはエラーとなり、存在する場合は予期せぬ結果を返すでしょう。Selection オブジェクトを文字列として使うなら、下記のように toString() メソッドを呼び出してください。

当文書で「表示」を範囲選択して、

D=window.getSelection(); //=[object]:表示
	//anchorNode=[object]:[object Text]
	//anchorOffset=[number]:8
	//focusNode=[object]:[object Text]
	//focusOffset=[number]:10
	//isCollapsed=[boolean]:false
	//rangeCount=[number]:1
	//type=[string]:Range
	//baseNode=[object]:[object Text]
	//baseOffset=[number]:8
	//…

当文書で任意の場所にキー カーソルを置いて、

D=window.getSelection(); //=[object]:
	//anchorNode=[object]:[object HTMLFormElement]
	//anchorOffset=[number]:1
	//focusNode=[object]:[object HTMLFormElement]
	//focusOffset=[number]:1
	//isCollapsed=[boolean]:true
	//rangeCount=[number]:1
	//type=[string]:Caret
	//baseNode=[object]:[object HTMLFormElement]
	//…

テスト