Text.wholeText — Eigenschaft · JavaScript-Referenz

Signatur

get Text.prototype.wholeText

Beschreibung

Die schreibgeschützte Eigenschaft wholeText der Schnittstelle Text gibt einen String zurück. Er enthält den Inhalt des aktuellen Text-Knotens und aller Text-Knoten, die unmittelbar davor oder danach als Geschwister stehen, ohne dass ein Element, ein Kommentar oder ein anderer Nicht-Text-Knoten dazwischenliegt. Die Teile werden in Dokumentreihenfolge aneinandergehängt.

Solche aufgeteilten Text-Knoten entstehen häufig durch Skripte, zum Beispiel durch Text.prototype.splitText(), durch mehrfaches appendChild(document.createTextNode(...)) oder durch Bearbeitungen in contenteditable-Bereichen. Mit wholeText liest du den zusammenhängenden Text, ohne den DOM-Baum zu verändern. Im Unterschied dazu fasst Node.prototype.normalize() die Knoten tatsächlich zusammen.

Im Gegensatz zu data bzw. nodeValue, die nur den Inhalt des einzelnen Knotens liefern, bezieht wholeText die Nachbarn mit ein. Anders als textContent des Elternelements hört die Eigenschaft beim ersten Nicht-Text-Knoten auf. Text in verschachtelten Elementen wie <b> gehört also nicht dazu.

Rückgabewert

Typ

string

Beschreibung

Der verkettete Text aller logisch benachbarten Text-Knoten, einschließlich des aktuellen Knotens. Ein leerer String, wenn alle beteiligten Knoten leer sind.

Beispiele

Durch splitText() geteilten Text wieder zusammen lesen

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

const first = p.firstChild;
const second = first.splitText(5); // teilt nach "Hallo"

console.log(p.childNodes.length); // 2 Text-Knoten
console.log(first.data);          // nur dieser Knoten
console.log(second.data);
console.log(first.wholeText);     // beide zusammen
console.log(second.wholeText);

2 Hallo Welt Hallo Welt Hallo Welt

Elemente unterbrechen die Verkettung

const div = document.createElement('div');
div.append(
  document.createTextNode('Preis: '),
  document.createTextNode('42 €'),
  document.createElement('br'),
  document.createTextNode(' inkl. MwSt.')
);

console.log(div.firstChild.wholeText);
console.log(div.lastChild.wholeText);
console.log(div.textContent);

Preis: 42 € inkl. MwSt. Preis: 42 € inkl. MwSt.

Text an der Cursorposition in contenteditable lesen

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

editor.addEventListener('input', () => {
  const sel = document.getSelection();
  const node = sel?.anchorNode;
  if (node?.nodeType === Node.TEXT_NODE) {
    // Kompletten zusammenhängenden Text statt nur des Fragments auswerten
    const words = node.wholeText.trim().split(/\s+/).filter(Boolean);
    console.log(`Wörter im aktuellen Textblock: ${words.length}`);
  }
});

Wörter im aktuellen Textblock: 3

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an wholeText wird ignoriert und wirft im Strict Mode einen TypeError. Das frühere Gegenstück replaceWholeText() wurde aus der Spezifikation entfernt und von Browsern nicht mehr unterstützt.
Grenzen: Auch Kommentare (Comment) und Verarbeitungsanweisungen unterbrechen die Kette. CDATASection erbt dagegen von Text und wird in XML-Dokumenten mitgezählt.
Kein DOM-Umbau: wholeText ändert den Baum nicht. Wenn du die Knoten dauerhaft zusammenführen willst, rufe auf dem Elternelement normalize() auf.
Leerraum: Leerzeichen und Zeilenumbrüche aus dem HTML-Quelltext werden unverändert übernommen. Bei Bedarf mit trim() bereinigen.
Kompatibilität: Wird von allen modernen Browsern und von DOM-Implementierungen wie jsdom unterstützt.

Siehe auch

Text Node.prototype.normalize() Summarizer.sharedContext Text.assignedSlot Event.srcElement