21

কার্য: এইচটিএমএল পৃষ্ঠাকে একটি পর্বতে রূপান্তর করুন!

এইচটিএমএল পৃষ্ঠাগুলি যখন ইন্টেন্ট করা থাকে তখন এগুলি দেখতে পাওয়া যায়:

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

তবে সত্যি কথা বলতে কি, একটি পর্বত এই কাঠামোর বেশি প্রতিনিধিত্ব করে।

সুতরাং আমরা এটিকে আবার লিখতে পারি:

     /\
  /\/  \
 /      \
/        \

বাম এবং ডানদিকে বাহ্যতম স্ল্যাশগুলি বহিরাগত ডিভের সাথে মিলে যায় - প্রতিটি HTML টি /ট্যাগের প্রারম্ভিক ট্যাগ হিসাবে এবং \শেষ ট্যাগটির জন্য প্রতিনিধিত্ব করা উচিত - সমস্ত ট্যাগের ভিতরে একই কাঠামোযুক্ত "উচ্চতর" থাকে are

ইনপুট:

থাকবে না <!DOCTYPE>
কোন স্ব-ক্লোজিং ট্যাগ যেমন থাকবে <img />বা<br />
ট্যাগগুলির মধ্যে বৈশিষ্ট্য বা সামগ্রী থাকতে পারে
স্পেস বা ট্যাব থাকতে পারে - আপনার প্রোগ্রাম এগুলি এড়ানো উচিত
ট্যাগ নামের মধ্যে <বা এর মধ্যে কোনও স্থান থাকবে না</
সমস্ত ইনপুট বৈধ এইচটিএমএল হবে

আউটপুট - উপরের হিসাবে ট্যাগগুলি উপস্থাপন করে এমন একটি পর্বত।

আরও টেস্টকেস:

ইনপুট:

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

আউটপুট:

   /\
/\/  \

ইনপুট:

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

আউটপুট:

/\

— সমাধানকারী
সূত্র

18

গল্ফারদের জন্য সাবধানতার একটি শব্দ ...

— লুইস মেন্ডো

কখনও কি হবে </ div>? অথবা আমরা অনুমান করতে পারেন স্ল্যাশ সবসময় সংলগ্নdiv

— Rɪᴋᴇʀ

হুম, আমি সুন্দর হব - আপনি (ট্যাগ নাম না হওয়া) পরে <বা কোনও ফাঁকা জায়গা ধরে নিতে পারবেন </না - তবে বৈশিষ্ট্যের জন্য এখনও ফাঁকা স্থান থাকতে পারে যেমন<div id="aDiv">

— সলভার

5

সম্ভবত এটি আরও কয়েকটি পরীক্ষার কেস ব্যবহার করতে পারে?

— বিরজোলাক্সিউ

1

এটির জন্য আরও পরীক্ষার কেসগুলি প্রয়োজন এবং ইনপুটটি কেমন হবে তার সঠিক বিবরণ (বিএনএফ-তে, বলতে হবে) দরকার। "বৈধ এইচটিএমএল" এর সঠিক অর্থ এবং আমি কত প্রান্তের ক্ষেত্রে সমর্থন করব তা আমি জানি না। : (ট্যাগ নাম এবং মধ্যে স্থান প্রথমটি মনে আসে যে >যেমন <a >b</a >।)

— লিন

13

এইচটিএমএল + সিএসএস + জাভাস্ক্রিপ্ট, 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>

স্নিপেট প্রসারিত করুন

এইচটিএমএল + সিএসএস + জাভাস্ক্রিপ্ট, 10 + 103 + 20 = 133 বাইট

ট্যাগগুলির মধ্যে কোনও সামগ্রী না থাকলে সমাধান করে S

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 ব্যবহার

— সমাধানকারী

@ জিউসেপ ফিক্সড

— ড্যারিলিও

6

জাভাস্ক্রিপ্ট + জ্যাকুয়ারি, 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)}

সমস্যার একটি সুন্দর নিষ্প্রভ সমাধান। এইচটিএমএলকে জিকুয়েরির সাথে পার্স করে $(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 বাইট এতে পরিবর্তন করে: 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

এইচটিএমএল + জাভাস্ক্রিপ্ট (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>

কোড স্নিপেট দেখান

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

— darrylyeo
সূত্র

id=Eআপনি কোডটি কাজ করার জন্য এটির উপর নির্ভর করে যেহেতু বাইট গণনায় HTML উপাদানটি অন্তর্ভুক্ত করা উচিত নয় ?

— বিরজোলাক্সইউ

@ বিরজোলাক্সউ উফফ! আমি একরকম মিস করেছি।

— darrylyeo

1

এইচটিএমএলটিতে অন্তর্নির্মিত এইচটিএমএল পার্সার রয়েছে ... সৃজনশীল সমাধান।

— ব্যবহারকারী 202729

1

05AB1E , 38 26 23 বাইট

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

এটি অনলাইন চেষ্টা করুন!

আমি এখনও এই গল্ফ করছি। এটি ধরে নিয়েছে যে এইচটিএমএলে আপনি সবসময় ইনডেন্টেশনের জন্য 4 টি স্পেস ব্যবহার করবেন এবং "অ-সুন্দর" এইচটিএমএলটিতে কাজ করবেন না। "সামগ্রী" অংশটি কীভাবে পরিচালনা করবেন তা নিশ্চিত নন, যদি এটি অবৈধ হয় তবে অনুগ্রহ করে বিষয়বস্তুযুক্ত নোডের সাথে উদাহরণ দেখানোর জন্য প্রশ্নটি সম্পাদনা করুন।

— ম্যাজিক অক্টোপাস উরন
সূত্র

0

কাঠকয়লা , 28 বাইট

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

এটি অনলাইন চেষ্টা করুন! লিঙ্কটি কোডটির ভার্জোজ সংস্করণ। ব্যাখ্যা:

≔¹η

hপরিবর্তনশীল কিনা আমরা ভিতরে উদ্ধৃতি চিহ্ন আছে ট্র্যাক রাখতে ব্যবহার করা হয়।

Ｆ⮌θ«

বিপরীত ক্রমে স্ট্রিং উপর লুপ।

≡ι

কার্যাঙ্ক চরিত্রটি স্যুইচ করুন।

"≦¬η

যদি এটি হয় "তবে উদ্ধৃতি পতাকা টগল করুন।

<Ｆη

যদি এটি হয় <এবং আমরা কোটের ভিতরে না থাকি ...

¿⁼ζ/

যদি পরবর্তী অক্ষর (লুপটিতে পূর্ববর্তী কারণ আমরা বিপরীতে লুপ করছি) হয় /, তবে ...

←¶\

উপরের \দিকে সরান এবং বাম দিকে আঁকুন , অন্যথায় ...

↙/

একটি আঁকুন /এবং নীচে এবং বাম দিকে সরান।

≔ιζ

পরবর্তী লুপ পুনরাবৃত্তির জন্য চরিত্রটি মনে রাখবেন।

— নিল
সূত্র