AbstractRange.endOffset — Eigenschaft · JavaScript-Referenz

Signatur

AbstractRange.endOffset

Beschreibung

Die Eigenschaft endOffset der Schnittstelle AbstractRange gibt als ganze Zahl an, wo genau innerhalb des Endknotens (endContainer) ein Bereich endet. Sie wird von Range und StaticRange geerbt und ist schreibgeschützt.

Was der Wert bedeutet, hängt vom Typ des Endknotens ab:

Ist endContainer ein Text-, Comment- oder CDATASection-Knoten, ist endOffset die Anzahl der Zeichen (genauer: UTF-16-Codeeinheiten) vom Anfang des Knotens bis zum Bereichsende.
Bei allen anderen Knoten (z. B. Elementen) ist endOffset die Anzahl der Kindknoten zwischen dem Anfang von endContainer und dem Bereichsende.

Gebraucht wird die Eigenschaft vor allem beim Auswerten von Textauswahlen (Selection.getRangeAt()), in Editoren, beim Hervorheben von Suchtreffern oder beim Auswerten von beforeinput-Events über getTargetRanges(). Zusammen mit startContainer, startOffset und endContainer legt sie einen Bereich im DOM eindeutig fest.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl: Zeichen-Offset bei Textknoten, sonst der Index des Kindknotens innerhalb von endContainer.

Beispiele

Offset in einem Textknoten auslesen

const p = document.createElement('p');
p.textContent = 'Hallo Welt';
document.body.append(p);

const text = p.firstChild;
const range = document.createRange();
range.setStart(text, 0);
range.setEnd(text, 5); // Ende nach "Hallo"

console.log(range.endContainer === text);
console.log(range.endOffset);
console.log(range.toString());

true 5 Hallo

Offset bei Element-Containern (Kindknoten-Index)

const ul = document.createElement('ul');
ul.innerHTML = '<li>A</li><li>B</li><li>C</li>';
document.body.append(ul);

const range = document.createRange();
range.selectNodeContents(ul);

console.log(range.endContainer === ul);
console.log(range.endOffset); // Anzahl der Kindknoten

range.setEnd(ul, 2); // Ende vor dem dritten <li>
console.log(range.toString());

true 3 AB

Benutzerauswahl auswerten

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (!selection || selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  console.log('Endknoten:', range.endContainer.nodeName);
  console.log('Endoffset:', range.endOffset);
  console.log('Ausgewählt:', JSON.stringify(range.toString()));
});

Endknoten: #text Endoffset: 12 Ausgewählt: "Beispieltext"

StaticRange aus beforeinput-Event

const editor = document.querySelector('[contenteditable]');

editor.addEventListener('beforeinput', (event) => {
  for (const r of event.getTargetRanges()) {
    // r ist ein StaticRange und erbt endOffset von AbstractRange
    console.log(`${event.inputType}: ${r.startOffset}–${r.endOffset}`);
  }
});

deleteContentBackward: 4–5

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie range.endOffset = 3 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Zum Ändern verwendet man Range.setEnd(), setEndBefore() oder setEndAfter().
Zeichen- oder Knotenindex: Der Wert wird unterschiedlich gedeutet, je nachdem ob endContainer ein Textknoten oder ein Element ist. Vor dem Rechnen immer endContainer.nodeType prüfen.
UTF-16: Bei Textknoten werden Codeeinheiten gezählt, nicht sichtbare Zeichen. Emojis oder Zeichen außerhalb der BMP zählen als 2.
StaticRange: Bei StaticRange wird der Wert bei DOM-Änderungen nicht angepasst und kann danach ungültig sein, also größer als die aktuelle Länge des Knotens. Range passt sich dagegen automatisch an.
Kompatibilität: Range.endOffset gibt es in allen Browsern schon sehr lange. Die gemeinsame Basisschnittstelle AbstractRange ist erst seit etwa 2020 in Chrome, Firefox und Safari verfügbar.

Siehe auch

AbstractRange.endContainer AbstractRange.startOffset AbstractRange.collapsed Range.setEnd() StaticRange Selection.getRangeAt() ConstantSourceNode.offset