21

Zadanie: przekonwertować stronę HTML w górę!

Gdy strony HTML są wcięte, mogą wyglądać następująco:

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

Ale szczerze mówiąc, góra jest bardziej reprezentatywna dla tej struktury.

Możemy go przepisać jako:

     /\
  /\/  \
 /      \
/        \

Najbardziej zewnętrzne ukośniki po lewej i prawej stronie odpowiadają zewnętrznemu div - każda para znaczników HTML powinna być reprezentowana jak /dla znacznika początkowego i \znacznika końcowego - wewnątrz wszystkie znaczniki są „wyższe”, o tej samej strukturze.

Wkład:

Nie będzie <!DOCTYPE>
Nie będzie tagów samozamykających się np. <img />Lub<br />
W tagach mogą znajdować się atrybuty lub treść
Mogą występować spacje lub tabulatory - twój program powinien je zignorować
Nie będzie spacji między <lub </a nazwą znacznika
Wszystkie dane wejściowe będą prawidłowe HTML

Wyjście - góra reprezentująca tagi jak wyżej.

Więcej przypadków testowych:

Wkład:

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

Wydajność:

   /\
/\/  \

Wkład:

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

Wydajność:

/\

— Solver
źródło

18

Słowo ostrożności dla golfistów ...

— Luis Mendo

Czy kiedykolwiek będzie </ div>? lub możemy założyć, że ukośnik zawsze sąsiaduje zdiv

— Rɪᴋᴇʀ

hmmm, będę miły - nie możesz zakładać spacji po <lub </(aż do nazwy znacznika) - jednak nadal mogą być spacje dla atrybutów np.<div id="aDiv">

— Solver

5

Być może przydałoby się jeszcze kilka przypadków testowych?

— Birjolaxew

1

To naprawdę potrzebuje więcej przypadków testowych i dokładnego opisu (powiedzmy w BNF) tego, jak będzie wyglądać wejście. Nie wiem, co dokładnie znaczy „prawidłowy HTML” i ile przypadków krawędzi powinienem obsługiwać. (Pierwszy, który przychodzi na myśl: spacja między nazwą znacznika i >tak dalej <a >b</a >.)

— Lynn

13

HTML + CSS + JavaScript, 39 + 141 + 20 = 200 bajtów

Wysyła wizualnie do strony internetowej. Aby to działało ze specjalnymi elementami, takimi jak <body>, wszystkie litery na wejściu są zastępowane.

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>

Rozwiń fragment kodu

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

Rozwiązanie, które działa, jeśli w tagach nie ma treści.

p.innerHTML=prompt()

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

<pre id=p>

Rozwiń fragment kodu

— darrylyeo
źródło

2

To jest naprawdę sprytne!

— Rick Hitchcock,

1

Nigdy wcześniej nie grałem w golfa CSS :)

— Solver

Nie udaje się to w obu przypadkach testowych.

— Giuseppe,

@Giuseppe Myślę, że możesz to naprawić za pomocą display = none dla wszystkich elementów i używając iframe zamiast <pre>

— Solver

@Giuseppe Naprawiono.

— darrylyeo

6

JavaScript + JQuery, 275 246 bajtów

Zaoszczędź 29 bajtów dzięki Rickowi Hitchcockowi

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)}

Całkiem naiwne rozwiązanie problemu. Analizuje HTML za pomocą JQuery $(string), a następnie rekurencyjnie buduje boczną górę w formacie:

/
 /
  children...
 \
\

Następnie obraca powstały ciąg przeciwnie do ruchu wskazówek zegara i ostrzega o wyniku.

Pokaż fragment kodu

    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>

Rozwiń fragment kodu

— ATaco
źródło

Czy na pewno jest to naiwne, a nie naiwne? (Mogę zatrzymać ten żart, jeśli chcesz)

— Esolanging Fruit

269 bajtów, zmieniając na: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick Hitchcock

Zmiana for(c=0;c<s.length;c++)dofor(c=0;s[c];c++)

— Rick Hitchcock

Podobnie, zmień for(i=0;i<a.children.length;i++)nafor(i=0;a.children[i];i++)

— Rick Hitchcock

3

HTML + JavaScript (ES6), 8 + 192 = 200 bajtów

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>

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Mniej golfa

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
źródło

Czy liczba bajtów nie powinna obejmować id=Eelementu HTML, ponieważ polegasz na nim, aby kod działał?

— Birjolaxew

@Birjolaxew Whoops! Jakoś mi tego brakowało.

— darrylyeo

1

HTML ma wbudowany parser HTML ... kreatywne rozwiązanie.

— user202729,

1

05AB1E , 38 26 23 bajtów

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

Wypróbuj online!

Nadal gram w golfa. Zakłada się, że w HTML zawsze będziesz używać 4 spacji do wcięcia i nie działa na „nie ładnym” HTML. Nie wiesz, jak obsłużyć część „treść”, jeśli jest niepoprawna, edytuj pytanie, aby pokazać przykład z węzłem, który ma treść.

— Urna Magicznej Ośmiornicy
źródło

0

Węgiel drzewny , 28 bajtów

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

Wypróbuj online! Link jest do pełnej wersji kodu. Wyjaśnienie:

≔¹η

hZmienna służy do śledzenia tego, czy jesteśmy wewnątrz cudzysłowów.

Ｆ⮌θ«

Pętla nad ciągiem w odwrotnej kolejności.

≡ι

Włącz znak currenc.

"≦¬η

Jeśli tak, "przełącz flagę cytowania.

<Ｆη

Jeśli tak, <a my nie znajdujemy się w cudzysłowie, to ...

¿⁼ζ/

Jeśli następny znak (poprzedni w pętli, ponieważ zapętlamy w odwrotnej kolejności) to a /, to ...

←¶\

Przejdź w górę i narysuj \lewą stronę, w przeciwnym razie ...

↙/

Narysuj /i przesuń w dół i w lewo.

≔ιζ

Zapamiętaj znak dla następnej iteracji pętli.

— Neil
źródło

Przekształć stronę HTML w górę

HTML + CSS + JavaScript, 39 + 141 + 20 = 200 bajtów

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

JavaScript + JQuery, 275 246 bajtów

HTML + JavaScript (ES6), 8 + 192 = 200 bajtów

JS

HTML

Mniej golfa

05AB1E , 38 26 23 bajtów

Węgiel drzewny , 28 bajtów