21

작업 : HTML 페이지를 산으로 변환하십시오!

HTML 페이지가 들여 쓰기되면 다음과 같이 보일 수 있습니다.

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

그러나 솔직히 말하면, 산은이 구조를 더 대표합니다.

따라서 다음과 같이 다시 작성할 수 있습니다.

     /\
  /\/  \
 /      \
/        \

왼쪽과 오른쪽의 가장 바깥 쪽 슬래시는 바깥 쪽 div에 해당합니다. 각 HTML 태그 쌍은 /시작 태그와 \끝 태그에 대해 표시되어야합니다. 모든 태그의 내부는 동일한 구조로 "상위"입니다.

입력:

없을 겁니다 <!DOCTYPE>
자체 폐쇄 태그가 없습니다. 예 <img />또는<br />
태그 안에 속성이나 내용이있을 수 있습니다
공백이나 탭이있을 수 있습니다. 프로그램에서이를 무시해야합니다.
사이에 공백이 없어야합니다 <또는 </및 태그 이름
모든 입력은 유효한 HTML입니다

출력 -위와 같이 태그를 나타내는 산.

더 많은 테스트 사례 :

입력:

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

산출:

   /\
/\/  \

입력:

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

산출:

/\

— 솔버
소스

18

한 마디 주의 골퍼 ...

— 루이스 Mendo

이 이제까지있을 것인가 </ div>? 또는 슬래시가 항상 div

— Rɪᴋᴇʀ

흠, 난 좋을거야 - 후 공백을지지 않습니다 <또는 </그러나 여전히 속성 등을위한 공간이있을 수 있습니다 - (태그 이름까지)<div id="aDiv">

— 솔버

5

아마도 이것은 몇 가지 테스트 사례를 더 사용할 수 있습니까?

— Birjolaxew

1

이것은 실제로 더 많은 테스트 사례와 입력의 모양에 대한 정확한 설명 (BNF)이 필요합니다. "유효한 HTML"이 정확히 무엇을 의미하는지, 그리고 얼마나 많은 에지 케이스를 지원해야하는지 모르겠습니다. (첫 번째는 마음에 오는 : 공간 태그 이름 사이 >등 <a >b</a >.)

— 린

13

HTML + CSS + 자바 스크립트, 39 + 141 + 20 = 200 바이트

웹 페이지에 시각적으로 출력합니다. 이것이와 같은 특수 요소와 함께 작동 <body>하도록 입력의 모든 문자가 바뀝니다.

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>

스 니펫 확장

HTML + CSS + 자바 스크립트, 10 + 103 + 20 = 133 바이트

태그 내에 컨텐츠가없는 경우 작동하는 솔루션입니다.

p.innerHTML=prompt()

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

<pre id=p>

스 니펫 확장

— 대릴 녀
소스

2

이것은 정말 영리합니다!

— Rick Hitchcock

1

나는 이전에 골프 CSS를 본 적이 없다 :)

— Solver

이것은 두 가지 테스트 사례 모두에 실패합니다.

— Giuseppe

@Giuseppe 모든 요소에서 display = none으로 수정하고 <pre> 대신 iframe을 사용하여 문제를 해결할 수 있다고 생각합니다.

— Solver

@ 주세페 수정.

— darrylyeo

6

자바 스크립트 + JQuery와, 275 246 바이트

Rick Hitchcock 덕분에 29 바이트 절약

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

문제에 대한 순진한 해결책입니다. JQuery를 사용하여 HTML을 구문 분석 한 $(string)후 다음 형식을 사용하여 옆으로 산을 재귀 적으로 빌드합니다.

/
 /
  children...
 \
\

그런 다음 결과 문자열을 시계 반대 방향으로 회전하고 결과를 경고합니다.

코드 스 니펫 표시

    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>

스 니펫 확장

— 아 타코
소스

순진하고 확실하지 않습니까? (원한다면이 농담을 멈출 수있다)

— Esolanging Fruit

:로 변경하여 269 바이트 j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— 릭 히치콕

변화 for(c=0;c<s.length;c++)에for(c=0;s[c];c++)

— 릭 히치콕

마찬가지로, 변경 for(i=0;i<a.children.length;i++)에for(i=0;a.children[i];i++)

— 릭 히치콕

3

HTML + JavaScript (ES6), 8 + 192 = 200 바이트

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>

코드 스 니펫 표시

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>

스 니펫 확장

덜 골프

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

— 대릴 녀
소스

id=E코드가 작동 하려면 바이트 수에 HTML 요소가 포함되어 있지 않아야 합니까?

— Birjolaxew

트윗 담아 가기 나는 어떻게 든 그것을 놓쳤다.

— darrylyeo

1

HTML에는 HTML 파서가 내장되어 있습니다. 창의적인 솔루션입니다.

— user202729

1

05AB1E , 38 26 23 바이트

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

온라인으로 사용해보십시오!

나는 아직도 이것을 골프하고 있습니다. HTML에서는 항상 들여 쓰기에 4 개의 공백을 사용하고 "예쁜"HTML에서는 작동하지 않는다고 가정합니다. "컨텐츠"부분을 처리하는 방법을 잘 모릅니다. 이것이 유효하지 않은 경우 내용이있는 노드가있는 예제를 표시하도록 질문을 편집하십시오.

— 매직 문어 항아리
소스

0

숯 , 28 바이트

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

온라인으로 사용해보십시오! 링크는 자세한 버전의 코드입니다. 설명:

≔¹η

h변수는 우리가 내부의 인용 여부를 추적하는 데 사용됩니다.

Ｆ⮌θ«

문자열을 역순으로 반복합니다.

≡ι

currenc 문자를 켭니다.

"≦¬η

그렇다면 "따옴표 플래그를 토글하십시오.

<Ｆη

그것이 a <이고 우리가 따옴표 안에 없다면 ...

¿⁼ζ/

다음 문자 (반대로 반복하기 때문에 루프에서 이전)가 /이면 ...

←¶\

위로 이동하고 \왼쪽으로 그리십시오 .

↙/

a를 /그리고 아래로 그리고 왼쪽으로 움직입니다.

≔ιζ

다음 루프 반복의 문자를 기억하십시오.

— 닐
소스