Webアプリケーションを開発していると、「テキストの一部を強調したい」「カーソル位置に特定のタグを挿入したい」「カスタムエディタを作成したい」といった要件に直面することがあります。これらを実現するために不可欠なのが、JavaScriptのSelection APIとRange APIです。
これらを理解することで、ブラウザ標準のテキスト選択機能をプログラマブルに制御できるようになります。
1. 基礎知識：RangeとSelectionとは
Rangeは、ドキュメント内の「ある点からある点まで」の範囲を抽象化したオブジェクトです。開始点（start）と終了点（end）という二つの境界点を持つのが特徴です。
一方、Selectionは、ユーザーが現在マウスやキーボードで選択している状態を管理するオブジェクトです。ドキュメント上に表示される「青い選択範囲」は、このSelectionオブジェクトが保持するRangeによって描画されています。
2. 実装：Rangeを生成して選択する
Rangeを生成し、それをSelectionに適用することで、プログラムから任意の場所を選択状態にできます。
サンプルプログラム：
以下のコードは、指定した要素内の特定の範囲をプログラムで選択する例です。
3. 応用：コンテンツの操作と注意点
Rangeには、選択した範囲のDOM構造を操作する強力なメソッドが備わっています。
surroundContents(node): 選択範囲を新しい要素でラップできます。
extractContents(): 選択範囲を切り出し、DocumentFragmentとして取得できます。
注意点：
surroundContentsを使用する場合、範囲が「中途半端なノード（開始タグのみ、あるいは終了タグのみ）」を含んでいるとエラーになります。必ず完全なDOMツリー構造が含まれる範囲を指定してください。
また、フォーム要素（`` や `