21

Tarefa: converter uma página HTML em uma montanha!

Quando as páginas HTML são recuadas, elas podem se parecer com:

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

Mas, para ser sincero, uma montanha é mais representativa dessa estrutura.

Para reescrevê-lo como:

     /\
  /\/  \
 /      \
/        \

As barras mais externas à esquerda e à direita correspondem à div externa - cada par de tags HTML deve ser representado como /para a tag inicial e \para a tag final - dentro de todas as tags são "superiores", com a mesma estrutura.

Entrada:

Não haverá <!DOCTYPE>
Não haverá tags de fechamento automático, por exemplo, <img />ou<br />
Pode haver atributos ou conteúdo dentro das tags
Pode haver espaços ou guias - seu programa deve ignorá-las
Não haverá espaços entre <ou </e o nome da tag
Toda entrada será HTML válido

Saída - uma montanha representando as tags como acima.

Mais casos de teste:

Entrada:

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

Saída:

   /\
/\/  \

Entrada:

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

Saída:

/\

— Solver
fonte

18

Uma palavra de cautela para os golfistas ...

— Luis Mendo

Alguma vez haverá </ div>? ou podemos supor que a barra é sempre adjacente aodiv

— #

hmmm, eu vou ser legal - você não pode assumir espaços após <ou </(até o nome da tag) - no entanto, ainda pode haver espaços para atributos, por exemplo:<div id="aDiv">

— Solver

5

Talvez isso possa usar mais alguns casos de teste?

— Birjolaxew

1

Isso realmente precisa de mais casos de teste e uma descrição exata (digamos no BNF) de como será a entrada. Não sei exatamente o que "HTML válido" significa e quantos casos extremos devo apoiar. (Primeiro que vem à mente: o espaço entre o nome da marca e >como <a >b</a >.)

— Lynn

13

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

Saídas visualmente para a página da web. Para permitir que isso funcione com elementos especiais como <body>, todas as letras na entrada são substituídas.

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>

Expandir snippet

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

Solução que funciona se não houver conteúdo nas tags.

p.innerHTML=prompt()

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

<pre id=p>

Expandir snippet

— darrylyeo
fonte

2

Isso é realmente inteligente!

— Rick Hitchcock

1

Eu nunca vi golfed CSS antes :)

— Solver

Isso falha nos dois casos de teste.

— Giuseppe

@Giuseppe Eu acho que você pode ser capaz de corrigi-lo com display = nenhum em todos os elementos e usar um iframe em vez de um <pre>

— Solver

@Giuseppe Fixed.

— darrylyeo

6

Javascript + JQuery, 275 246 bytes

Economizou 29 bytes graças 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)}

Uma solução bastante ingênua para o problema. Analisa o HTML com o JQuery $(string)e depois constrói recursivamente uma montanha lateral com o formato:

/
 /
  children...
 \
\

Em seguida, gira a sequência resultante no sentido anti-horário e alerta o resultado.

Mostrar snippet de código

    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>

Expandir snippet

— ATaco
fonte

Tem certeza de que é ingênuo e não ingênuo? (Eu posso parar essa piada se você quiser)

— Esolanging Fruit

269 bytes por mudar para: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick Hitchcock

Mude para for(c=0;c<s.length;c++)parafor(c=0;s[c];c++)

— Rick Hitchcock

Da mesma forma, mude for(i=0;i<a.children.length;i++)parafor(i=0;a.children[i];i++)

— Rick Hitchcock

3

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

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>

Mostrar snippet de código

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>

Expandir snippet

Menos golfe

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

A contagem de bytes não deve incluir o id=Eelemento HTML, pois você está contando com ele para que o código funcione?

— precisa saber é o seguinte

@Birjolaxew Whoops! Eu senti falta disso de alguma forma.

— darrylyeo

1

O HTML possui um analisador de HTML incorporado ... solução criativa.

— precisa saber é o seguinte

1

05AB1E , 38 26 23 bytes

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

Experimente online!

Eu ainda estou jogando isso. Ele pressupõe que em HTML você sempre usará 4 espaços para indentação e não funciona em HTML "não bonito". Não sabe ao certo como lidar com a parte "conteúdo"; se isso for inválido, edite a pergunta para mostrar um exemplo com um nó que possui conteúdo.

— Urna de polvo mágico
fonte

0

Carvão , 28 bytes

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

Experimente online! Link é a versão detalhada do código. Explicação:

≔¹η

A hvariável é usada para acompanhar se estamos entre aspas.

Ｆ⮌θ«

Passe a corda na ordem inversa.

≡ι

Ligue o caractere atual.

"≦¬η

Se for um ", alterne o sinalizador de cotação.

<Ｆη

Se é um <e não estamos entre aspas, então ...

¿⁼ζ/

Se o próximo caractere (anterior no loop porque estamos fazendo um loop reverso) for a /, então ...

←¶\

Mover para cima e desenhar uma \esquerda, senão ...

↙/

Desenhe ae /mova para baixo e para a esquerda.

≔ιζ

Lembre-se do caractere para a próxima iteração do loop.

— Neil
fonte

Converter uma página HTML em uma montanha

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

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

Javascript + JQuery, 275 246 bytes

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

JS

HTML

Menos golfe

05AB1E , 38 26 23 bytes

Carvão , 28 bytes