Automatische Linkliste

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

Automatische Linkliste

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

Den Fuß- und Endnoten in gedruckten Dokumenten entsprechen die Links in Web-Dokumenten. Sie werden meist mit den Wörtern verbunden, die über den Link mit weitergehenden Erklärungen verbunden sind.

Wenn die Webseite länger ist, kann auch die Liste der Links lang werden und es ist dann praktisch, alle diese Links am Ende der Seite in einer sortieren Tabelle wiederzufinden.

Beispieltext

…über den schulischen und beruflichen Werdegang des Autors

In der Kindheit lebte der Autor in der Parallelwelt der tschechischen Minderheit in Simmering. Das Soziop des Autors beschreibt ein interaktiver Stammbaum. Er besuchte die Tschechische „Komensky“-Volksschule am Sebastianplatz 4, 1030 Wien. Weil damals, in der 1950-Jahren wegen der Isolation durch den Eisernen Vorhang nur mehr eine tschechische Volks- und Hauptschule aber keine tschechische AHS betrieben wurde, wechselte der Autor in das GRG, Gottschalkgasse 21, 1110 Wien. Über die Matura der Klasse berichtet die Seite „Schicksalstag 13.6.1966„. Der Großmutter war diese Schule suspekt. Ihr schwebte vor, dass ihr Enkel so etwas wie ein Postbeamter werden sollte. Doch die Faszination des Radios und des Fernsehens war so groß, dass die Familie schließlich dem Studium an der TU-Wien, Karlsplatz 13, 1040 Wien zugestimmt hat. Dass dieses Studium trotz verschiedener Ablenkungen schließlich doch bewältigt wurde, überraschte die ganze Familie, denn im Laufe der vielen Studienjahre haben sie die Hoffnung darauf bereits aufgegeben. Dass ich das AIT (früher Arsenal Research, damals BVFA-Arsenal), 1030 Wien, einer Anstellung bei Siemens vorgezogen habe, sollte die weitere Berufslaufbahn wesentlich beeinflussen, denn durch einen eher zufälligen Vorschlag eines Kollegen bekam ich eine Stelle am TGM (HTBLVA Wien 20.), Wexstraße 19-23, 1200, Wien. Die Unterrichtsinhalte musste ich mir erarbeiten, und eine wichtige Komponente dieses „Learning by Doing“ waren die Zeitschrift PCNEWS und ClubComputer, beide gegründet 1986. In der Pension entdeckte der Autor die Faszination des Fußballs und entwarf eine Rapid-Statistikseite und ein Rapid-Tagebuch.

Automatisch erstellte Link-Liste

Wenn dieser Text länger ist, kann das Auffinden eines bestimmten Links mühsam werden. Gewünscht ist also ein Script, das alle Links alphabetisch sortiert an einer dafür vorgesehenen Stelle einfügt. Der folgende Absatz ist automatisch erstellt, das dazugehörige Programm wird weiter hinten beschrieben.

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

Code

<div id="mylinks"></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
#mylinks li a, #mylinks li { color: white; }
</style>
<script>
var arr_Links = []
$.each($("mytext a"), function() {
	var outerHTML = $(this).prop('outerHTML')
	if ( (outerHTML.includes(".png")) || (outerHTML.includes(".jpg")) )
	; else arr_Links.push(outerHTML)
})
arr_Links.sort(function(a,b){
	var a1 = a.match(/>(.+)</)[0]
	var b1 = b.match(/>(.+)</)[0]
	if (a1>b1) return 1
	if (a1<b1) return -1
	return 0
})
var s = ""
for (var i=0; i<arr_Links.length; i++) {
	s += "<li>"+arr_Links[i]+"</li>"
}
if (s=="") 
	$("#mylinks").html("")
else 
	$("#mylinks").html("<ul>"+s+"</ul>")
</script>

Dokumentation

  • Wo die Links gesucht werden sollen, schränkt das Tag mytext ein, das in der Regel am Anfang und am Ende der Seite eingefügt wird. Auf der vorliegenden Seite wird aber der Code und dessen Beschreibung ausgeschlossen
  • Der Abschnitt mylinks ist anfangs leer und wird durch das Script befüllt.
  • Die Bibliothek jQuery muss inkludiert werden, wenn das Thema das nicht automatisch tut.
  • Die beiden Stildefinitionen lassen den Text in weißer Farbe erscheinen. (Der grüne Hintergrund wird im umschließenden Block „Gruppe“ eingestellt.)
  • arr_Link ist ein anfangs leeres Array, in das die Links der Seite eingefügt werden
  • $.each übergibt alle Vorkommen des Selektors mytext a (das sind alle Tags a zwischen dem Tag-Paar mytext) an function
  • Der gesamte Code des a-Tag wird in der Variablen outerHTML gespeichert.
  • Wenn keine Bilder eingeschlossen sind wird das Objekt in die Liste arr_Links angehängt.
  • Das Array wird sortiert, dabei wird der Text zwischen > und < berücksichtigt, also der angezeigte Text.
  • Alle gespeicherten Links werden in der Variablen s als Element einer unsortierten Liste li gespeichert.
  • Dieser Code wird im Abschnitt mylinks gespeichert. Sollte es keine Links geben, bleibt der Abschnitt mylinks leer.

Beispiel

Im Web powidales.at wird dieses Programm auf allen Seiten angewendet und die Schlagwortliste jeder Seite am Ende der Seite angezeigt.

Kommentar absenden