एक HTML पृष्ठ को पहाड़ में परिवर्तित करें

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>

आउटपुट:

/\
code-golf  string  ascii-art  parsing 
— सॉल्वर
स्रोत
18
गोल्फर्स के लिए सावधानी का एक शब्द ...
— लुइस मेंडो
क्या कभी होगा </ div>? या हम मान सकते हैं कि स्लैश हमेशा के लिए आसन्न हैdiv
— R
हम्म, मैं अच्छा हो जाएगा - आप के बाद कोई रिक्त स्थान मान सकते हैं <</ ( या टैग नाम तक) के - हालाँकि अभी भी विशेषताओं के लिए रिक्त स्थान हो सकते हैं जैसे<div id="aDiv">
— सॉल्वर
5
शायद यह कुछ और परीक्षण मामलों का उपयोग कर सकता है?
— बिरजोलक्स्यूव
1
यह वास्तव में अधिक परीक्षण मामलों की आवश्यकता है, और एक सटीक विवरण (बीएनएफ में, कहते हैं) कि इनपुट कैसा दिखेगा। मुझे नहीं पता कि "मान्य HTML" का सही अर्थ क्या है, और मुझे कितने किनारे के मामलों का समर्थन करना चाहिए। (पहले एक जो मन में आता है: टैग नाम और >इस तरह के बीच की जगह <a >b</a >।)
— लिन

जवाबों:

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
यह वास्तव में चतुर है!
— रिक हिचकॉक
1
मैंने सीएसएस से पहले कभी नहीं देखा है :)
— सॉल्वर
यह दोनों परीक्षण मामलों में विफल रहता है।
— ग्यूसेप
@Giuseppe मुझे लगता है कि आप इसे प्रदर्शित करने में सक्षम हो सकते हैं = सभी तत्वों पर कोई नहीं और <pre> के बजाय एक iframe का उपयोग करके
— सॉल्वर
@Giuseppe फिक्स्ड।
— darrylyeo
6

जावास्क्रिप्ट + JQuery, 275 246 बाइट्स

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...
 \
\

फिर परिणामी स्ट्रिंग वामावर्त घुमाता है, और परिणाम को सचेत करता है।

कोड स्निपेट दिखाएं

— Ataco
स्रोत
क्या आपको यकीन है कि यह भोला है और भोला नहीं है? (यदि आप चाहें तो मैं इस चुटकुले को रोक सकता हूँ)
— बजे फल
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 + जावास्क्रिप्ट (ES6), 8 + 192 = 200 बाइट्स

जे एस

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

एचटीएमएल

<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`
}
— darrylyeo
स्रोत
क्या बाइट काउंट में id=EHTML तत्व शामिल नहीं होना चाहिए क्योंकि आप काम करने के लिए कोड पर निर्भर हैं?
— बिरजोलक्सेव
@Birjolaxew वूप्स! मुझे वह किसी तरह याद आया।
— darrylyeo 3
1
HTML में अंतर्निहित HTML पार्सर ... रचनात्मक समाधान है।
— user202729
1

05AB1E , 38 26 23 बाइट्स

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

इसे ऑनलाइन आज़माएं!

मैं अभी भी इसे गोल्फ कर रहा हूं। यह मानता है कि HTML में आप हमेशा इंडेंटेशन के लिए 4 रिक्त स्थान का उपयोग करेंगे, और "गैर-सुंदर" HTML पर काम नहीं करेंगे। सुनिश्चित नहीं है कि "सामग्री" भाग को कैसे संभालना है, यदि यह अमान्य है तो कृपया सामग्री वाले नोड के साथ एक उदाहरण दिखाने के लिए प्रश्न को संपादित करें।

— जादू ऑक्टोपस Urn
स्रोत
0

चारकोल , 28 बाइट्स

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

इसे ऑनलाइन आज़माएं! लिंक कोड के वर्बोज़ संस्करण के लिए है। स्पष्टीकरण:

≔¹η

hचर है कि क्या हम अंदर उद्धरण हैं का ट्रैक रखने के लिए किया जाता है।

Ｆ⮌θ«

रिवर्स ऑर्डर में स्ट्रिंग पर लूप।

≡ι

कर्ण वर्ण पर स्विच करें।

"≦¬η

यदि यह "बोली ध्वज का एक लंबा टॉगल है।

<Ｆη

यदि यह एक है <और हम उद्धरण के अंदर नहीं हैं, तो ...

¿⁼ζ/

यदि अगला चरित्र (लूप में पिछले क्योंकि हम रिवर्स में पाशन कर रहे हैं) एक है /, तो ...

←¶\

ऊपर ले जाएँ और \बाईं ओर ड्रा करें , और ...

↙/

एक ड्रा करें /और नीचे जाएं और बाएं जाएं।

≔ιζ

अगले लूप पुनरावृत्ति के लिए चरित्र को याद रखें।

— नील
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.