Zeilenweise Suchen in HTML

Digitalisierte Texte lassen sich durch Algorithmen durchsuchen, die Daten können geordnet, gruppiert und sortiert werden. Das sind Möglichkeiten, die nicht nur von Verfechtern des distant reading genutzt werden und ohne die keine moderne Forschung in den Geisteswissenschaften mehr möglich ist. Sorgfältig präparierte Editionen in von der wissenschaftlichen Gemeinschaft entwickelten standardisierten Datenformaten erlauben es, auch sehr spezifischen Anfragen die für eine Fachrichtung relevant sind, an die Quellen zu stellen. Allerdings ist es nicht für jede Aufgabenstellung nötig, die Daten in einem dieser teilweise sehr komplexen Datenformate zu erfassen, schließlich beherrscht auch eine einfache Textverarbeitung die Möglichkeit differenzierte Suchen durchzuführen. Etwas schwieriger gestaltet es sich allerdings, einen vergleichenden Überblick über die gefundenen Textstellen zu bekommen, die auch jeweils den relevanten Kontext der Textstelle anzeigt.

Die Markup-Sprache HTML wird in erster Linie mit dem World Wide Web in Verbindung gesetzt und sicherlich findet sie als Sprache zur Gestaltung der Internetseiten ihre wichtigste Anwendung. Das Format stellt eine sehr einfach zu handhabende Möglichkeit dar, Texte strukturiert zu erfassen und diese Struktur dann in einem Browser anschaulich zu präsentieren. Mit sehr einfachen Mitteln ist es sehr schnell möglich, einen Text als HTML zu formatieren. Da die Browser auch Programmiersprachen verstehen, lassen sich dann ohne großen Aufwand nützliche Funktionen zur Recherche in die HTML-Dateien integrieren.

Nachfolgend wird eine Möglichkeit demonstriert, die Suche nach Textbelegen zu vereinfachen.Dabei wird angenommen, dass jede Verszeile in einem Listenelement untergebracht ist. Die Suchanfrage wird, sobald der entsprechende Knopf betätigt wird, auf die Listenelemente angewendet und blendet alle diejenigen Listenelemente aus, die den Suchkriterien nicht entsprechen. Damit sind also nur noch jene sichtbar, die das gesuchte Merkmal aufweisen. Wer ein wenig experimentieren will, versucht sich an regulären Ausdrücken. Mit e[,.]$ beispielsweise lassen sich alle Verszeilen finden die auf einer offenen Silbe auf -e enden.

Bitte hier den Suchtext (das Suchmuster) eingeben:

  1. Ich prüeve in mîme sinne
  2. daz lûterlîchiu minne
  3. der werlte ist worden wilde.
  4. dar umb sô sulen bilde
  5. ritter unde frouwen
  6. an diesem mære schouwen,
  7. wand ez von ganzer liebe seit.
  8. des bringet uns gewisheit
  9. von Strâzburc meister Gotfrit:
  10. swer ûf der wâren minne trit
  11. wil eben setzen sînen fuoz,
  12. daz er benamen hœren muoz
  13. sagen unde singen
  14. von herzeclichen dingen,
  15. diu ê wâren den geschehen
  16. die sich dâ hæten undersehen
  17. mit minneclichen ougen.
  18. diu rede ist âne lougen:
  19. er minnet iemer deste baz
  20. swer von minnen etewaz
  21. hœret singen oder lesen.
  22. dar umbe wil ich flîzec wesen
  23. daz ich diz schœne mære
  24. mit rede alsô bewære
  25. daz man dar ane kiesen müge
  26. ein bilde daz der minne tüge,
  27. diu lûter unde reine
  28. sol sîn vor allem meine.

Um diese Funktionalität in einer eigenen HTML-Seite unterzubringen, bedarf es tatsächlich nur ein paar Zeilen Code, die in deren Header eingetragen werden müssen:

<head>
  <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>		
  <script type = "text/javascript">
    $(document).ready(function() {
      // Füge am Anfang des Dokuments einen Absatz
      // und in diesemSuchfeld mit der id "suche" ein.

      $("body").prepend("<p>Suche: <input type='text' id='suche' /></p>");
      
      // Wenn sich der Suchtext ändert ...

      $("#suche").change(function() {
        let Suchtext = $("#suche").val();  // Suchtext übernimmt den Text des Suchfeldes
        let reSuch = new RegExp(Suchtext); // reSuch ist ein regulärer Ausdruck, der darauf basiert.
        $("li").each(function()
        {
            // Alle Listenelemente werden überprüft (test),
            // ob sie das Suchmuster beinhalten

            if(reSuch.test($(this).text()))
            {
                $(this).fadeIn(); // gefunden? Einblenden.
            }
            else
            {
                $(this).fadeOut(); // nicht? Ausblenden.
            }
         });
      });
        
   });
  </script>
</head>

Das kleine jQuery-Skript fügt einen neuen Absatz am Anfang der Seite ein, in dem sich das Suchfeld findet. Auf einen Button, wie er in diesem Blogbeitrag verwendet wird, wird der Einfachheit verzichtet. Sobald sich der Inhalt des Suchfeldes, dem die id „such“ zugeordnet wurde, ändert, wird die Funktion aufgerufen, die zuerst aus der Texteingabe einen regulären Ausdruck erzeugt. Dann wird Listenelement für Listenelement (Vers für Vers) überprüft, ob das Suchmuster darin wiedergefunden und je nachdem die Zeile ein- oder ausgeblendet.
Selbstverständlich ist es möglich, das Skript in eine nachzuladende Datei zu speichern und dann in die HTML-Seite nachzuladen. Diese muss dann nur noch folgende Zeilen im Header ergänzen (Dateiname und Pfad müssen natürlich auf das Skript verweisen und gegebenenfalls angepasst werden, um es zu laden):

<head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      </script>	
      <script type = "text/javascript"
	  	src="RegexSuche.js">
      </script>
   </head>

Das Skript sieht dann so aus:

// Inhalt der Datei:
// RegexSuche.js


$(document).ready(function() {
    $("body").prepend("<p>Suche: <input type='text' id='suche' /></p>");
    $("#suche").change(function() {
       
        let Suchtext = $("#suche").val();
        let reSuch = new RegExp(Suchtext);

        $("li").each(function()
        {
            if(reSuch.test($(this).text()))
            {
                $(this).fadeIn();
            }
            else
            {
                $(this).fadeOut();
            }
        });
    });      
 });

Der Code wurde bewusst einfach gehalten, da nur das Prinzip demonstriert werden sollte. Im realen Einsatz wird beispielsweise mehr Flexibilität erreicht, wenn statt eines Markup-Typs ein Klassennamen zur Identifizierung der zu durchsuchenden Textblöcke zu verwendet wird. Und sicherlich ist „suche“ kein besonders geeigneter Bezeichner, wenn man vorhat, die Routine in eine komplexe Umgebung einzubinden.In dieser einfachen Form lässt der Codeschnipsel sich jedoch per copy und paste schnell übernehmen, wenn innerhalb von Minuten ein paar einfache Fragen an einen Text gestellt und beantwortet werden sollen.

Veröffentlicht von

Doktor Tom

Klar, Studium der Computerlinguistik und Germanistik mit Spezialisierung auf das Mittelhochdeutsche. So gesehen Digital Humanist. Vor allem aber Tüftler, der Spaß an ungewöhnlichen Aufgabenstellungen und einfachen, aber effizienten Lösungen hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.