[JavaScript] ブラウザで選択した文字列を取得

javascrpt を使って、ブラウザで現在選択されている文字列を取得する方法について確認してみます。

window.getSelection()で選択範囲を取得

windowオブジェクトのgetSelection() メソッドで、ブラウザで現在選択されている範囲をあらわす、Selectionオブジェクトが取得できます。

var selection = window.getSelection();

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

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

なお、getSelection()メソッドはdocumentオブジェクトにも実装されているので、document.getSelection() としてもokです。

IE での対応(IE6 で確認)

IE ではwindow.getSelection()が実装されていないため、document.selectionプロパティを使います。このオブジェクトから文字列を取り出すには、createRange()メソッドを呼び出して返されるTextRange オブジェクトのtext プロパティにアクセスすればok です。

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

クロスブラウザ対応

クロスブラウザ対応としては、window.getSelection の有無で処理を分岐すればOK.

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

以上を踏まえて、「Shift key が押されたときに、選択されている文字列を表示する」プログラムを作成してみました。（動作はfirefox3.6, IE6 で確認しました。)

サンプルコード

<script type="text/javascript">
var win = window,
    doc = document; //グローバルオブジェクトをキャッシュ

win.onload = function(){
    var selected_str = '',
        SHIFT_KEY_CODE = 16;

    doc.onkeydown = function(evt){
        if (typeof evt === 'undefined') { //IE用にevent再設定
            evt = win.event;
        }

        if (evt.keyCode === SHIFT_KEY_CODE) {
            if (win.getSelection) {//クロスブラウザ対応
                selected_str = win.getSelection().toString();　//IE以外
            } else {
                selected_str = doc.selection.createRange().text; // IE
            }

            if (typeof selected_str !== 'undefined' && selected_str != '') {
                alert(selected_str);
            }
        }
    }
}
</script>

ここからさらに取得した選択文字列を 翻訳系 web API に渡すようにすれば、簡単な翻訳アプリなどに応用できそう！

まとめ

ブラウザの選択範囲の文字列を取得するには、

window.getSelection() メソッドを使う

IE ではdocument.selection.createRange().text　でok

参照URL

window.getSelection - MDN https://developer.mozilla.org/en/DOM/window.getSelection

Selection - MDN https://developer.mozilla.org/en/DOM/Selection

selection Object http://msdn.microsoft.com/en-us/library/ms535869%28v=vs.85%29.aspx

TextRange Object http://msdn.microsoft.com/en-us/library/ms535872%28v=vs.85%29.aspx