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

Слово предостережения для игроков в гольф ...

— Луис Мендо

Будет ли когда-нибудь </ div>? или мы можем предположить, что косая черта всегда рядом сdiv

— R

хммм, я буду хорош - вы можете предполагать, что пробелы после <или </(до имени тега) не допускаются - однако могут существовать пробелы для атрибутов, например<div id="aDiv">

— Solver

5

Возможно, для этого можно использовать еще несколько тестовых случаев?

— Birjolaxew

1

Для этого действительно нужно больше тестовых случаев и точное описание (скажем, в BNF) того, как будет выглядеть ввод. Я не знаю, что именно означает «Действительный HTML», и сколько крайних случаев я должен поддерживать. (Первое, что приходит на ум: пространство между именем тега и >такие , как <a >b</a >.)

— Lynn

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

Я никогда раньше не видел CSS для игры в гольф :)

— Solver

Это терпит неудачу оба тестовых случая.

— Джузеппе

@Giuseppe Я думаю, что вы можете исправить это с помощью display = none для всех элементов и использовать iframe вместо <pre>

— Solver

@ Giuseppe Исправлено.

— darrylyeo

6

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

Довольно наивное решение проблемы. Анализирует HTML с JQuery $(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
источник

Вы уверены, что это наивно, а не наивно? (Я могу прекратить эту шутку, если хотите)

— Esolanging Fruit

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

— Rick Хичкока

Точно так же, измените 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>

Развернуть фрагмент

Меньше гольфа

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, поскольку вы полагаетесь на него, чтобы код работал?

— Birjolaxew

@Birjolaxew Ой! Я как-то пропустил это.

— Даррильо

1

HTML имеет встроенный анализатор HTML ... креативное решение.

— user202729

1

05AB1E , 38 26 23 байта

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

Попробуйте онлайн!

Я все еще играю в гольф. Предполагается, что в HTML вы всегда будете использовать 4 пробела для отступа, и не работает с «не красивым» HTML. Не знаете, как обращаться с частью «контент», если она недействительна, отредактируйте вопрос, чтобы показать пример с узлом, имеющим контент.

— Урна волшебного осьминога
источник

0

Древесный уголь , 28 байт

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

Попробуйте онлайн! Ссылка на подробную версию кода. Объяснение:

≔¹η

hПеременная используется для отслеживания мы ли внутри кавычек.

Ｆ⮌θ«

Зациклите строку в обратном порядке.

≡ι

Включите символ тока.

"≦¬η

Если это так, "переключите флаг кавычки.

<Ｆη

Если это <и мы не в кавычках, тогда ...

¿⁼ζ/

Если следующий символ (предыдущий в цикле, потому что мы делаем цикл в обратном порядке) - это /, то ...

←¶\

Двигайся вверх и нарисуй \влево, еще ...

↙/

Нарисуйте /и двигайтесь вниз и влево.

≔ιζ

Запомните символ для следующей итерации цикла.

— Нил
источник

Преобразовать 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 байт