21

Compito: convertire una pagina HTML in una montagna!

Quando le pagine HTML sono rientrate, possono apparire come:

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

Ma ad essere sinceri, una montagna è più rappresentativa di questa struttura.

Quindi possiamo riscriverlo come:

     /\
  /\/  \
 /      \
/        \

Le barre più esterne a sinistra e a destra corrispondono al div esterno - ogni coppia di tag HTML deve essere rappresentata come /per il tag iniziale e \per il tag finale - all'interno di tutti i tag sono "più alti", con la stessa struttura.

Ingresso:

Non ci sarà <!DOCTYPE>
Non ci saranno tag autochiudenti, ad esempio <img />o<br />
Potrebbero esserci attributi o contenuti all'interno dei tag
Potrebbero esserci spazi o schede: il tuo programma dovrebbe ignorarli
Non ci saranno spazi tra <o </e il nome del tag
Tutti gli input saranno HTML validi

Output : una montagna che rappresenta i tag come sopra.

Altre prove:

Ingresso:

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

Produzione:

   /\
/\/  \

Ingresso:

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

Produzione:

/\

— Risolutore
fonte

18

Un avvertimento per i golfisti ...

— Luis Mendo

Ci sarà mai </ div>? oppure possiamo supporre che la barra sia sempre adiacente aldiv

— Rɪᴋᴇʀ

hmmm, sarò gentile - non puoi assumere spazi dopo <o </(fino al nome del tag) - tuttavia potrebbero esserci ancora spazi per gli attributi, ad esempio<div id="aDiv">

— Risolutore

5

Forse questo potrebbe usare qualche altro test case?

— Birjolaxew,

1

Ciò richiede davvero più casi di test e una descrizione esatta (in BNF, diciamo) di come sarà l'input. Non so cosa significhi esattamente "HTML valido" e quanti casi limite dovrei supportare. (Il primo che mi viene in mente: spazio tra il nome del tag e >simili <a >b</a >.)

— Lynn

13

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

Emette visivamente sulla pagina web. Per consentire a questo di funzionare con elementi speciali come <body>, tutte le lettere nell'input vengono sostituite.

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>

Espandi frammento

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

Soluzione che funziona se non ci sono contenuti all'interno dei 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>

Espandi frammento

— darrylyeo
fonte

2

Questo è davvero intelligente!

— Rick Hitchcock,

1

Non ho mai visto CSS golfizzati prima :)

— Risolutore

Questo fallisce entrambi i casi di test.

— Giuseppe,

@Giuseppe Penso che potresti essere in grado di risolverlo con display = none su tutti gli elementi e usando un iframe invece di un <pre>

— Risolutore

@Giuseppe Risolto.

— darrylyeo,

6

Javascript + JQuery, 275 246 byte

Salvato 29 byte grazie a 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)}

Una soluzione abbastanza ingenua al problema. Analizza l'HTML con JQuery $(string), quindi crea ricorsivamente una montagna laterale con il formato:

/
 /
  children...
 \
\

Quindi ruota la stringa risultante in senso antiorario e avvisa il risultato.

Mostra snippet di codice

    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>

Espandi frammento

— ATACO
fonte

Sei sicuro che sia ingenuo e non ingenuo? (Posso interrompere questa battuta se vuoi)

— Esolanging Fruit

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

— Rick Hitchcock,

Cambia per for(c=0;c<s.length;c++)afor(c=0;s[c];c++)

— Rick Hitchcock

Allo stesso modo, cambia for(i=0;i<a.children.length;i++)infor(i=0;a.children[i];i++)

— Rick Hitchcock il

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>

Mostra snippet di codice

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>

Espandi frammento

Meno 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
fonte

Il conteggio dei byte non dovrebbe includere l' id=Eelemento HTML poiché ci si basa su di esso affinché il codice funzioni?

— Birjolaxew,

@Birjolaxew Whoops! Mi è mancato in qualche modo.

— darrylyeo,

1

HTML ha un parser HTML integrato ... soluzione creativa.

— user202729

1

05AB1E , 38 26 23 byte

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

Provalo online!

Lo sto ancora giocando a golf. Presuppone che in HTML utilizzerai sempre 4 spazi per il rientro e non funzioni su HTML "non grazioso". Non sei sicuro di come gestire la parte "contenuto", se questo non è valido, modifica la domanda per mostrare un esempio con un nodo con contenuto.

— Urna di polpo magico
fonte

0

Carbone , 28 byte

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

Provalo online! Il collegamento è alla versione dettagliata del codice. Spiegazione:

≔¹η

La hvariabile viene utilizzata per tenere traccia del fatto se siamo tra virgolette.

Ｆ⮌θ«

Passa sopra la corda in ordine inverso.

≡ι

Attiva il carattere currenc.

"≦¬η

Se è un " quindi attiva / disattiva la bandiera di citazione.

<Ｆη

Se è un < e non siamo tra virgolette, allora ...

¿⁼ζ/

Se il personaggio successivo (precedente nel loop perché stiamo eseguendo il loop al contrario) è a / , quindi ...

←¶\

Sposta in alto e disegna a \ sinistra, altrimenti ...

↙/

Disegnare un / e scorri verso il basso e a sinistra.

≔ιζ

Ricorda il personaggio per l'iterazione del ciclo successivo.

— Neil
fonte

Converti una pagina HTML in una montagna

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

Meno golf

05AB1E , 38 26 23 byte

Carbone , 28 byte