TextFormat.rangeEnd — Eigenschaft · JavaScript-Referenz

Signatur

TextFormat.rangeEnd

Beschreibung

Die Eigenschaft rangeEnd gehört zur TextFormat-Schnittstelle der EditContext API. Sie gibt an, wo der Textbereich endet, den ein Eingabemethoden-Editor (IME) formatiert sehen möchte, z. B. mit einer Unterstreichung während der Komposition japanischer oder chinesischer Zeichen. Zusammen mit rangeStart beschreibt sie einen Bereich im Text des EditContext.

TextFormat-Objekte bekommt man meistens über das Ereignis textformatupdate eines EditContext: event.getTextFormats() liefert ein Array solcher Objekte. Weil der Browser bei einem EditContext den Text nicht selbst darstellt, muss die Anwendung diese Formate selbst zeichnen, etwa mit der CSS Custom Highlight API oder mit eigenem Canvas-Code.

Der Wert ist ein Versatz im Text des EditContext (editContext.text), gezählt in UTF-16-Codeeinheiten. Er ist exklusiv: Das Zeichen an der Position rangeEnd gehört nicht mehr zum Bereich. Damit passt der Wert direkt zu String.prototype.slice() und Range.setEnd() (wenn der Text in einem einzigen Textknoten steht).

Beispiele

Formatbereiche beim IME-Update protokollieren

const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;

editContext.addEventListener('textformatupdate', (event) => {
  for (const format of event.getTextFormats()) {
    const ausschnitt = editContext.text.slice(format.rangeStart, format.rangeEnd);
    console.log(`${format.rangeStart}–${format.rangeEnd}: "${ausschnitt}" (${format.underlineStyle})`);
  }
});

0–3: "にほん" (solid)

IME-Unterstreichung mit der CSS Custom Highlight API zeichnen

// CSS: ::highlight(ime-solid) { text-decoration: underline solid; }
const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;

editContext.addEventListener('textformatupdate', (event) => {
  const textNode = editor.firstChild; // Annahme: der Text steht in einem einzigen Textknoten
  if (!textNode) return;

  const ranges = event.getTextFormats().map((format) => {
    const range = new Range();
    range.setStart(textNode, format.rangeStart);
    range.setEnd(textNode, format.rangeEnd); // rangeEnd ist exklusiv
    return range;
  });

  CSS.highlights.set('ime-solid', new Highlight(...ranges));
});

TextFormat selbst erzeugen (z. B. für Tests)

const format = new TextFormat({
  rangeStart: 2,
  rangeEnd: 5,
  underlineStyle: 'wavy',
  underlineThickness: 'thin'
});

const text = 'Hallo Welt';
console.log(format.rangeEnd);                            // 5
console.log(format.rangeEnd - format.rangeStart);        // Länge: 3
console.log(text.slice(format.rangeStart, format.rangeEnd));

5 3 llo

// Wichtig · Fallstricke

Experimentell: Die EditContext API gibt es derzeit nur in Chromium-basierten Browsern (Chrome/Edge ab 121). Prüfe die Unterstützung vorher mit 'EditContext' in window und sieh eine Ausweichlösung vor, etwa contenteditable oder <textarea>.
Exklusives Ende: Das Zeichen an rangeEnd gehört nicht mehr zum Bereich. Wer die Position fälschlich als inklusiv behandelt, formatiert ein Zeichen zu viel.
UTF-16-Einheiten: Emoji und andere Zeichen außerhalb der BMP zählen als zwei Einheiten. Positionen dürfen nicht mit Grapheme-Indizes (z. B. aus Intl.Segmenter) gemischt werden.
Bezug auf den EditContext-Text: Der Wert bezieht sich auf editContext.text, nicht auf die DOM-Struktur. Ist der Text im DOM auf mehrere Knoten verteilt, müssen die Positionen selbst in Knoten und Versatz umgerechnet werden.
Nur lesbar: Eine Zuweisung an rangeEnd hat keine Wirkung. Werte werden nur über den Konstruktor new TextFormat({...}) gesetzt.
Die Formate gelten nur während der Komposition. Beim Ereignis compositionend sollten die zugehörigen Hervorhebungen entfernt werden, z. B. mit CSS.highlights.delete().

Siehe auch

Highlight TextFormat.rangeStart TextFormat.underlineStyle TextFormat.underlineThickness TextTrack.language