21

Tarea: ¡ convierte una página HTML en una montaña!

Cuando las páginas HTML están sangradas, pueden verse así:

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

Pero para ser sincero, una montaña es más representativa de esta estructura.

Entonces podemos reescribirlo como:

     /\
  /\/  \
 /      \
/        \

Las barras más externas a la izquierda y a la derecha corresponden al div externo: cada par de etiquetas HTML debe representarse como /para la etiqueta inicial y \para la etiqueta final; dentro de todas las etiquetas son "más altas", con la misma estructura.

Entrada:

No habrá <!DOCTYPE>
No habrá etiquetas de cierre automático, por ejemplo, <img />o<br />
Puede haber atributos o contenido dentro de las etiquetas
Puede haber espacios o pestañas; su programa debe ignorarlos
No habrá espacios entre <o </y el nombre de la etiqueta
Toda entrada será HTML válido

Salida : una montaña que representa las etiquetas como arriba.

Más casos de prueba:

Entrada:

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

Salida:

   /\
/\/  \

Entrada:

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

Salida:

/\

— Solucionador
fuente

18

Una palabra de precaución para los golfistas ...

— Luis Mendo

¿Habrá alguna vez </ div>? o podemos suponer que la barra siempre es adyacente aldiv

— Rɪᴋᴇʀ

hmmm, estaré bien, puede suponer que no hay espacios después <o </(hasta el nombre de la etiqueta), sin embargo, todavía puede haber espacios para los atributos, por ejemplo<div id="aDiv">

— Solver

55

¿Quizás esto podría usar algunos casos de prueba más?

— Birjolaxew

1

Esto realmente necesita más casos de prueba y una descripción exacta (en BNF, por ejemplo) de cómo se verá la entrada. No sé qué significa "HTML válido" exactamente y cuántos casos extremos debería admitir. (Primero que viene a la mente: espacio entre el nombre de la etiqueta y >tal como <a >b</a >.)

— Lynn

13

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

Salidas visuales a la página web. Para permitir que esto funcione con elementos especiales como <body>, se reemplazan todas las letras en la entrada.

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 fragmento

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

Solución que funciona si no hay contenido dentro de las etiquetas.

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 fragmento

— Darrylyeo
fuente

2

¡Esto es realmente inteligente!

— Rick Hitchcock el

1

Nunca he visto CSS golfed antes :)

— Solver

Esto falla en los dos casos de prueba.

— Giuseppe

@Giuseppe Creo que puede solucionarlo con display = none en todos los elementos y usando un iframe en lugar de un <pre>

— Solver

@Giuseppe fijo.

— darrylyeo

6

Javascript + JQuery, 275 246 bytes

Guardado 29 bytes gracias 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 bonita solución ingenua al problema. Analiza el HTML con JQuery's $(string), luego construye recursivamente una montaña lateral con el formato:

/
 /
  children...
 \
\

Luego gira la cadena resultante en sentido antihorario y alerta el resultado.

Mostrar fragmento 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 fragmento

— Un taco
fuente

¿Estás seguro de que es ingenuo y no ingenuo? (Puedo detener esta broma si quieres)

— Esolanging Fruit

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

— Rick Hitchcock el

Cambiar para for(c=0;c<s.length;c++)afor(c=0;s[c];c++)

— Rick Hitchcock

Del mismo modo, cambie for(i=0;i<a.children.length;i++)afor(i=0;a.children[i];i++)

— Rick Hitchcock el

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 fragmento 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 fragmento

Menos 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
fuente

¿No debería el recuento de bytes incluir el id=Eelemento HTML ya que confía en él para que el código funcione?

— Birjolaxew

@Birjolaxew ¡Vaya! Me perdí eso de alguna manera.

— darrylyeo

1

HTML tiene un analizador de HTML incorporado ... solución creativa.

— user202729

1

05AB1E , 38 26 23 bytes

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

Pruébalo en línea!

Todavía estoy jugando golf. Se supone que en HTML siempre usará 4 espacios para sangría, y no funciona en HTML "no bonito". No estoy seguro de cómo manejar la parte de "contenido", si esto no es válido, edite la pregunta para mostrar un ejemplo con un nodo que tenga contenido.

— Urna de pulpo mágico
fuente

0

Carbón , 28 bytes

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

Pruébalo en línea! El enlace es a la versión detallada del código. Explicación:

≔¹η

La hvariable se utiliza para realizar un seguimiento de si estamos entre comillas.

Ｆ⮌θ«

Pase sobre la cuerda en orden inverso.

≡ι

Enciende el personaje actual.

"≦¬η

Si es un, "entonces active la bandera de cotización.

<Ｆη

Si es una <y no estamos entre comillas, entonces ...

¿⁼ζ/

Si el siguiente carácter (anterior en el bucle porque estamos en bucle inverso) es un /, entonces ...

←¶\

Sube y dibuja a la \izquierda, de lo contrario ...

↙/

Dibuja ay /mueve hacia abajo y hacia la izquierda.

≔ιζ

Recuerde el carácter para la próxima iteración del bucle.

— Neil
fuente

Convierte una página HTML en una montaña

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 golf

05AB1E , 38 26 23 bytes

Carbón , 28 bytes