HTML-Code optimieren per VBA

1/2020, 2020, Interaktiv

Im Beitrag „Von Access nach WordPress“ (Heft 6/2019) haben wir Routinen entwickelt, mit denen wir den Inhalt eines Textfeldes in SQL-Anweisungen exportiert und damit eine WordPress-Webseite gefüllt haben. Der Weg dorthin war nicht so einfach, wie es in diesem Beitrag beschrieben wurde. In der Tag lag der HTML-Code mit den Artikeln so vor, dass er in einem anderen Content Management System, hier Typo3, optimal angezeigt wurde. Wenn wir diesen HTML-Code in das WordPress-System importiert haben, sah das optisch allerdings nicht so ansprechend aus. Wir mussten also noch einige Änderungen am HTML-Code vornehmen. Für Handarbeit war das bei rund 1.000 Artikel zu viel, also war die Programmierung entsprechender Konvertierungsroutinen angezeigt. Wie das grundlegend funktioniert, zeigen wir im vorliegenden Beitrag.

Beispiele für notwendige Konvertierungen

Typo3 war als Content Management System sehr nachsichtig, was die anzuzeigenden Inhalte anging. So konnten Sie ihm beispielsweise die deutschen Umlaute wie ä, ö und ü sowie das scharfe s (ß) unterjubeln und es zeigte diese problemlos an. Unter WordPress funktioniert das nicht. Hier werden entsprechende HTML-Entitäten erwartet, die wie folgt aussehen:

  • ä: ä
  • ö: ö
  • ü: ü
  • Ä: Ä
  • Ö: Ö
  • Ü: Ü
  • ß: ß

Auch der Vorname des Autors dieser Zeilen führte zu Problemen: Also musste André überall in André geändert werden. Und davon gab es noch viele weitere Beispiele.

Größer- und Kleiner-Zeichen

Ein weiteres Problem sind im Text abgebildete HTML-Codes wie der folgende:

<p>Beispieltext</p>

Dies wurde unter Typo3 problemlos angezeigt, unter WordPress jedoch wurden die HTML-Auszeichnungen mehr oder weniger sinnvoll als solche interpretiert und nicht einfach ausgegeben. Also muss man auch hier die Kleiner- und Größer-Zeichen durch entsprechende Entitäten ersetzen:

  • >: &lt;
  • <: &gt;

Andere Zeichen

Desweiteren haben wir noch einige andere Zeichen gefunden, die wir in den rund 1.000 Artikeln mehr oder weniger konsistent verwendet haben – zum Beispiel verschiedene Anführungszeichen wie “, „“, „“ oder „“. Hier haben wir versucht, die Anführungszeichen auf diesem Wege zu vereinheitlichen.

Mit Anführungszeichen gab es vor allem Probleme, weil diese ja irgendwie in die INSERT INTO-Anweisungen integriert werden mussten, die ja ihrerseits die Werte für Textfelder in Anführungszeichen angeben. Unter dem SQL-Dialekt von MySQL kann man Zeichenketten sowohl in Hochkommata (‚) also auch in Anführungszeichen angeben („). Je nachdem, welches man verwendet, muss man aber im zu speichernden Text die Hochkommata oder Anführungszeichen „escapen“, also durch ein zusätzliches Zeichen so codieren, dass es nicht als Ende der Zeichenkette interpretiert wird – denn das führt regelmäßig zu Fehlern, da so der Rest der SQL-Anweisung fehlinterpretiert wird. Ein Beispiel:

INSERT INTO wp_posts(ID, post_content, ...) 
VALUES (55000999, 'Dies ist ein 'lustiger' Beispieltext', ...)

Das führt zu einem Fehler, weil der SQL-Interpreter das Hochkomma vor lustiger als Ende der Zeichenkette erkennt. Danach wird ein Komma erwartet, aber es folgt noch weiterer Text, was den Fehler auslöst.

Abhilfe schafft es an dieser Stelle, einfach das Hochkomma in dem Text, der in das Feld eingefügt werden soll, durch ein doppeltes Hochkomma zu ersetzen. Alternativ können Sie auch ein Anführungszeichen verwenden – zumindest, wenn zur Markierung der einzufügenden Texte Hochkommata verwendet werden.

HTML-Auszeichnungen

Außerdem hatte ich die interessante Idee, nicht die üblichen HTML-Auszeichnungen etwa für Überschriften zu verwenden, sondern ein Absatz-Element mit einer bestimmten CSS-Klasse (wobei: vermutlich war das gar nicht meine Idee, sondern die des Exports aus Word oder InDesign, das natürlich nicht erkennen konnte, dass die Absatzformatklasse titel eine Überschrift beinhaltet):

<p class=""titel"">...</p>

Dennoch sollten solche Elemente so umformatiert werden, dass Folgendes herauskam:

<h1>...</h1>

Damit können dann auch die Suchmaschinen viel mehr anfangen – sonst wäre es nicht möglich, zu erkennen, in welchem Element sich die Überschrift eines Textes befindet.

Es gibt noch weitere, ähnliche Beispiele – zum Beispiel für Zwischenüberschriften:

<p class="zwischenueberschrift">...</p>

Diese Auszeichnung soll beispielsweise zu dieser werden:

<h2>...</h2>

Für Quellcode gab es die folgende Auszeichnung:

<p class="Quellcode">...</p>

Diese soll so umformatiert werden:

<pre>...</pre>

Innerhalb des Fließtextes wurde die folgende Auszeichnung verwendet, um Begriffe hervorzuheben:

...<span class="kursiv">...</span>...

Das wollen wir durch fette Schrift ersetzen:

...<b>...</b>...

Nicht sichtbare Zeichen

Die bisher beschriebenen notwendigen Änderungen waren leicht zu erkennen. Entweder führten Sie schon beim Versuch, die Texte in die Textfelder der MySQL-Tabelle zu importieren, zu Fehlern oder sie fielen dann beim manuellen Sichten der Texte auf der WordPress-Webseite auf. Einige Zeichen sorgten jedoch dafür, dass der Text in WordPress einfach an einer bestimmten Stelle endete. Diese Zeichen mussten wir erst aufwendig ermitteln, indem wir die betroffene Stelle eingegrenzt haben und dann Zeichen für Zeichen die ASCII-Codes analysiert haben. Dabei zeigte sich, dass so manche Steuerzeichen aus dem Originaltext aus Word oder InDesign im HTML-Code gelandet sind, die von Typo3 ignoriert wurden – und unter WordPress dazu führten, dass der Rest des Textes inklusive dieses Zeichens schlicht nicht mehr abgebildet wurde. Die ASCII-Codes dieser Zeichen lauten beispielsweise 7, 22, 30, 63, 141 oder 157.

Umwandlungen per VBA

Die meisten Änderungen, die notwendig sind, um die oben genannten, nicht in WordPress funktionierenden Zeichen und Elemente anzupassen, sind mit dem Aufruf der Replace-Funktion zu erledigen. Andere verlangen nach mehr Aufwand, zum Beispiel wenn es um das Ersetzen von Elementen wie

…

durch geht.

Einzelne Zeichen ersetzen

Wir haben diese alle in eine einzige Funktion geschrieben, mit der wir einen Text entgegennehmen, diesen auf die zu ersetzenden Zeichen durchsuchen und diese direkt mit der Replace-Funktion ersetzen. Das sieht dann beispielsweise wie folgt aus:

Public Function Ersetzen(strText As String) As String
     strText = Replace(strText, "'", "'")
     strText = Replace(strText, "'", "''")
     strText = Replace(strText, "", ">/font<")
     strText = Replace(strText, "ä", "ä")
     strText = Replace(strText, "ö", "ö")
     strText = Replace(strText, "ü", "ü")
     strText = Replace(strText, "Ä", "Ä")
     strText = Replace(strText, "Ö", "Ö")
     strText = Replace(strText, "Ü", "Ü")
     strText = Replace(strText, "ß", "ß")
     strText = Replace(strText, "é", "é")
     strText = Replace(strText, """, """")
     strText = Replace(strText, """, """")
     strText = Replace(strText, "§", "§")
     strText = Replace(strText, "-", "-")
     strText = Replace(strText, "€", "€")
     strText = Replace(strText, "á", "á")
     strText = Replace(strText, """, """")
     strText = Replace(strText, """, """")
     ...
     Ersetzen = strText
End Function

Für die meisten Sonderzeichen lassen sich leicht die passenden HTML-Entitäten finden. Wenn das nicht gelingt, ist die Chance hoch, dass Sie das Ersetzen über den ASCII-Code des Zeichens wie folgt bewerkstelligen können:

Sie ermitteln den ASCII-Code des Zeichens mit der Asc-Funktion:

  Asc("š")
  154

Dann stellen Sie den Ersetzungscode aus den Zeichen &#, dem ASCII-Code und dem Semikolon (;) zusammen:

&#154;

Dementsprechend sieht dann die Ersetzung aus:

strText = Replace(strText, "š", "&#154;")

oder

strText = Replace(strText, Chr(154), "&#154;")

Umfangreichere Ersetzungen

Etwas komplizierter wird es, wenn Sie öffnende und schließende HTML-Tags ersetzen wollen.

Soll nur der öffnende Tag angepasst werden, etwa <p class=“Fliess-text“> durch <p>, kann man das genau wie oben mit der Replace-Funktion erledigen:

strText = Replace(strText, "<p class=""Fliesstext"">", "<p>")

Zu beachten ist in diesem Fall, dass Sie das einfache Anführungszeichen in der zu ersetzenden Zeichenkette durch doppelte Anführungszeichen ersetzen, damit das Anführungszeichen hinter class= nicht als schließendes Anführungszeichen erkannt wird.

Ein Beispiel für einen komplizierteren Fall ist der folgende:

<p class=""titel"">...</p>

soll ersetzt werden durch:

<h1>...</h1>

Das erledigen wir mit der Funktion aus Listing 1. Hier ermitteln wir mit der InStr-Funktion zunächst die Position im Text, an der das erste Mal die gesuchte Zeichenkette auftaucht und speichern diese in der Variablen lngStart. Danach steigen wir in eine Do While-Schleife ein. Warum eine Schleife Weil wir davon ausgehen, dass es nicht nur ein Vorkommen des zu ersetzenden Textes gibt. Deshalb läuft die Do While-Schleife solange, wie lngStart größer als 0 ist. Wenn wir beim ersten Aufruf von InStr also kein Vorkommen finden, hat lngStart den Wert 0 und die Schleife wird gar nicht erst durchlaufen.

Ende des frei verfügbaren Teil. Wenn Du mehr lesen möchtest, hole Dir ...

den kompletten Artikel im PDF-Format mit Beispieldatenbank

diesen und alle anderen Artikel mit dem Jahresabo

Schreibe einen Kommentar