JavaScriptのdocument.getSelectionとは？選択中の文字列を取得する方法を初心者向けに解説
document.getSelection() は、ユーザーがマウスやキーボード操作で選択している文字列を取得するためのメソッドです。
コピー機能や検索機能、選択範囲を利用したインタラクションを作る際に役立ちます。
document.getSelectionとは？
document.getSelection() は、現在ページ上で選択されているテキストを返します。
document.getSelection();
返される値は 選択された文字列 です。
何も選択されていない場合は空の文字列になります。
このメソッドは、ユーザーの操作に応じて動作する機能を作る際に便利です。
使用例
例：選択された文字列を変数に代入する
st = document.getSelection();
→ 選択中の文字列が変数 st に代入されます。
例：選択文字列をアラート表示する
let text = document.getSelection();
alert(“選択された文字列：” + text);
alert(“選択された文字列：” + text);
→ 選択した部分をそのままダイアログで確認できます。
どんな場面で使える？
- 選択した文字列を検索する機能
- 選択範囲をコピー・保存する機能
- 選択した部分に対してコメントを付ける機能
- 選択範囲をハイライトする UI
シンプルなメソッドですが、工夫次第でさまざまなインタラクションに応用できます。
まとめ
document.getSelection()は選択中の文字列を取得するメソッド- 選択されていない場合は空文字列を返す
- 検索・コピー・ハイライトなどの機能に応用できる
- シンプルだが実用性の高いメソッド
