Text aus HTML

von | Mai 4, 2023 | JavaScript, WordPress | 0 Kommentare

Text aus HTML

— (unsichtbarer) HTML-Block mit dem Inhalt <mytext> —

Dieses Web ist mit WordPress gestaltet. Es besteht aus „Seiten“ und „Beiträgen“. Die Seiten sind im Menü angeführt, es gibt vielleicht 20 solcher Seiten. Die Beiträge werden laufend erstellt, seit 2015 sind etwa 1000 Beiträge verfasst worden. Unsere Startseite zeigt die letzten 10 Beiträge und man kann danach weiterblättern. Es gibt auch ein Gesamtverzeichnis im Menüpunkt „Beiträge“.

Die vorliegende Seite „Text auf HTML“ ist ein Beitrag. Damit man diesen Beitrag später wieder findet, sind zwei Klassifizierungen vorgesehen: Kategorien und Stichwörter. Wenn ein Artikel verfasst wird, soll der Autor wenigstens eine Kategorie vergeben, damit der Beitrag im Inhaltverzeichnis systematisch gefunden werden kann. Man kann aber auch zusätzlich Schlagwörter vergeben, doch ist diese Vergabe mühsam und meist ziemlich unvollständig. Daher werden Schlagwörter eher selten vergeben, weil man ja auch über die hervorragende Suche von WordPress nach beliebigen Wörtern suchen kann.

Extrahieren von Schlagwörtern

Der Plan ist nun, Schlagwörter aus einem bestehenden Beitragstext zu extrahieren und automatisch am Ende des Beitrags sortiert anzuzeigen.

Das Problem wird in zwei Schritten erledigt:

  • Schritt 1: Extrahieren des Textes aus der Seite
  • Schritt 2: Eliminieren alle uninteressanten Wörter (Stopp-Wörter), Sortieren und ausgeben der Wortliste

In diesem Beitrag wird zuerst Schritt 1, das Extrahieren des Textes erledigt.

Extrahieren des Textes aus einer Seite

Der Text einer Webseite besteht aus vielen HTML-Tags, die den eigentlichen Text einschließen. Beispiel für einen Text aus einer WordPress-Seite:

Fragment eines HTML-Codes einer WordPress-Seite
Nur die weißen Stellen sind Text, der Rest sind Tags, die nur der Formatierung dienen

EIn Teil der Aufgabe ist es also, nur die weißen Textstellen zu extrahieren.

Ein zweites Problem ist, von wo bis wohin der Text zu extrahieren ist.

Grundsätzlich könnte man den Text der ganzen Seite heranziehen, doch gibt es auch Seiten mit Kommentaren und Seiten mit Programmcode und diese Dinge wird man nicht unbedingt in die Wortliste aufnehmen wollen.

Jede WordPress-Seite grenzt den eigentlichen Beitragstext mit einem Tag-Paar ein, zum Beispiel mit <main> ... </main> ein. Alles dazwischen ist der Text, den man in formatierter Form sieht. Leider hängt der Name dieses Tags vom verwendeten Thema ab, denn auf der vorliegenden Seite ist es das Tag-Paar <article> ... </article>. Daher wird für die Bewältigung der Aufgabe ein eigenes Tag-Paar definiert, um unabhängig vom verwendeten Thema zu sein und auch, um Anfang und Ende individuell einstellen zu können.

Am Beginn des Bereichs, den man in einen Text konvertieren will, fügt man in einem HTML-Block ein:

<mytext>

und am Ende des gewünschten Textbereichs in einem weiteren HTML-Block:

</mytext>

Diese Blöcke sind bei der Darstellung der Seite unsichtbar.

Am Ende des Beitrags startet man ein Script, das den Text der Seite ermittelt und vom umgebenden HTML-Text befreit.

— (unsichtbarer) HTML-Block mit dem Inhalt </mytext> —

Schritt 1: Lesen des Textes einer Seite

Der einfachste Code, um einen Text in einer Javascript-Variablen zu speichern, ist

var text = $("mytext").text()

$("mytext") ist die Jquery-Schreibweise, um das Tag mytext anzusprechen, die Methode text() extrahiert den Text und eliminiert alle sonstigen HTML-Tags.

Damit der Text auch auf der Seite sichtbar wird, muss man dort, wo man ihn einfügen will, einen leeren Abschnitt (div) einfügen, hier wird der Name „ReinerText“ verwendet:

<div id="ReinerText"></div>

Der fertige Code schaut so aus:

<div id="ReinerText"></div>
<script>
var text = $("mytext").text()
$("#ReinerText").html("<tt style='background:transparent'>"+text+"</tt>")
</script>

Die Formatierung mit tt und der zusätzlichen Styleangabe war notwendig, damit der Text auf dunklem Hintergrund korrekt dargestellt wird.

Sehr oft – aber nicht immer – ist die JQuery-Bibliothek Teil eines Themas. Wenn nicht, muss man am Beginn des Script-Abschnitts die Zeile

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

einfügen.

Extrahierter Text

Der folgende Text entsteht durch die oben abgebildeten Codezeilen, eingebettet in einen HTML-Block:

Hinweise

  • Bei dem Abschnitt, wo Code beschrieben wird ("Lesen des Textes einer Seite") wurde das Extrahieren des Textes beendet, weil die Berücksichtigung von Code-Bereichen eine Erweiterung des Codes benötigen würde.
  • Man sieht, dass besondere Textstellen, wie in diesem Fall "..." oder Sonderzeichen wie Klammern eine weitere Behandlung benötigen werden, ebenfalls wird man Satzzeichen berücksichtigt müssen.
  • In dieser Beispielseite werden die zusätzlichen Tags mytext sowie der Code in eigenen HTML-Blöcken in die Seite eingefügt. Es wäre unpraktisch, würde man das händisch in alle Seiten eines Webs durchführen wollten. Daher wird man diese Blöcke am Anfang und am Ende des Seiteninhaltsblocks des Themas fest einbauen. Das wird Teil eines dritten Beitrags sein.

--- Fortsetzung "Schritt 2" in einem zweiten Artikel ---

Kommentar absenden

Zur Werkzeugleiste springen