Range.toString() — Methode · JavaScript-Referenz

Signatur

Range.prototype.toString()

Beschreibung

Range.toString() ist der Stringifier des Range-Interfaces. Die Methode gibt den Text zurück, der zwischen Start- und Endpunkt des Bereichs liegt. Dazu werden die Daten aller Text-Knoten im Bereich aneinandergehängt, bei Start- und Endknoten nur der Teil innerhalb der Offsets. Elemente, Attribute und Kommentare kommen im Ergebnis nicht vor.

Weil es ein Stringifier ist, wird die Methode auch implizit aufgerufen, etwa bei Template-Literalen (`${range}`), bei String(range) oder beim Verketten mit +.

Typische Einsatzfälle sind das Auslesen einer Textauswahl über selection.getRangeAt(0).toString(), Wortzählungen in markierten Bereichen oder das Ermitteln von Text zwischen zwei DOM-Positionen, zum Beispiel für Hervorhebungen und Anmerkungen.

Anders als innerText berücksichtigt toString() weder CSS noch Layout. Versteckter Text (display: none) ist also enthalten, und bei <br> oder Blockgrenzen werden keine Zeilenumbrüche eingefügt. Das Verhalten entspricht eher textContent, beschränkt auf den Bereich.

Rückgabewert

Typ

string

Beschreibung

Der verkettete Text aller Text-Knoten im Bereich. Ist der Bereich zusammengefallen (collapsed), ist es ein leerer String.

Beispiele

Text zwischen zwei Positionen auslesen

// HTML: <p id="p">Hallo <b>schöne</b> Welt</p>
const p = document.getElementById('p');
const range = document.createRange();

// Start: Offset 3 im ersten Textknoten ("Hallo ")
range.setStart(p.firstChild, 3);
// Ende: Offset 3 im letzten Textknoten (" Welt")
range.setEnd(p.lastChild, 3);

console.log(range.toString());

lo schöne We

Markierten Text des Nutzers ermitteln

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

  const range = selection.getRangeAt(0);
  const text = range.toString().trim();
  if (text) {
    const words = text.split(/\s+/).length;
    console.log(`Markiert: "${text}" (${words} Wörter)`);
  }
});

Markiert: "schöne Welt" (2 Wörter)

Impliziter Aufruf und Unterschied zu innerText

// HTML: <div id="box">Zeile 1<br>Zeile 2<span style="display:none"> geheim</span></div>
const box = document.getElementById('box');
const range = document.createRange();
range.selectNodeContents(box);

console.log(`${range}`);        // Stringifier, implizit
console.log(box.innerText);      // layoutabhängig

Zeile 1Zeile 2 geheim Zeile 1 Zeile 2

// Wichtig · Fallstricke

Kein Markup: Das Ergebnis ist reiner Text. Brauchst du das HTML, nimm range.cloneContents() und serialisiere das DocumentFragment, z. B. über einen temporären Container und dessen innerHTML.
Keine Zeilenumbrüche aus dem Layout: <br>, Absätze und Blockelemente erzeugen kein \n. Unsichtbarer Text und Inhalte von <script> und <style> im Bereich sind enthalten. Selection.toString() kann sich dagegen je nach Browser näher an innerText verhalten.
Leerzeichen: Whitespace aus dem Quelltext (Einrückungen, Umbrüche) wird unverändert übernommen. Bei Bedarf mit trim() oder replace(/\s+/g, ' ') normalisieren.
Kompatibilität: Wird seit vielen Jahren von allen modernen Browsern unterstützt. Für StaticRange gibt es keine toString()-Methode.
Sicherheit: Der Text stammt oft aus Nutzereingaben. Füge ihn mit textContent ein, nicht mit innerHTML, um XSS zu vermeiden.

Siehe auch

Range Range.cloneRange() Range.setEnd() Range.collapse() Range.detach()