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ɪᴋᴇʀ18年

うーん、私は素晴らしいことだろう-の後にあなたは何のスペースを想定することはできません<か</しかしまだ属性などのためのスペースがあるかもしれません- （タグ名まで）<div id="aDiv">

— ソルバー

5

おそらく、これはさらにいくつかのテストケースを使用できますか？

— ビルジョラクセフ

1

これには、より多くのテストケースと、入力がどのようになるかについての正確な説明（BNFなど）が本当に必要です。「有効なHTML」の正確な意味と、サポートする必要があるエッジケースの数がわかりません。（最初に思い浮かぶもの：タグ名と。>などの間にスペースがあり<a >b</a >ます。）

— Lynn

13

HTML + CSS + JavaScript、39 + 141 + 20 = 200バイト

Webページに視覚的に出力します。これをのような特別な要素で動作させるため<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>

スニペットを展開

— ダリーリョ
ソース

2

これは本当に賢いです！

— リックヒッチコック

1

私はゴルフのCSSを見たことがありません:)

— ソルバー

これは両方のテストケースに失敗します。

— ジュゼッペ

@Giuseppeすべての要素でdisplay = noneを使用し、<pre>の代わりにiframeを使用して修正できる可能性があると思います

— ソルバー

@ジュゼッペ修正。

— -darrylyeo

6

Javascript + 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>

Expand snippet

— アタコ
ソース

ナイーブではなく、ナイーブだと確信していますか？（必要に応じてこのジョークを止めることができます）

— エソランジングフルーツ

以下に変更して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>

Expand snippet

少ないゴルフ

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では機能しません。「コンテンツ」部分の処理方法がわからない。これが無効な場合は、質問を編集して、コンテンツを含むノードの例を表示してください。

— 魔法のタコUr
ソース

0

炭、28バイト

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

オンラインでお試しください！リンクは、コードの詳細バージョンです。説明：

≔¹η

の h変数は、我々は内部の引用符であるかどうかを追跡するために使用されます。

Ｆ⮌θ«

文字列を逆順にループします。

≡ι

通貨文字をオンにします。

"≦¬η

それが "は、引用フラグを切り替えます。

<Ｆη

それが <、引用符の内側にない場合は...

¿⁼ζ/

次の文字（逆方向にループしているためループ内で前にある）がaの/場合、...

←¶\

上に移動して\左に描く、そうでなければ...

↙/

を描き、/左下に移動します。

≔ιζ

次のループ反復の特性を覚えておいてください。

— ニール
ソース

HTMLページを山に変換する

HTML + CSS + JavaScript、39 + 141 + 20 = 200バイト

HTML + CSS + JavaScript、10 + 103 + 20 = 133バイト

Javascript + JQuery、275 246バイト

HTML + JavaScript（ES6）、8 + 192 = 200バイト

JS

HTML

少ないゴルフ

05AB1E、38 26 23バイト

炭、28バイト