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

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

問題

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 サイトの他の関連記事を参照してください。