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>

输出：

/\

— 解算器
source

18

一句警告高尔夫球员...

— 路易斯Mendo

会不会有</ div>？或者我们可以假设斜杠总是毗邻div

— Rɪᴋᴇʀ

嗯，我会很好的-您可以假设<或后没有空格</（直到标签名称）-但是属性仍然可能有空格，例如<div id="aDiv">

— Solver

5

也许这可以使用更多的测试用例？

— Birjolaxew

1

这确实需要更多的测试用例，并且需要对输入的外观进行精确描述（例如BNF）。我不知道“有效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>

展开摘要

— 达里里奥
source

2

这真的很聪明！

— 里克·希区柯克

1

我以前从未看过高尔夫CSS ：）

— Solver

这两个测试用例都失败了。

— 朱塞佩

@Giuseppe我认为您可以通过在所有元素上使用display = none修复该问题，并使用iframe代替<pre>

— Solver 18'1

@Giuseppe固定。

— darrylyeo '18

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>

展开摘要

— 阿塔科
source

您确定这是天真而非天真的吗？（如果您愿意，我可以停止开这个玩笑）

— Esolanging Fruit

更改为269个字节：j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i...

— Rick 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>

展开摘要

少打高尔夫球

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

— 达里里奥
source

字节数是否不应该包含id=EHTML元素，因为您依靠它来使代码正常工作？

— Birjolaxew

@Birjolaxew哎呀！我以某种方式错过了。

— darrylyeo '18

1

HTML具有内置的HTML解析器。

— user202729

1

05AB1E，38 26 23字节

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

在线尝试！

我仍然在打高尔夫球。它假定在HTML中您将始终使用4个空格进行缩进，并且不适用于“非漂亮” HTML。不确定如何处理“内容”部分，如果无效，请编辑问题以显示具有内容节点的示例。

— 魔术章鱼缸
source

0

木炭，28字节

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

在线尝试！链接是详细版本的代码。说明：

≔¹η

该h变量用于跟踪我们是否在引号内。

Ｆ⮌θ«

以相反的顺序遍历字符串。

≡ι

打开当前字符。

"≦¬η

如果是，"则切换引号标志。

<Ｆη

如果它是a <并且我们不在引号内，则...

¿⁼ζ/

如果下一个字符（在循环中是上一个字符，因为我们正在反向循环）是/，则...

←¶\

向上移动并\向左画，否则...

↙/

画一个/，然后向左和向左移动。

≔ιζ

记住下一个循环迭代的字符。

— 尼尔
source