Aufgabe: Wandle eine HTML-Seite in einen Berg um!
Wenn HTML-Seiten eingerückt sind, können sie folgendermaßen aussehen:
<div>
<div>
<div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
Aber ehrlich gesagt ist ein Berg repräsentativer für diese Struktur.
Also können wir es umschreiben als:
/\
/\/ \
/ \
/ \
Die äußersten Schrägstriche links und rechts entsprechen dem äußeren Div - jedes Paar von HTML-Tags sollte wie /
für das Start-Tag und \
für das End-Tag dargestellt werden - innerhalb aller Tags sind "höher", mit derselben Struktur.
Eingang:
- Es wird kein geben
<!DOCTYPE>
- Es gibt keine selbstschließenden Tags, z. B.
<img />
oder<br />
- Die Tags können Attribute oder Inhalte enthalten
- Möglicherweise sind Leerzeichen oder Tabulatoren vorhanden. Ihr Programm sollte diese ignorieren
- Zwischen
<
oder</
und dem Tag-Namen werden keine Leerzeichen eingefügt - Alle Eingaben sind gültiges HTML
Ausgabe - ein Berg, der die Tags wie oben darstellt.
Weitere Testfälle:
Eingang:
<div id="123"> HI </div><a><span></span></a>
Ausgabe:
/\
/\/ \
Eingang:
<body id="<"></body>
Ausgabe:
/\
</ div>
? oder können wir annehmen, dass der Schrägstrich immer neben demdiv
<
oder</
(bis zum Tag-Namen) annehmen - es kann jedoch noch Leerzeichen für Attribute geben, zB<div id="aDiv">
>
so weiter<a >b</a >
.)Antworten:
HTML + CSS + JavaScript, 39 + 141 + 20 = 200 Byte
Wird visuell auf der Webseite ausgegeben. Damit dies mit speziellen Elementen wie funktioniert
<body>
, werden alle Buchstaben in der Eingabe ersetzt.HTML + CSS + JavaScript, 10 + 103 + 20 = 133 Byte
Lösung, die funktioniert, wenn keine Inhalte in Tags enthalten sind.
quelle
Javascript + JQuery,
275246 Bytes29 Bytes dank Rick Hitchcock gespeichert
Eine ziemlich naive Lösung für das Problem. Analysiert den HTML-Code mit JQueries
$(string)
und erstellt dann rekursiv einen Seitenberg mit dem Format:Dreht dann den resultierenden String gegen den Uhrzeigersinn und alarmiert das Ergebnis.
Code-Snippet anzeigen
quelle
j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i
...for(c=0;c<s.length;c++)
zufor(c=0;s[c];c++)
for(i=0;i<a.children.length;i++)
zufor(i=0;a.children[i];i++)
HTML + JavaScript (ES6), 8 + 192 = 200 Byte
JS
HTML
Code-Snippet anzeigen
Weniger golfen
quelle
id=E
HTML-Element enthalten, da Sie sich darauf verlassen, dass der Code funktioniert?05AB1E ,
382623 BytesProbieren Sie es online!
Ich spiele immer noch Golf. Es wird davon ausgegangen, dass Sie in HTML immer 4 Leerzeichen als Einrückung verwenden und nicht mit "nicht hübschem" HTML arbeiten. Sie sind sich nicht sicher, wie Sie mit dem Teil "Inhalt" umgehen sollen. Wenn dies ungültig ist, bearbeiten Sie die Frage, um ein Beispiel mit einem Knoten mit Inhalt anzuzeigen.
quelle
Kohle , 28 Bytes
Probieren Sie es online! Link ist eine ausführliche Version des Codes. Erläuterung:
Die
h
Variable wird verwendet, um zu verfolgen, ob wir uns in Anführungszeichen befinden.Schleife in umgekehrter Reihenfolge über die Saite.
Schalten Sie das Währungszeichen ein.
Wenn es ein ist,
"
dann schalten Sie das Anführungszeichen um.Wenn es ein ist
<
und wir nicht in Anführungszeichen stehen, dann ...Wenn das nächste Zeichen (vorheriges in der Schleife, weil wir in umgekehrter Reihenfolge spielen) a ist
/
, dann ...Bewege dich nach oben und ziehe einen nach
\
links, sonst ...Zeichne a
/
und gehe nach unten und links.Merken Sie sich das Zeichen für die nächste Schleifeniteration.
quelle