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:

/\

code-golf string ascii-art parsing 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

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

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.

Code-Snippet anzeigen

    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'}return o}

update=_=>outp.textContent=f(inp.value)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=inp oninput=update()></textarea>
<pre id=outp></pre>

Erweitern Sie das Snippet

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>

Code-Snippet anzeigen

f=

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`
`

console.log(f(`<div>
    <div>
        <div>
        </div>
        <div>
        </div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>`))

<a id=E>

Erweitern Sie das Snippet

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

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

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.

Ｆ⮌θ«

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.

Neil
quelle

Konvertieren Sie eine HTML-Seite in einen Berg

Antworten:

HTML + CSS + JavaScript, 39 + 141 + 20 = 200 Byte

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

Javascript + JQuery, 275 246 Bytes

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

JS

HTML

Weniger golfen

05AB1E , 38 26 23 Bytes

Kohle , 28 Bytes