Konvertieren Sie eine HTML-Seite in einen Berg

21

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:

/\
Löser
quelle
18
Ein Wort der Vorsicht für Golfer ...
Luis Mendo
Wird es jemals geben </ div>? oder können wir annehmen, dass der Schrägstrich immer neben demdiv
R the
hmmm, ich werde nett sein - Sie können keine Leerzeichen nach <oder </(bis zum Tag-Namen) annehmen - es kann jedoch noch Leerzeichen für Attribute geben, zB<div id="aDiv">
Solver
5
Vielleicht könnte dies ein paar weitere Testfälle gebrauchen?
Birjolaxew
1
Dies erfordert wirklich mehr Testfälle und eine genaue Beschreibung (etwa in BNF), wie die Eingabe aussehen wird. Ich weiß nicht genau, was "Gültiges HTML" bedeutet und wie viele Randfälle ich unterstützen sollte. (Das erste, das mir in den Sinn kommt: Leerzeichen zwischen dem Tag-Namen und >so weiter <a >b</a >.)
Lynn

Antworten:

13

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.

p.innerHTML=prompt().replace(/\w/g,'a')
#p,#p *{display:flex;padding:0 0 1rem;align-items:flex-end;font-size:0}#p :before,#p :after{content:'/';font-size:1rem}#p :after{content:'\\'
<pre id=p>


HTML + CSS + JavaScript, 10 + 103 + 20 = 133 Byte

Lösung, die funktioniert, wenn keine Inhalte in Tags enthalten sind.

p.innerHTML=prompt()
#p,#p *{display:flex;padding:0 0 1em;align-items:flex-end}#p :before{content:'/'}#p :after{content:'\\'
<pre id=p>

darrylyeo
quelle
2
Das ist wirklich schlau!
Rick Hitchcock
1
Ich habe noch nie Golf CSS gesehen :)
Solver
Dies schlägt in beiden Testfällen fehl.
Giuseppe
@Giuseppe Ich glaube , Sie in der Lage sein , kann es mit Display zu fixieren = none auf alle Elemente und unter Verwendung eines iframe anstelle eines <pre>
Solver
@ Giuseppe behoben.
Darrylyeo
6

Javascript + JQuery, 275 246 Bytes

29 Bytes dank Rick Hitchcock gespeichert

j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i=0;V=a.children[i];i++){s=s+j(V,b+1)}return s+c+'\\\n';};f=s=>{s=j($(s)[0],0).split`
`;w=Math.max.apply(0,s.map(a=>a.length));o='';for(i=w-1;i>=0;i--){for(c=0;C=s[c];c++){o+=C[i]||' '}o+='\n'}alert(o)}

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:

/
 /
  children...
 \
\

Dreht dann den resultierenden String gegen den Uhrzeigersinn und alarmiert das Ergebnis.

Ein Taco
quelle
Bist du sicher, dass es naiv und nicht naiv ist? (Ich kann diesen Witz stoppen, wenn Sie wollen)
Esolanging Fruit
269 ​​Bytes durch Ändern von: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...
Rick Hitchcock
Wechseln Sie auf for(c=0;c<s.length;c++)zufor(c=0;s[c];c++)
Rick Hitchcock
In ähnlicher Weise wechseln Sie for(i=0;i<a.children.length;i++)zufor(i=0;a.children[i];i++)
Rick Hitchcock
3

HTML + JavaScript (ES6), 8 + 192 = 200 Byte

JS

s=>[...(E.innerHTML=s,y=0,o=[],m=n=>1+[...n.children].map(m).join``+0)(E.firstChild)].map((c,x,a)=>{(o[y+=+c]||(o[y]=[...a].fill` `))[x]=`\\/`[c],y+=~-c})&&o.reverse().map(l=>l.join``).join`
`

HTML

<a id=E>

Weniger golfen

s=>{
    E.innerHTML=s,
    y=0,
    o=[],
    m=n=>1+[...n.children].map(m).join``+0,
    [...m(E.firstChild)].map((c,x,a)=>{
        y+=+c
        if(!o[y]) o[y]=[...a].fill` `
        o[y][x]=`\\/`[c]
        y+=~-c
    })
    return o.reverse().map(l=>l.join``).join`\n`
}
darrylyeo
quelle
Sollte die Byteanzahl nicht das id=EHTML-Element enthalten, da Sie sich darauf verlassen, dass der Code funktioniert?
Birjolaxew
@ Birjolaxew Hoppla! Das habe ich irgendwie verpasst.
Darrylyeo
1
HTML hat einen eingebauten HTML-Parser ... als kreative Lösung.
user202729
1

05AB1E , 38 26 23 Bytes

¶¡εDð¢4÷s'/å_„\/sèú}ζR»

Probieren 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.

Magische Kraken-Urne
quelle
0

Kohle , 28 Bytes

≔¹ηF⮌θ«≡ι"≦¬η<Fη¿⁼ζ/←¶\↙/≔ιζ

Probieren Sie es online! Link ist eine ausführliche Version des Codes. Erläuterung:

≔¹η

Die hVariable wird verwendet, um zu verfolgen, ob wir uns in Anführungszeichen befinden.

F⮌θ«

Schleife in umgekehrter Reihenfolge über die Saite.

≡ι

Schalten Sie das Währungszeichen ein.

"≦¬η

Wenn es ein ist, "dann schalten Sie das Anführungszeichen um.

<Fη

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.

Neil
quelle