Wie kann ich den Anfangs- und Endzeichenversatz einer Benutzerauswahl innerhalb des übergeordneten HTML-Elements bestimmen?

Bestimmen der Start- und Endoffsets eines Bereichs innerhalb seines übergeordneten Containers

Problem

Wie kann man bei einem gegebenen HTML-Element die Zeichenoffsets bestimmen? innerhalb des übergeordneten Containers, wo ein Bereich (Benutzerauswahl) beginnt und endet, auch wenn die Auswahl HTML umfasst Tags?

Lösung

Aktualisierte Antwort:

So erhalten Sie sowohl Start- als auch Endoffsets:

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 };
}

Ursprüngliche Antwort:

Der bereitgestellte Code verwendet getSelection() und getRangeAt(0), um die Auswahl abrufen. Anschließend berechnet es den Versatz der Caret-Position innerhalb des Elements mithilfe der toString()-Methode für den Bereich. Dieser Ansatz liefert nur den Endversatz oder die Caret-Position.

Beispiel:

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;
}

Das obige ist der detaillierte Inhalt vonWie kann ich den Anfangs- und Endzeichenversatz einer Benutzerauswahl innerhalb des übergeordneten HTML-Elements bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!