21

Nhiệm vụ: chuyển đổi một trang HTML thành một ngọn núi!

Khi các trang HTML được thụt lề, chúng có thể trông giống như:

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

Nhưng thành thật mà nói, một ngọn núi là đại diện nhiều hơn cho cấu trúc này.

Vì vậy, chúng ta có thể viết lại nó như sau:

     /\
  /\/  \
 /      \
/        \

Các dấu gạch chéo ngoài cùng bên trái và bên phải tương ứng với div bên ngoài - mỗi cặp thẻ HTML phải được biểu diễn như /đối với thẻ bắt đầu và \cho thẻ kết thúc - bên trong tất cả các thẻ đều "cao hơn", với cùng cấu trúc.

Đầu vào:

Sẽ không có <!DOCTYPE>
Sẽ không có thẻ tự đóng, ví dụ <img />hoặc<br />
Có thể có các thuộc tính hoặc nội dung bên trong các thẻ
Có thể có khoảng trắng hoặc tab - chương trình của bạn sẽ bỏ qua những
Sẽ không có khoảng trắng giữa <hoặc </và tên thẻ
Tất cả đầu vào sẽ là HTML hợp lệ

Đầu ra - một ngọn núi đại diện cho các thẻ như trên.

Thêm thử nghiệm:

Đầu vào:

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

Đầu ra:

   /\
/\/  \

Đầu vào:

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

Đầu ra:

/\

— Người giải quyết
nguồn

18

Một lời cảnh báo cho những người chơi golf ...

— Luis Mendo

Sẽ có bao giờ </ div>? hoặc chúng ta có thể giả sử dấu gạch chéo luôn liền kề vớidiv

— Rɪᴋᴇʀ

hmmm, tôi sẽ được tốt đẹp - bạn có thể giả định không có khoảng trắng sau <hoặc </(cho đến khi tên thẻ) - tuy nhiên có thể vẫn còn chỗ cho các thuộc tính ví dụ<div id="aDiv">

— Solver

5

Có lẽ điều này có thể sử dụng một vài trường hợp thử nghiệm?

— Birjolaxew

1

Điều này thực sự cần nhiều trường hợp thử nghiệm hơn và mô tả chính xác (trong BNF, nói) về việc đầu vào sẽ trông như thế nào. Tôi không biết chính xác "HTML hợp lệ" nghĩa là gì và tôi nên hỗ trợ bao nhiêu trường hợp cạnh. (Cái đầu tiên xuất hiện trong tâm trí: khoảng trắng giữa tên thẻ và >chẳng hạn như <a >b</a >.)

— Lynn

13

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

Đầu ra trực quan đến trang web. Để cho phép điều này hoạt động với các yếu tố đặc biệt như <body>, tất cả các chữ cái trong đầu vào được thay thế.

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>

Mở rộng đoạn trích

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

Giải pháp hoạt động nếu không có nội dung trong thẻ.

p.innerHTML=prompt()

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

<pre id=p>

Mở rộng đoạn trích

— khai thác
nguồn

2

Điều này thực sự thông minh!

— Rick Hitchcock

1

Tôi chưa bao giờ thấy CSS được đánh golf trước đó :)

— giải

Điều này thất bại cả hai trường hợp thử nghiệm.

— Giuseppe

@Giuseppe Tôi nghĩ rằng bạn có thể sửa nó bằng display = none trên tất cả các thành phần và sử dụng iframe thay vì <pre>

— giải

@Giuseppe Đã sửa.

— darrylyeo

6

Javascript + JQuery, 275 246 byte

Đã lưu 29 byte nhờ 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)}

Một giải pháp khá ngây thơ cho vấn đề này. Phân tích cú pháp HTML bằng JQuery $(string), sau đó xây dựng đệ quy một ngọn núi sang một bên với định dạng:

/
 /
  children...
 \
\

Sau đó xoay chuỗi kết quả ngược chiều kim đồng hồ và thông báo kết quả.

Hiển thị đoạn mã

    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>

Mở rộng đoạn trích

— Bánh taco
nguồn

Bạn có chắc là nó ngây thơ và không ngây thơ? (Tôi có thể dừng trò đùa này nếu bạn muốn)

— Esolanging Fruit

269 byte bằng cách thay đổi thành: j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick Hitchcock

Thay đổi for(c=0;c<s.length;c++)đểfor(c=0;s[c];c++)

— Rick Hitchcock

Tương tự, đổi for(i=0;i<a.children.length;i++)thànhfor(i=0;a.children[i];i++)

— Rick Hitchcock

3

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

Mã não

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>

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Ít chơi gôn

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

— khai thác
nguồn

Không phải số byte bao gồm id=Ephần tử HTML vì bạn đang dựa vào nó để mã hoạt động?

— Birjolaxew

@Birjolaxew Rất tiếc! Tôi đã bỏ lỡ điều đó bằng cách nào đó.

— darrylyeo

1

HTML có trình phân tích cú pháp HTML tích hợp ... giải pháp sáng tạo.

— dùng202729

1

05AB1E , 38 26 23 byte

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

Hãy thử trực tuyến!

Tôi vẫn đang chơi golf này. Nó giả định rằng trong HTML, bạn sẽ luôn sử dụng 4 khoảng trắng để thụt lề và không hoạt động trên HTML "không đẹp". Không chắc chắn cách xử lý phần "nội dung", nếu điều này không hợp lệ, vui lòng chỉnh sửa câu hỏi để hiển thị một ví dụ với một nút có nội dung.

— Bạch tuộc ma thuật Urn
nguồn

0

Than , 28 byte

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

Hãy thử trực tuyến! Liên kết là phiên bản dài dòng của mã. Giải trình:

≔¹η

Các hbiến được sử dụng để theo dõi xem chúng ta đang ở trong dấu ngoặc kép.

Ｆ⮌θ«

Vòng qua chuỗi theo thứ tự ngược lại.

≡ι

Bật ký tự hiện tại.

"≦¬η

Nếu đó là một "cờ báo hiệu.

<Ｆη

Nếu đó là một <và chúng tôi không ở trong dấu ngoặc kép, thì ...

¿⁼ζ/

Nếu ký tự tiếp theo (trước đó trong vòng lặp vì chúng ta lặp ngược lại) là một /, thì ...

←¶\

Di chuyển lên và vẽ một \trái, khác ...

↙/

Vẽ một /và di chuyển xuống và trái.

≔ιζ

Ghi nhớ ký tự cho lần lặp lặp tiếp theo.

— Neil
nguồn

Chuyển đổi một trang HTML thành một ngọn núi

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

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

Javascript + JQuery, 275 246 byte

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

Mã não

HTML

Ít chơi gôn

05AB1E , 38 26 23 byte

Than , 28 byte