21

Tâche: convertir une page HTML en montagne!

Lorsque les pages HTML sont en retrait, elles peuvent ressembler à:

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

Mais pour être honnête, une montagne est plus représentative de cette structure.

Nous pouvons donc le réécrire comme:

     /\
  /\/  \
 /      \
/        \

Les barres obliques les plus à gauche et à droite correspondent à la division externe - chaque paire de balises HTML doit être représentée comme /pour la balise de début et \pour la balise de fin - à l'intérieur de toutes les balises sont "plus élevées", avec la même structure.

Contribution:

Il n'y aura pas <!DOCTYPE>
Il n'y aura pas de balises à fermeture automatique, par exemple <img />ou<br />
Il peut y avoir des attributs ou du contenu à l'intérieur des balises
Il peut y avoir des espaces ou des tabulations - votre programme doit les ignorer
Il n'y aura aucun espace entre <ou </et le nom de la balise
Toutes les entrées seront HTML valides

Sortie - une montagne représentant les balises comme ci-dessus.

Plus de tests:

Contribution:

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

Sortie:

   /\
/\/  \

Contribution:

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

Sortie:

/\

— Solveur
source

18

Un mot d' avertissement pour les golfeurs ...

— Luis Mendo

Y en aura-t-il jamais </ div>? ou peut-on supposer que la barre oblique est toujours adjacente à ladiv

— Rɪᴋᴇʀ

hmmm, je serai gentil - vous ne pouvez pas supposer d'espace après <ou </(jusqu'au nom de la balise) - mais il peut toujours y avoir des espaces pour les attributs par exemple<div id="aDiv">

— Solveur

5

Peut-être que cela pourrait utiliser quelques cas de test supplémentaires?

— Birjolaxew

1

Cela nécessite vraiment plus de cas de test et une description exacte (en BNF, par exemple) de ce à quoi ressemblera l'entrée. Je ne sais pas exactement ce que signifie "HTML valide" et combien de cas marginaux je devrais prendre en charge. (Le premier qui me vient à l'esprit: l'espace entre le nom du tag et >tel que <a >b</a >.)

— Lynn

13

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

Affiche visuellement la page Web. Pour que cela fonctionne avec des éléments spéciaux comme <body>, toutes les lettres de l'entrée sont remplacées.

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>

Développer l'extrait

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

Solution qui fonctionne s'il n'y a pas de contenu dans les balises.

p.innerHTML=prompt()

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

<pre id=p>

Développer l'extrait

— darrylyeo
source

2

C'est vraiment intelligent!

— Rick Hitchcock

1

Je n'ai jamais vu de golf CSS avant :)

— Solveur

Cela échoue dans les deux cas de test.

— Giuseppe

@Giuseppe Je pense que vous pourrez peut-être le corriger avec display = none sur tous les éléments et en utilisant un iframe au lieu d'un <pre>

— Solveur

@Giuseppe Fixed.

— darrylyeo

6

Javascript + JQuery, 275 246 octets

29 octets enregistrés grâce à 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)}

Une solution assez naïve au problème. Analyse le code HTML avec JQuery $(string), puis construit récursivement une montagne latérale au format:

/
 /
  children...
 \
\

Fait ensuite pivoter la chaîne résultante dans le sens antihoraire et alerte le résultat.

Afficher l'extrait de code

    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>

Développer l'extrait

— ATaco
source

Êtes-vous sûr que c'est naïf et pas naïf? (Je peux arrêter cette blague si vous le souhaitez)

— Esolanging Fruit

269 octets en changeant pour: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick Hitchcock

Modification de for(c=0;c<s.length;c++)lafor(c=0;s[c];c++)

— Rick Hitchcock

De même, changez for(i=0;i<a.children.length;i++)pourfor(i=0;a.children[i];i++)

— Rick Hitchcock

3

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

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>

Afficher l'extrait de code

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>

Développer l'extrait

Moins 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
source

Le nombre d'octets ne devrait-il pas inclure l' id=Eélément HTML puisque vous comptez dessus pour que le code fonctionne?

— Birjolaxew

@Birjolaxew Oups! J'ai raté ça d'une façon ou d'une autre.

— darrylyeo

1

HTML a un analyseur HTML intégré ... une solution créative.

— user202729

1

05AB1E , 38 26 23 octets

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

Essayez-le en ligne!

Je joue encore au golf. Il suppose qu'en HTML, vous utiliserez toujours 4 espaces pour l'indentation, et ne fonctionne pas sur du HTML "non joli". Vous ne savez pas comment gérer la partie "contenu", si cela n'est pas valide, veuillez modifier la question pour afficher un exemple avec un nœud ayant du contenu.

— Urne de poulpe magique
source

0

Fusain , 28 octets

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

Essayez-le en ligne! Le lien est vers la version détaillée du code. Explication:

≔¹η

La hvariable est utilisée pour savoir si nous sommes à l'intérieur de guillemets.

Ｆ⮌θ«

Faites une boucle sur la chaîne dans l'ordre inverse.

≡ι

Activez le caractère actuel.

"≦¬η

Si c'est un " basculez le drapeau de citation.

<Ｆη

Si c'est un < et que nous ne sommes pas entre guillemets, alors ...

¿⁼ζ/

Si le caractère suivant (précédent dans la boucle parce que nous bouclons en sens inverse) est un / , alors ...

←¶\

Montez et dessinez un \ vers la gauche, sinon ...

↙/

Dessine un / et déplacez-vous vers le bas et la gauche.

≔ιζ

N'oubliez pas le caractère pour la prochaine itération de boucle.

— Neil
source

Convertir une page HTML en montagne

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

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

Javascript + JQuery, 275 246 octets

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

JS

HTML

Moins golfé

05AB1E , 38 26 23 octets

Fusain , 28 octets