親 HTML 要素内のユーザー選択範囲の開始文字と終了文字のオフセットを決定するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-18 02:44:02
オリジナル
348 人が閲覧しました

How Can I Determine the Start and End Character Offsets of a User Selection Within Its Parent HTML Element?

親コンテナ内の範囲の開始オフセットと終了オフセットを決定する

問題

HTML 要素が与えられた場合、文字オフセットを決定するにはどうすればよいですか選択範囲が HTML にまたがる場合でも、範囲 (ユーザー選択) が開始および終了する親コンテナー内タグ?

解決策

更新された応答:

開始オフセットと終了オフセットの両方を取得するには:

function getSelectionCharacterOffsetWithin(element) {
  // Determine start and end offsets
  var start = 0;
  var end = 0;
  // Create ranges
  var range = getRangeAt(0);
  var preCaretRange = range.cloneRange();

  // Set start offset
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;

  // Set end offset
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;

  // Return the object
  return { start: start, end: end };
}
ログイン後にコピー

元の応答:

提供されたコードはgetSelection() および getRangeAt(0) を使用して選択範囲を取得します。次に、範囲に対する toString() メソッドを使用して、要素内のキャレット位置のオフセットを計算します。この方法では、終了オフセットまたはキャレット位置のみが提供されます。

例:

function getRangeCharacterOffsetWithin(element) {
  var range, sel;
  if ((sel = window.getSelection())) {
    range = sel.getRangeAt(0);
    range.collapse(false);
    prevRange = range.cloneRange();
    prevRange.selectNodeContents(element);
    prevRange.setEnd(range.endContainer, range.endOffset);
    return prevRange.toString().length;
  }
  return 0;
}
ログイン後にコピー

以上が親 HTML 要素内のユーザー選択範囲の開始文字と終了文字のオフセットを決定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート