すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

スポンサーリンク

JavaScript 範囲選択した文字列を取得する方法

words

こんにちは、すずしんです。

今日はJavaScriptの勉強をしようと思いまして…。 その際に、ユーザーが範囲選択した文字列取得する方法について調べました。 せっかくなので、この記事に備忘録としてまとめておきます。

選択文字列の取得方法

ユーザーが選択した文字列を取得するには、window.getSelection()を使います。 するとブラウザで現在選択されている範囲を表す、Selectionオブジェクトが取得できます。

var selection = window.getSelection();

Selectionオブジェクトから選択された文字列を取り出すには、さらにtoString() メソッドを使います。

var str = window.getSelection().toString();

ちなみに、getSelection()メソッドはdocumentオブジェクトにも実装されています。 そのため、document.getSelection()としても大丈夫です。

IEの場合

IEにはwindow.getSelection()が実装されていません。 その代わりに、document.selectionプロパティを使用します。 文字列を取り出すには、createRange()メソッドを呼び出して返されるTextRangeオブジェクトのtextプロパティを参照します。

var str = document.selection.createRange().text;

クロスブラウザへの対応

以上を踏まえて、クロスブラウザに対応するには、window.getSelection()が存在するかどうかで条件分岐してやれば良いです。

if (window.getSelection) {
    // IE以外
} else {
    // IE
}

ひとこと

今回の記事では、選択文字列の取得方法について簡単にまとめてみました。 やり方が分かってしまえば単純ですね。

選択文字列が取得できれば、その情報を使って色々な事に応用が利きそうな気がしますね。 私も何か面白いものが作成できると良いのですけど…。