Converter uma página HTML em uma montanha

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:

/\
code-golf string ascii-art parsing 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

Respostas:

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

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

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