HTML zu Text Konverter

Was die HTML-zu-Text-Umwandlung tatsächlich leistet

Webseiten, E-Mails und CMS-Exporte sind kein Klartext. Sie bestehen aus HTML: einem Baum aus Tags wie p, div, span, a und strong, die um die Wörter herumgewickelt sind, auf die es Ihnen eigentlich ankommt. Wenn Sie diesen Quelltext kopieren oder einen formatierten Ausschnitt einfügen, schleppen Sie Inline-Stile, Tracking-Attribute und strukturelles Markup mit, das im Weg steht, sobald Sie den lesbaren Inhalt für sich allein haben möchten. Bei der Umwandlung von HTML in Text wird dieser Baum durchlaufen, und es bleiben nur die sichtbaren Wörter erhalten, während jedes Tag und jedes Attribut verworfen wird.

Das Ziel besteht nicht nur darin, spitze Klammern zu löschen. Ein naives Suchen und Ersetzen von Tags würde Absätze ineinanderschieben und einen aufgeräumten Artikel in eine durchgehende Wand verwandeln. Eine saubere Umwandlung behandelt Block-Elemente wie Absätze, Überschriften und Listeneinträge als Grenzen und fügt Zeilenumbrüche ein, sodass die Ausgabe in derselben logischen Reihenfolge zu lesen ist, die ein Mensch wählen würde, während Inline-Elemente wie Fett- und Kursivschrift einfach verschwinden und nur ihren Text zurücklassen.

Was Sie behalten und was Sie verlieren

Klartext kann von Natur aus keine visuelle Formatierung enthalten. Fett, Kursiv, Schriftgrößen, Farben und CSS-Layout fallen allesamt weg, weil es in einer Textdatei keinen Platz für sie gibt. Tabellen schrumpfen zu aufeinanderfolgenden Zeilen zusammen, und die genaue Spaltenstruktur bleibt nicht erhalten. Das ist zu erwarten: Sie tauschen Darstellung gegen Portabilität.

Links und Bilder sind der interessante Mittelweg. Aktivieren Sie Links erhalten, um einen Anker als [text](url) zu rendern, sodass das Ziel in lesbarer Form erhalten bleibt, und aktivieren Sie Alt-Text von Bildern einbeziehen, um das beschreibende Alt-Attribut zu behalten, statt das Bild stillschweigend zu verwerfen. Wenn Sie lieber einen saubereren Lesefluss möchten, lassen Sie diese Optionen aus oder nutzen Sie Bilder ignorieren und HR-Tags ignorieren, um Platzhalter und horizontale Linien vollständig zu unterdrücken.

Ein durchgerechnetes Beispiel

Angenommen, Sie fügen folgendes Fragment ein: einen Absatz mit dem Text Visit our shop, in dem shop ein Link zu example.com ist, gefolgt von einem zweiten Absatz, der die Entität Tom & Jerry enthält. Mit aktivierten Optionen Links erhalten und HTML-Entitäten dekodieren wird die Ausgabe zu zwei sauberen Zeilen: Visit our [shop](https://example.com) in der ersten Zeile und Tom & Jerry in der zweiten. Die p-Tags wurden zu Zeilenumbrüchen, der Anker wurde in Klammer-und-Klammer-Form umgeschrieben, und & wurde zurück in ein wörtliches Et-Zeichen dekodiert.

Warum HTML-Entitäten wichtig sind

HTML maskiert bestimmte Zeichen, damit der Browser sie nicht für Markup hält. Ein Et-Zeichen wird als &amp; geschrieben, ein Kleiner-als-Zeichen als &lt;, ein geschütztes Leerzeichen als &nbsp;, und typografische Anführungszeichen erscheinen oft als &#8220; und &#8221;. Wenn Sie das Dekodieren überspringen, sickern diese rohen Sequenzen in Ihren Text und sehen kaputt aus. Aktivieren Sie HTML-Entitäten dekodieren, und sie werden zurück in die echten Zeichen umgewandelt, die sie darstellen: &, <, ein normales Leerzeichen und die korrekten Anführungszeichen. Diese eine Einstellung ist die häufigste Lösung für eine Ausgabe, die fast richtig aussieht, aber mit verirrten Et-Zeichen-Codes übersät ist.

Zeilenumbrüche und Umbruch steuern

Zwei Einstellungen bestimmen, wie das Ergebnis angeordnet wird. Zeilenumbrüche erhalten behält die von Block-Elementen vorgegebenen Umbrüche bei, sodass Absätze getrennt bleiben, während Leerraum erhalten Folgen von Leerzeichen und Einrückungen beibehält, die HTML normalerweise zusammenfassen würde, was nützlich ist, wenn die ursprünglichen Abstände eine Bedeutung haben, etwa in Code oder ASCII-Layouts.

Zeilenumbruch legt eine maximale Anzahl von Zeichen pro Zeile fest und gestaltet lange Absätze passend um, was praktisch ist, um sie in ein Terminal, eine E-Mail mit fester Breite oder eine Klartext-README einzufügen. Setzen Sie den Wert auf 0, um den Umbruch vollständig zu deaktivieren, sodass jeder Absatz auf einer einzigen langen Zeile bleibt, bereit für ein Ziel, das seinen eigenen Umbruch vornimmt.

Anwendungsfälle aus der Praxis

Greifen Sie zu diesem Werkzeug, wann immer formatierte Inhalte zu neutralem Text werden müssen. Häufige Fälle sind das Herauslösen sauberer Texte aus einer veröffentlichten Webseite zur Wiederverwendung oder zum Zitieren, das Bereinigen eines CMS- oder Newsletter-Exports vor dem Import an anderer Stelle, das Herausziehen des lesbaren Inhalts aus einer HTML-E-Mail, das Vorbereiten von Inhalten für eine Wortzählung oder eine Lesbarkeitsprüfung sowie das Einspeisen von sauberem Text in ein Übersetzungswerkzeug oder ein Skript, das Klartext statt Tags erwartet.

Es ist auch eine schnelle Plausibilitätsprüfung während der Entwicklung. Das Umwandeln einer gerenderten Vorlage in Text offenbart die tatsächliche Lesereihenfolge und legt Inhalte offen, die durch CSS visuell verborgen, aber dennoch im Markup vorhanden sind, was für Prüfungen der Barrierefreiheit und für SEO-Audits von Bedeutung sein kann.

Häufige Fehler, die Sie vermeiden sollten

Die größte Falle ist die Erwartung, dass das Layout erhalten bleibt. Wenn Sie die Tabellenstruktur, die Aufzählungshierarchie oder die Gestaltung beibehalten müssen, ist Klartext das falsche Ziel. Wandeln Sie stattdessen in Markdown um oder behalten Sie das HTML. Eine zweite Stolperfalle ist, das Dekodieren von Entitäten zu vergessen und sich dann zu wundern, warum die Ausgabe überall &amp; enthält. Denken Sie schließlich daran, dass die Umwandlung nur das widerspiegelt, was im eingefügten Markup steht: Wenn eine Seite ihren Inhalt nach dem Laden mit JavaScript aufbaut, ist das rohe HTML, das Sie über View Source kopieren, möglicherweise nahezu leer, kopieren Sie also stattdessen das gerenderte DOM.