Ubah halaman HTML menjadi gunung

21

Tugas: ubah halaman HTML menjadi gunung!

Ketika halaman HTML diindentasi, mereka dapat terlihat seperti:

<div>
    <div>
        <div>
        </div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>

Tapi jujur ​​saja, gunung lebih mewakili struktur ini.

Jadi kita dapat menulis ulang sebagai: 

     /\
  /\/  \
 /      \
/        \

Garis miring terluar di kiri dan kanan sesuai dengan div luar - setiap pasang tag HTML harus diwakili /untuk tag awal dan \untuk tag akhir - di dalam semua tag "lebih tinggi", dengan struktur yang sama.

Memasukkan:

  • Tidak akan ada <!DOCTYPE>
  • Tidak akan ada tag yang menutup sendiri misalnya <img />atau<br />
  • Mungkin ada atribut atau konten di dalam tag
  • Mungkin ada spasi atau tab - program Anda harus mengabaikannya
  • Tidak akan ada spasi antara <atau </dan nama tag
  • Semua input akan menjadi HTML yang valid

Output - gunung yang mewakili tag seperti di atas.

Lebih banyak testcases:

Memasukkan:

<div id="123"> HI </div><a><span></span></a>

Keluaran:

   /\
/\/  \

Memasukkan:

<body id="<"></body>

Keluaran:

/\
code-golf string ascii-art parsing Solver
sumber
18
Kata hati - hati untuk pegolf ...
Luis Mendo
Akankah ada </ div>? atau dapat kita asumsikan bahwa tebasan selalu bersebelahan dengandiv
Rɪᴋᴇʀ
hmmm, saya akan baik-baik saja - Anda dapat mengasumsikan tidak ada spasi setelah <atau </(sampai nama tag) - namun mungkin masih ada ruang untuk atribut misalnya<div id="aDiv">
Solver
5
Mungkin ini bisa menggunakan beberapa kasus uji lagi?
Birjolaxew
1
Ini benar-benar membutuhkan lebih banyak kasus uji, dan deskripsi yang tepat (dalam BNF, katakanlah) tentang seperti apa inputnya. Saya tidak tahu apa arti "Valid HTML", dan berapa banyak kasus tepi yang harus saya dukung. (Pertama yang terlintas dalam pikiran: ruang antara nama tag dan >semacamnya <a >b</a >.)
Lynn

Jawaban:

13

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

Output secara visual ke halaman web. Untuk memungkinkan ini bekerja dengan elemen-elemen khusus seperti <body>, semua huruf dalam input diganti.

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>
Luaskan cuplikan

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

Solusi yang berfungsi jika tidak ada konten di dalam tag.

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

Darrylyeo
sumber
2
Ini sangat pintar!
Rick Hitchcock
1
Saya belum pernah melihat CSS golf sebelumnya :)
Solver
Ini gagal kedua kasus uji.
Giuseppe
@ Giuseppe Saya pikir Anda mungkin dapat memperbaikinya dengan tampilan = tidak ada di semua elemen dan menggunakan iframe bukan <pre>
Solver
@Giuseppe Diperbaiki.
darrylyeo
6

Javascript + JQuery, 275 246 byte

Disimpan 29 byte berkat Rick Hitchcock

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)}

Solusi yang cukup naif untuk masalah ini. Parsing HTML dengan JQuery's $(string), lalu secara rekursif membangun gunung miring dengan format:

/
 /
  children...
 \
\

Kemudian memutar string yang dihasilkan berlawanan arah jarum jam, dan memperingatkan hasilnya.

Tampilkan cuplikan kode

ATaco
sumber
Apakah Anda yakin itu naif dan tidak naif? (Saya bisa menghentikan lelucon ini jika Anda mau)
Esolanging Fruit
269 ​​byte dengan mengubah ke: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...
Rick Hitchcock
Ubah ke for(c=0;c<s.length;c++)kefor(c=0;s[c];c++)
Rick Hitchcock
Demikian pula, ubah for(i=0;i<a.children.length;i++)kefor(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>

Tampilkan cuplikan kode

Kurang golf

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
sumber
Tidakkah seharusnya jumlah byte menyertakan id=Eelemen HTML karena Anda mengandalkannya agar kode berfungsi?
Birjolaxew
@Birjolaxew Whoops! Aku rindu itu entah bagaimana.
darrylyeo
1
HTML memiliki solusi kreatif pengurai HTML bawaan.
user202729
1

05AB1E , 38 26 23 byte

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

Cobalah online!

Saya masih bermain golf ini. Diasumsikan bahwa dalam HTML Anda akan selalu menggunakan 4 spasi untuk lekukan, dan tidak bekerja pada HTML "tidak cantik". Tidak yakin bagaimana menangani bagian "konten", jika ini tidak valid, harap edit pertanyaan untuk menunjukkan contoh dengan simpul yang memiliki konten.

Guci Gurita Ajaib
sumber
0

Arang , 28 byte

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

Cobalah online! Tautan adalah untuk mengucapkan versi kode. Penjelasan:

≔¹η

The hvariabel digunakan untuk melacak apakah kita berada di dalam tanda kutip.

Ｆ⮌θ«

Ulangi string dengan urutan terbalik.

≡ι

Aktifkan karakter currenc.

"≦¬η

Jika itu "kemudian matikan tanda kutip.

<Ｆη

Jika a <dan kami tidak berada di dalam tanda kutip, maka ...

¿⁼ζ/

Jika karakter berikutnya (sebelumnya dalam loop karena kita mengulang secara terbalik) adalah /, maka ...

←¶\

Bergerak ke atas dan menggambar \ke kiri, kalau tidak ...

↙/

Gambar a /dan bergerak ke bawah dan ke kiri.

≔ιζ

Ingat karakter untuk iterasi loop berikutnya.

Neil
sumber