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>

เอาท์พุท:

/\

— Solver
แหล่งที่มา

18

คำของความระมัดระวังสำหรับนักกอล์ฟ ...

— หลุยส์ Mendo

จะมี</ div>บ้างไหม? หรือเราสามารถสันนิษฐานว่าทับอยู่ติดกับdiv

— R adjacent

hmmm ฉันจะดี - คุณไม่สามารถเว้นช่องว่างหลัง<หรือ</(จนกว่าชื่อแท็ก) - อย่างไรก็ตามอาจยังมีช่องว่างสำหรับแอตทริบิวต์เช่น<div id="aDiv">

— Solver

5

บางทีนี่อาจใช้กรณีทดสอบอีกสองสามข้อ?

— Birjolaxew

1

สิ่งนี้ต้องการกรณีทดสอบเพิ่มมากขึ้นและคำอธิบายที่แน่นอน (ใน BNF พูด) ว่าข้อมูลจะเป็นอย่างไร ฉันไม่ทราบว่า "HTML ที่ถูกต้อง" หมายถึงอะไรอย่างแน่นอนและฉันควรสนับสนุนกรณีขอบจำนวนเท่าใด (ชื่อแรกที่นึกถึง: ช่องว่างระหว่างชื่อแท็กและ>เช่น<a >b</a >.)

— Lynn

13

HTML + CSS + JavaScript, 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 + JavaScript, 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>

ขยายตัวอย่างข้อมูล

— darrylyeo
แหล่งที่มา

2

นี่ฉลาดจริงๆ!

— Rick Hitchcock

1

ผมไม่เคยเห็นแข็งแรงเล่นกอล์ฟ CSS ก่อน :)

— Solver

สิ่งนี้ล้มเหลวทั้งสองกรณีทดสอบ

— Giuseppe

@Giuseppe ฉันคิดว่าคุณสามารถแก้ไขได้ด้วย display = none ในทุกองค์ประกอบและใช้ iframe แทน <pre>

— Solver

@Giuseppe แก้ไขแล้ว

— darrylyeo

6

Javascript + JQuery, 275 246 ไบต์

บันทึก 29 ไบต์ขอบคุณ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)}

วิธีแก้ปัญหาไร้เดียงสาที่น่ารัก แยก HTML กับ JQuery's $(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>

ขยายตัวอย่างข้อมูล

— Ataco
แหล่งที่มา

คุณแน่ใจเหรอว่ามันไร้เดียงสาและไม่ใช่ไร้เดียงสา (ฉันสามารถหยุดเรื่องตลกนี้ถ้าคุณต้องการ)

— ผลไม้ที่แยกจากกัน

269 bytes โดยเปลี่ยนเป็น: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Hitchcock

เปลี่ยน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++)

— Rick Hitchcock

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>

ขยายตัวอย่างข้อมูล

น้อย golfed

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
แหล่งที่มา

การนับไบต์ไม่ควรรวมid=Eองค์ประกอบ HTML เนื่องจากคุณใช้เพื่อให้โค้ดทำงานได้หรือไม่

— Birjolaxew

@Birjolaxew อ๊ะ! ฉันพลาดอย่างใด

— darrylyeo

1

HTML มีตัวแยกวิเคราะห์ HTML ในตัว ... โซลูชันสร้างสรรค์

— user202729

1

05AB1E , 38 26 23 ไบต์

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

ลองออนไลน์!

ฉันยังคงเล่นกอล์ฟนี้อยู่ ถือว่าใน HTML คุณจะใช้ช่องว่าง 4 ช่องเสมอสำหรับการเยื้องและไม่สามารถใช้กับ HTML ที่ "ไม่สวย" ได้ ไม่แน่ใจว่าจะจัดการส่วน "เนื้อหา" ได้อย่างไรถ้าไม่ถูกต้องโปรดแก้ไขคำถามเพื่อแสดงตัวอย่างพร้อมโหนดที่มีเนื้อหา

— Magic Octopus Urn
แหล่งที่มา

0

ถ่าน 28 ไบต์

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

ลองออนไลน์! การเชื่อมโยงคือการใช้รหัสเวอร์ชันอย่างละเอียด คำอธิบาย:

≔¹η

hตัวแปรที่ใช้ในการติดตามว่าเรามีคำพูดที่อยู่ภายใน

Ｆ⮌θ«

วนซ้ำสตริงตามลำดับย้อนกลับ

≡ι

สลับไปที่ตัวละครกระแสน้ำ

"≦¬η

ถ้ามันเป็น"แล้วสลับธงพูด

<Ｆη

หากเป็น<และเราไม่ได้อยู่ในเครื่องหมายคำพูดแล้ว ...

¿⁼ζ/

หากตัวละครถัดไป (ก่อนหน้านี้ในวงเพราะเรากำลังวนกลับกัน) เป็น/...

←¶\

เลื่อนขึ้นและวาด\ไปทางซ้ายอย่างอื่น ...

↙/

วาด/และเลื่อนลงและไปทางซ้าย

≔ιζ

จำอักขระสำหรับการวนซ้ำถัดไป

— นีล
แหล่งที่มา