Zenn
Open3

Selection API と Rangeインターフェイス：webブラウザで選択範囲やキャレット（入力カーソル）の位置を制御する

JavaScript
frontend
ブラウザ
ピン留めされたアイテム
えとあるえとある

このスクラップ is 何？

Webブラウザ (Web API) にはHTMLドキュメントの選択範囲やフォームフィールドでのキャレット[1] の位置をハンドリングするためにSelectionとRangeというオブジェクトが用意されている。これらの概念や使い方を理解するための個人的なメモ。

  • Selection API

https://developer.mozilla.org/en-US/docs/Web/API/Selection_API

  • Range インターフェイス

https://developer.mozilla.org/ja/docs/Web/API/Range#specifications

脚注

  1. 入力カーソルのこと。マウスカーソルと混同するのを防ぐため以降はキャレットとだけ呼ぶ ↩︎

えとあるえとある

概念の整理

Range（範囲）: HTMLドキュメントの「一部分」を表現するオブジェクト

  • あくまでドキュメントの一部分をプログラマブルに表現するためのインターフェイスであり、Range単体ではHTMLドキュメントの選択はできない
  • 範囲の境界点（開始点 start と終了点 end）の単一ペアから構成される
    • 常に開始点より後ろに終了点が置かれる
  • 境界点の位置は基本的にノード単位で指定する
    • 文字列を含むノードの途中に境界点を置きたい場合には Range.setStart(node, offset) のようにノード先頭からの文字数を offset で指定する

Selection（選択）: HTMLドキュメントの「選択範囲」を表現するオブジェクト

  • window あるいは document に1つ紐付いていて、開いているページの選択範囲を管理している
  • 開いているページのSelectionオブジェクトにRangeが追加されることで初めてHTMLドキュメントの一部が選択された状態が実現できる
  • 選択範囲の境界点（開始点 anchor と終了点 focus）のペアを 複数持てる（仕様上）
  • ユーザーの選択方向によっては、開始点 anchor の位置より前に終了点 focus が置かれることもある
    • 一方でRangeは常に開始点 start より後ろに終了点 end が置かれるので注意