親コンテナ内の選択範囲の開始オフセットと終了オフセットを取得するにはどうすればよいですか?

親コンテナを基準とした範囲の開始オフセットと終了オフセットを取得します

HTML ドキュメントでは、ユーザーの選択はさまざまな要素やテキスト ノードにまたがることがあります。選択範囲の親コンテナ内の文字の正確な範囲を決定するのは困難な場合があります。ただし、ブラウザの種類に関係なく、さまざまなテクニックを利用してこれを実現できます。

1 つのアプローチには、選択範囲を複製し、その終点を親コンテナの開始点と終了点に設定することが含まれます。結果のテキスト内容を元の選択範囲と比較することで、親を基準とした開始オフセットと終了オフセットを計算できます。 JavaScript の例を次に示します。

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;
  return { start: start, end: end };
}

このメソッドは、HTML タグとテキスト ノードのトラバーサルを考慮して、親コンテナ内の開始オフセットと終了オフセットの両方を提供します。テキスト編集ツールやコンテンツ操作スクリプトなど、正確な文字オフセットを必要とするさまざまなアプリケーションで使用できます。

以上が親コンテナ内の選択範囲の開始オフセットと終了オフセットを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。