Window.getSelection()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Window.getSelection() メソッドは、ユーザーが選択した文字列の範囲やキャレットの現在位置を示す Selection オブジェクトを返します。

構文

js
getSelection();

引数

なし。

返値

A Selection オブジェクト。

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

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

例

js
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 のプロパティや、 length、substr などのメソッドを直接 Selection オブジェクトに対して使おうとすると、オブジェクトにその名前のプロパティやメソッドが存在しないはエラーとなり、存在する場合は予期せぬ結果を返すでしょう。 Selection オブジェクトを文字列として使うなら、下記のように toString() メソッドを呼び出してください。

js
const selectedText = selObj.toString();
  • selObj は Selection オブジェクトです。
  • selectedText は文字列です。 (選択された文字列)

関連オブジェクト

同じように機能する Document.getSelection() を呼び出すことができます。

現在 getSelection() は Firefox、Edge (旧)、Internet Explorer では、 <textarea> と <input> 要素の内容に対して動作しないことは知っておくとよいでしょう。HTMLInputElement.setSelectionRange() または selectionStart と selectionEnd プロパティを使用すると、この問題を回避することができます。

選択 と フォーカス の違いに注意してください。Document.activeElement はフォーカスされた要素を返します。

仕様書

Specification
Selection API
# dom-window-getselection

ブラウザーの互換性

BCD tables only load in the browser

関連情報