21

Завдання: перетворіть HTML-сторінку в гору!

Коли HTML-сторінки з відступом, вони можуть виглядати так:

<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

— сусідає

хммм, мені буде приємно - ви можете припускати пробіли після <або </(до назви тегу) - проте все ще можуть бути пробіли для атрибутів, наприклад<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>

Розгорніть фрагмент

— darrylyeo
джерело

2

Це справді розумно!

— Рік Хічкок

1

Я ніколи не бачив golfed 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>

Розгорніть фрагмент

— Атако
джерело

Ви впевнені, що це наївно, а не добре? (Я можу припинити цей жарт, якщо хочете)

— Езоляція фруктів

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

— Rick Хічкок

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 Whoops! Я це якось пропустив.

— darrylyeo

1

HTML має вбудований HTML-аналізатор ... творче рішення.

— користувач202729

1

05AB1E , 38 26 23 байт

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

Спробуйте в Інтернеті!

Я все ще гольфую це. Він передбачає, що в HTML ви завжди будете використовувати 4 пробіли для відступу, і він не працює на "не дуже" HTML. Не знаєте, як обробити частину "вмісту", якщо це недійсно, відредагуйте питання, щоб показати приклад із вузлом, який містить вміст.

— Чарівна урна восьминога
джерело

0

Вугілля деревне , 28 байт

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

Спробуйте в Інтернеті! Посилання на багатослівну версію коду. Пояснення:

≔¹η

hМінлива використовується для відстеження ми є всередині лапок.

Ｆ⮌θ«

Переведіть петлю на рядок у зворотному порядку.

≡ι

Увімкніть символ currenc.

"≦¬η

Якщо це "тоді, перемкніть прапор цитати.

<Ｆη

Якщо це, <а ми не всередині котирувань, то ...

¿⁼ζ/

Якщо наступний символ (попередній у циклі, тому що ми циклічно обертаємось) - це 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 байт