DataTransferItem.getAsString() — Methode · JavaScript-Referenz

Signatur

DataTransferItem.prototype.getAsString(callback)

Beschreibung

getAsString() liest den Inhalt eines Drag-&-Drop- oder Zwischenablage-Elements als Text aus, wenn sein kind den Wert "string" hat. Die Methode gibt die Daten nicht direkt zurück. Stattdessen ruft sie die übergebene Callback-Funktion später auf und übergibt ihr den Text als einziges Argument.

Sie brauchen die Methode vor allem in drop- und paste-Handlern, wenn Sie über event.dataTransfer.items bzw. event.clipboardData.items mehrere Elemente durchgehen und dabei Text (z. B. text/plain, text/html, text/uri-list) von Dateien (kind === "file") trennen wollen. Welches Format ein Element hat, steht in der Eigenschaft type.

Die Methode arbeitet mit einem Callback und liefert kein Promise. Wenn Sie mit async/await arbeiten wollen, packen Sie den Aufruf in ein Promise. Wichtig: Die Liste items ist nur während der synchronen Ausführung des Event-Handlers nutzbar. Rufen Sie getAsString() deshalb sofort im Handler auf und nicht erst nach einem await.

Parameter

Name	Typ	Default	Beschreibung
$callback Pflicht	(data: string) => void \| null		Funktion, die mit den Textdaten des Elements als einzigem Argument aufgerufen wird. Bei `null` passiert nichts.

Rückgabewert

Typ

undefined

Beschreibung

Die Methode gibt nichts zurück. Die Daten kommen asynchron über den Callback.

Beispiele

Gezogenen Text in einer Drop-Zone anzeigen

const zone = document.querySelector('#dropzone');

zone.addEventListener('dragover', (e) => e.preventDefault());

zone.addEventListener('drop', (e) => {
  e.preventDefault();
  for (const item of e.dataTransfer.items) {
    if (item.kind === 'string' && item.type === 'text/plain') {
      item.getAsString((text) => {
        zone.textContent = `Abgelegt: ${text}`;
        console.log(text);
      });
    }
  }
});

Hallo Welt // wenn der Text „Hallo Welt“ gezogen wurde

Promise-Wrapper für async/await

const readItemAsString = (item) =>
  new Promise((resolve) => item.getAsString(resolve));

document.addEventListener('paste', async (e) => {
  // Promises synchron erzeugen, erst danach warten
  const tasks = [...e.clipboardData.items]
    .filter((item) => item.kind === 'string')
    .map(async (item) => ({ type: item.type, data: await readItemAsString(item) }));

  const results = await Promise.all(tasks);
  console.table(results);
});

Tabelle mit z. B. text/plain und text/html samt Inhalt

Text und Dateien beim Drop trennen

document.body.addEventListener('dragover', (e) => e.preventDefault());

document.body.addEventListener('drop', (e) => {
  e.preventDefault();
  for (const item of e.dataTransfer.items) {
    if (item.kind === 'file') {
      const file = item.getAsFile();
      console.log('Datei:', file.name, file.size);
    } else if (item.type === 'text/uri-list') {
      item.getAsString((uris) => {
        const links = uris.split(/\r?\n/).filter((l) => l && !l.startsWith('#'));
        console.log('Links:', links);
      });
    }
  }
});

Links: ["https://example.com/"]

// Wichtig · Fallstricke

Nur für Text: Wenn kind den Wert "file" hat, wird der Callback nie aufgerufen. Für Dateien verwenden Sie getAsFile().
Zeitfenster: Außerhalb des synchronen Event-Handlers (z. B. nach einem await oder in einem setTimeout) ist die Liste items geschützt oder leer. Rufen Sie getAsString() deshalb sofort auf.
Kein Promise: Die Methode liefert undefined. Ein await item.getAsString() bringt nichts, Sie brauchen den Wrapper.
Sicherheit: Gezogene oder eingefügte Inhalte kommen von außen und sind nicht vertrauenswürdig. Das gilt besonders für text/html. Schreiben Sie solche Inhalte nie ungeprüft in innerHTML, sonst droht XSS. Nutzen Sie textContent oder einen Sanitizer (z. B. DOMPurify).
Einfachere Alternative: Für einen einzelnen Typ genügt oft synchron event.dataTransfer.getData('text/plain').
Kompatibilität: Wird von allen modernen Browsern unterstützt. Auf Mobilgeräten ist Drag & Drop teilweise eingeschränkt.

Siehe auch

DataTransferItem.getAsFile() DataTransferItem.webkitGetAsEntry() DataTransferItem.getAsFileSystemHandle() DataTransferItemList.add() DataTransfer.getData()