Selection.toString() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.toString()

Beschreibung

Selection.toString() liefert den reinen Textinhalt der aktuellen Auswahl, also genau den Text, den der Benutzer im Dokument markiert hat. Formatierungen, Tags und Attribute werden entfernt, es bleibt nur der sichtbare Text übrig. Umfasst die Auswahl mehrere Bereiche (Range-Objekte), was nur Firefox unterstützt, werden deren Texte aneinandergehängt.

Die Methode wird auch automatisch aufgerufen, wenn ein Selection-Objekt in einen String umgewandelt wird, etwa bei Template-Literalen (`${selection}`), bei String(selection) oder bei der Verkettung mit +. Ein direktes console.log(selection) gibt dagegen das Objekt selbst aus, nicht den Text.

Typische Einsatzfälle sind „Zitat teilen“-Buttons, Wörterbuch- oder Übersetzungs-Popups, eigene Kopier-Funktionen und Analysen, welche Textstellen Benutzer markieren. Ist nichts ausgewählt, ist der Rückgabewert ein leerer String.

Rückgabewert

Typ

string

Beschreibung

Der markierte Text ohne HTML-Markup. Ein leerer String "", wenn keine Auswahl besteht oder die Auswahl eingeklappt ist (isCollapsed === true).

Beispiele

Markierten Text beim Loslassen der Maus auslesen

document.addEventListener('mouseup', () => {
  const text = window.getSelection().toString().trim();
  if (text) {
    console.log(`Markiert: "${text}"`);
  }
});

Markiert: "Hallo Welt"

Implizite String-Umwandlung

const selection = document.getSelection();

// Alle drei Varianten rufen toString() auf
const a = selection.toString();
const b = String(selection);
const c = `${selection}`;

console.log(a === b && b === c); // true
console.log(typeof selection);    // "object" – nicht der Text!

true object

„Zitat teilen“-Button mit Längenbegrenzung

const shareBtn = document.querySelector('#share-quote');

shareBtn.addEventListener('click', () => {
  const quote = document.getSelection().toString().trim();
  if (!quote) {
    alert('Bitte zuerst einen Text markieren.');
    return;
  }
  const short = quote.length > 200 ? `${quote.slice(0, 197)}…` : quote;
  const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`„${short}“`)}`;
  window.open(url, '_blank', 'noopener');
});

Auswahl live mit selectionchange verfolgen

const counter = document.querySelector('#counter');

document.addEventListener('selectionchange', () => {
  const text = document.getSelection().toString();
  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
  counter.textContent = `${words} Wörter markiert`;
});

// Wichtig · Fallstricke

Formularfelder: Text, der in <input>- oder <textarea>-Elementen markiert ist, liefert in Firefox einen leeren String. Das Verhalten in anderen Browsern ist nicht einheitlich. Für diese Felder deshalb el.value.substring(el.selectionStart, el.selectionEnd) verwenden.
Leerraum und Zeilenumbrüche: Das Ergebnis richtet sich nach der Darstellung (ähnlich wie innerText). Unsichtbare Inhalte (display: none) sind normalerweise nicht enthalten, und Zeilenumbrüche bei Blockelementen können sich je nach Browser unterscheiden. Bei Bedarf mit trim() nachbearbeiten.
HTML wird nicht mitgeliefert: Für das Markup der Auswahl selection.getRangeAt(0).cloneContents() verwenden.
Sicherheit: Der zurückgegebene Text ist Benutzereingabe. Ihn nie ungeprüft per innerHTML einfügen, sonst droht XSS. Besser textContent verwenden.
console.log(selection) gibt das Objekt aus, nicht den Text. Die Umwandlung muss ausdrücklich erfolgen.
Wird die Methode innerhalb eines click-Handlers aufgerufen, kann die Auswahl durch den Klick bereits aufgehoben sein. Deshalb eher mouseup oder selectionchange nutzen.

Siehe auch

Window.getSelection() Document.getSelection() Selection Selection.getRangeAt() Range.toString() CSSStyleValue.toString()