21

Görev: HTML sayfasını dağa dönüştürün!

HTML sayfaları girintili olduğunda şöyle görünebilirler:

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

Ancak dürüst olmak gerekirse, bir dağ bu yapının daha temsilcisidir.

Böylece şunu yeniden yazabiliriz:

     /\
  /\/  \
 /      \
/        \

Sol ve sağdaki en dıştaki kesikler dış div'e karşılık gelir - her bir HTML etiketi çifti /başlangıç etiketi ve \bitiş etiketi için temsil edilmelidir - tüm etiketlerin içinde aynı yapıya sahip "etiketler" daha yüksektir.

Giriş:

Orada olmayacak <!DOCTYPE>
Kendiliğinden kapanacak etiketler olmayacak, örneğin <img />veya<br />
Etiketlerin içinde nitelik veya içerik olabilir.
Boşluk veya sekme olabilir - programınız bunları dikkate almamalı
Etiket adı ile <veya arasında boşluk kalmayacak</
Tüm girdiler geçerli olacak HTML

Çıktı - yukarıdaki gibi etiketleri temsil eden bir dağ.

Daha fazla test kodu:

Giriş:

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

Çıktı:

   /\
/\/  \

Giriş:

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

Çıktı:

/\

— Çözücü
kaynak

18

Golfçüler için dikkatli olunacak bir kelime ...

— Luis Mendo

Hiç olacak </ div>mı? veya eğik çizginin her zaman bitişik olduğunu varsayabilir miyizdiv

— Rɪᴋᴇʀ

hmmm, iyi olacağım - sonra <veya sonra </(etiket ismine kadar) boşluk bırakamazsınız - ancak yine de nitelikler için boşluklar olabilir, örneğin<div id="aDiv">

— Çözücü

5

Belki bu birkaç test vakası daha kullanabilir mi?

— Birjolaxew

1

Bu gerçekten daha fazla test senaryosuna ve girişin neye benzeyeceğine dair tam bir açıklama (BNF, örneğin) gerektirir. "Geçerli HTML" nin tam olarak ne anlama geldiğini ve kaç tane uç vakayı desteklemem gerektiğini bilmiyorum. (Akla gelen ilk: etiket adı ile >benzeri arasındaki boşluk <a >b</a >.)

— Lynn

13

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

Web sayfasına görsel olarak çıktı verir. Bunun gibi özel öğelerle çalışmasına izin vermek için <body>, girdideki tüm harfler değiştirilir.

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>

Parçacığı genişlet

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

Etiketler içinde içerik yoksa işe yarayan bir çözümdür.

p.innerHTML=prompt()

#p,#p *{display:flex;padding:0 0 1em;align-items:flex-end}#p :before{content:'/'}#p :after{content:'\\'

<pre id=p>

Parçacığı genişlet

— darrylyeo
kaynak

2

Bu gerçekten zekice!

— Rick Hitchcock

1

Daha önce hiç golf CSS görmemiştim :)

— Çözücü

Bu, her iki test durumundan da başarısız olur.

— Giuseppe

@Giuseppe Ben bunu display = ile tüm öğeler üzerinde hiçbiri yokken ve <pre> yerine iframe kullanarak düzeltebileceğini düşünüyorum

— Çözücü

@Giuseppe Sabitlendi.

— darrylyeo

6

Javascript + JQuery, 275 246 bayt

Rick Hitchcock sayesinde 29 bayt kaydedildi

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

Soruna oldukça naif bir çözüm. HTML'yi JQuery'ninkiyle ayrıştırır $(string), ardından tekrarlayan bir biçimde yanlara doğru bir dağ oluşturur:

/
 /
  children...
 \
\

Sonra elde edilen dizgiyi saatin tersi yönde döndürür ve sonucu uyarır.

Kod pasajını göster

    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>

Parçacığı genişlet

— Bir Taco
kaynak

Saf ve saf olmadığından emin misin? (İsterseniz bu şakayı durdurabilirim)

— Esolanging Fruit

269 byte değiştirerek: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick Hitchcock

Değişim için for(c=0;c<s.length;c++)içinfor(c=0;s[c];c++)

— Rick Hitchcock

Benzer şekilde, değiştirmek for(i=0;i<a.children.length;i++)içinfor(i=0;a.children[i];i++)

— Rick Hitchcock

3

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

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>

Kod pasajını göster

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>

Parçacığı genişlet

Daha az golf oynadı

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
kaynak

Bayt sayısı id=E, kodun çalışması için ona güvendiğiniz için HTML öğesini içermez mi?

— Birjolaxew

@Birjolaxew Whoops! Bunu bir şekilde özledim.

— darrylyeo

1

HTML yerleşik HTML ayrıştırıcı ... yaratıcı bir çözüme sahiptir.

— user202729

1

05AB1E , 38 26 23 bayt

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

Çevrimiçi deneyin!

Hala bunu golf oynuyorum. HTML'de girinti için her zaman 4 boşluk kullanacağınızı ve "hoş olmayan" HTML'de çalışmadığını varsayar. "İçerik" bölümünün nasıl kullanılacağından emin değilim, eğer bu geçersizse, lütfen içeriği olan bir düğüme sahip bir örnek göstermek için soruyu düzenleyin.

— Sihirli Ahtapot Urn
kaynak

0

Kömür , 28 bayt

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

Çevrimiçi deneyin! Bağlantı, kodun ayrıntılı bir versiyonudur. Açıklama:

≔¹η

hDeğişken içeriye tırnak olup olmadığını takip etmek için kullanılır.

Ｆ⮌θ«

İpin üzerinden ters sırada dönün.

≡ι

Para birimi karakterini açın.

"≦¬η

O "zaman bir teklif bayrağı geçiş yapmak.

<Ｆη

Eğer a ise <ve biz tekliflerin içinde değilsek, o zaman ...

¿⁼ζ/

Bir sonraki karakter (önceki dönüşte geri döndüğümüz için döngüde) a ise /, o zaman ...

←¶\

Yukarı çıkın ve \sola doğru çizin , yoksa ...

↙/

A çizin /ve aşağı ve sola hareket ettirin.

≔ιζ

Bir sonraki döngü yinelemesi için karakteri hatırla.

— Neil
kaynak

HTML sayfasını dağa dönüştürme

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

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

Javascript + JQuery, 275 246 bayt

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

JS

HTML

Daha az golf oynadı

05AB1E , 38 26 23 bayt

Kömür , 28 bayt