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:

/\

— 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

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

    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>

Luaskan cuplikan

— 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

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>

Luaskan cuplikan

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

Ubah halaman HTML menjadi gunung

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

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

Javascript + JQuery, 275 246 byte

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

JS

HTML

Kurang golf

05AB1E , 38 26 23 byte

Arang , 28 byte