Word Inhalte bereinigen

Das Problem mit Copy & Paste aus Microsoft Word

Wenn Texte aus Microsoft Word, Excel oder Outlook kopiert und direkt in einen WYSIWYG-Web-Editor eingefügt werden, geschieht dies selten als reiner Text. Word überträgt im Hintergrund eine riesige Menge an proprietärem, unsichtbarem HTML-Code, XML-Metadaten und inline-formatierten CSS-Stilen.

Diese sogenannten MSO-Tags (Microsoft Office Tags) und XML-Kommentare blähen nicht nur den Quellcode der Webseite massiv auf, sondern zerstören oft das globale Design (Layout, Schriftarten, Abstände) der gesamten Website.

<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> ... </xml><![endif]-->
<p class="MsoNormal" style="margin-bottom:0cm;line-height:normal;mso-fonts:Arial">
    <span style="font-size:12.0pt;font-family:'Calibri',sans-serif;mso-ascii-theme-font:minor-latin">
        Das ist ein Text aus Word.
    </span>
</p>

Die Lösung: Die Funktion cleanWordHtml()

Um den Code zu säubern und in standardkonformes, schlankes HTML5 zu überführen, wird beim Einfügen (Paste-Event) des Editors eine Bereinigungsfunktion wie cleanWordHtml() aufgerufen. Diese Funktion filtert den Text und entfernt alle störenden Elemente per Regulärem Ausdruck (Regex) oder DOM-Parsing.

function cleanWordHtml(html) {
    if (!html) return '';

    // 1. Entferne Microsoft Office Kommentare und XML-Definitionen
    html = html.replace(/<!--[\s\S]*?-->/g, '');
    html = html.replace(/<?xml[^>]*>/g, '');
    
    // 2. Entferne MSO-Namespaces und Meta-Tags (o:p, v:*, mso-*)
    html = html.replace(/<\/?o:[^>]*>/gi, '');
    html = html.replace(/<\/?v:[^>]*>/gi, '');
    html = html.replace(/mso-[^:]+:[^;"]+;?/gi, '');

    // 3. Bereinige Word-spezifische Klassen und Inline-Styles
    html = html.replace(/class="Mso[^"]*"/gi, '');
    html = html.replace(/style="[^"]*mso-[^"]*"/gi, '');
    
    // 4. Leere oder unnötige Tags aufräumen
    html = html.replace(/<span[^>]*>([\s\S]*?)<\/span>/gi, '$1');

    return html.trim();
}

// Nutzung beim Einfügen im Editor
const rawPaste = e.clipboardData.getData('text/html');
const cleanHtml = cleanWordHtml(rawPaste);

Was genau wird entfernt?

• Konditionale Kommentare: Konstrukte wie <!--[if gte mso 9]>, die nur für den Internet Explorer oder Outlook gedacht sind.
• Mso-Klassen: CSS-Klassen wie class="MsoNormal" oder class="MsoListParagraph".
• Feste Schriftarten: Inline-Anweisungen, die den Text zwingen, in Calibri oder Times New Roman zu erscheinen, anstatt die globale Webschriftart zu nutzen.
• Leere Spans: Verschachtelte <span>-Tags ohne echten Inhalt, die beim Formatieren in Word entstehen.