Das Formatieren eines Textbaums als hierarchisch strukturierte Liste mit JavaScript kann in verschiedenen Szenarien nützlich sein!
Der folgende JavaScript-Code analysiert einen eingerückten Textbaum und wandelt ihn in eine hierarchisch strukturierte Liste (UL-Elemente) um. Hier ist der Code:
1.) ... Wozu einen Text-Baum als Liste formatieren mit JavaScript?
2.) ... Der JavaScript-Code Text-Baum zur strukturierten Liste als Baumstruktur!
3.) ... Weitere Infos zu diesem JavaScript- und HTML- Code!
1.) Wozu einen Text-Baum als Liste formatieren mit JavaScript?
Das Formatieren eines Textbaums als hierarchisch strukturierte Liste mit JavaScript kann in verschiedenen Szenarien nützlich sein:
Darstellung von Strukturen: Ein Textbaum enthält oft hierarchische Informationen, die in einer visuellen Darstellung leichter zu verstehen sind. Durch die Umwandlung in eine Liste können Benutzer die Hierarchie klar erkennen.
Interaktivität: Durch die Darstellung des Textbaums als Liste können Benutzer mit den Elementen interagieren, beispielsweise indem sie auf Elemente klicken, um Details anzuzeigen oder zu verbergen.
Dynamische Inhalte: JavaScript kann verwendet werden, um den Textbaum dynamisch zu aktualisieren oder zu erweitern, basierend auf Benutzerinteraktionen oder anderen Ereignissen.
Präsentation: Wenn der Textbaum in einem Webdokument präsentiert werden soll, kann eine visuelle Darstellung die Lesbarkeit verbessern und die Information verständlicher machen.
Insgesamt ermöglicht die Formatierung eines Textbaums als hierarchisch strukturierte Liste mit JavaScript eine verbesserte Benutzererfahrung und eine klarere Darstellung komplexer Strukturen.
Selber Testen: ►► Text-Baum-als-hierarchisch-strukturierte-Liste.html
| (Bild-1) Text-Baum als hierarchisch strukturierte Liste formatieren mit JavaScript? |
 |
2.) Der JavaScript-Code Text-Baum zur strukturierten Liste als Baumstruktur!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu Tree</title>
</head>
<body>
<table>
<tr>
<td>
<!--
Hier befindet sich das Textfeld,
das den eingerückten Textbaum enthält
-->
<textarea id="Textarea1" rows="25" cols="30">
Datei
Drucken
----------
Breite
10
20
30
Benden
Bearbeiten
Rückgängig
Wiederherstellen
----------
Suchen
Ersetzen
In Dateien Suchen
Ansicht
Extras
Info
</textarea>
</td>
<td>
<!--
Hier wird das Ergebnis
der Analyse des Textbaums angezeigt
-->
<div style="width:500px;" id="outputList2"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var textarea = document.getElementById('Textarea1');
var text = textarea.value;
var ident_def = " ";
// Funktion, die den Textbaum analysiert
// und in eine hierarchisch strukturierte Liste umwandelt
function TextTreeToUL(text)
{
var i = 0;
var t = "";
var lines = text.split('\n');
// Funktion zur Verarbeitung von Teilbäumen
SubTree(i, lines, "");
// Rekursive Funktion zur Verarbeitung von Teilbäumen
function SubTree(i, lines, ident)
{
t += "<ul>";
while (i < lines.length)
{
t += "<li>" + lines[i] + "</li>\n";
i++;
line = lines[i];
if (!line) break;
if (line.indexOf(ident) !== 0) break;
// Überprüfen, ob die nächste Zeile
// eine Unterstruktur hat und rekursiv verarbeiten
var line = lines[i];
if (line.indexOf(ident + ident_def) === 0)
{
i = SubTree(i, lines, ident + ident_def);
}
line = lines[i];
if (line.indexOf(ident) !== 0) { i--; break; }
}
t += "</ul>"
return i;
}
return t;
}
// Das Ergebnis der Analyse wird
// in das entsprechende div-Element geschrieben
outputList2.innerHTML = TextTreeToUL(text);
</script>
</body>
</html>
3.) Weitere Infos zu diesem JavaScript- und HTML- Code!
Hier ist eine schrittweise Erläuterung des Codes:
1. HTML-Teil:
- Ein `<table>`-Element wird erstellt, das aus einer einzigen Zeile besteht.
- Diese Zeile enthält zwei Zellen (`<td>`), in denen sich ein `<textarea>`-Element und ein leeres `<div>`-Element befinden.
2. JavaScript-Teil:
- Das JavaScript beginnt mit der Initialisierung einiger Variablen, darunter die Referenz auf das `<textarea>`-Element und eine Variable, die den eingerückten Bereich des Textbaums definiert.
- Es gibt eine Funktion namens `TextTreeToUL`, die den Textbaum analysiert und in eine HTML-generierte UL-Liste umwandelt. Diese Funktion wird rekursiv aufgerufen, um Unterbäume zu verarbeiten.
- Die `SubTree`-Funktion ist verantwortlich für die Verarbeitung jedes einzelnen Baumelements und die rekursive Durchführung für Unterelemente.
- Schließlich wird das Ergebnis dieser Analyse in das `<div>`-Element mit der ID `outputList2` geschrieben.
Insgesamt nimmt das Skript den eingerückten Text im `<textarea>`, analysiert ihn und erzeugt dann eine hierarchisch strukturierte Liste im `<div>`-Element, die den Textbaum repräsentiert.
