JavaScript: как отформатировать отступами строку с разметкой HTML?
Так как код немного побольше, чем в этих базовых скриптах, пусть будет отдельной заметкой.
На вопрос из заголовка отвечает функция format
, несложным образом форматирующая HTML-содержимое контейнера node
.
В принципе, ей неважно, правильна ли разметка HTML, но с неправильной не стоит ожидать разумного форматирования:
<div id="source"> <p>хрю <li>я плохой кодя </ol>абырвалг </div> <textarea id="target" rows="5" cols="80"></textarea> <script> function format(node, level) { //форматировать содержимое контейнера node let indentBefore = new Array(level++ + 1).join(' '), indentAfter = new Array(level - 1).join(' '), textNode; for (let i = 0; i < node.children.length; i++) { textNode = document.createTextNode ('\n' + indentBefore); node.insertBefore (textNode, node.children[i]); format (node.children[i], level); if (node.lastElementChild == node.children[i]) { textNode = document.createTextNode('\n' + indentAfter); node.appendChild(textNode); } } return node; } let listContainer = document.getElementById("source"); document.getElementById("target").textContent = format(listContainer,0).innerHTML; </script>
Выполните этот код из нового документа .html
. Как видно из листинга, разметка в элементе source
неправильная и в target
получим вот что:
<p>хрю </p> <li>я плохой кодя абырвалг </li>
Если в контейнере source
получше размеченное содержимое:
<p>ура!</p><ul> <li>я кодя хороший </li></ul> </ol><br>абырвалг
то оно и отформатируется получше:
<p>ура!</p> <ul> <li>я кодя хороший </li> </ul> <br>абырвалг
С переводами строк '\n'
, думаю, легко при необходимости скорректировать решение, например, просто чистить разметку от переводов строк перед отправкой в функцию:
let listContainer = document.getElementById("source"); listContainer.innerHTML = listContainer.innerHTML.trim().replace(/(\r\n|\n|\r)/gm, ''); document.getElementById("target").textContent = format(listContainer,0).innerHTML;
Для иллюстрации работы с "правильной" сгенерированной разметкой HTML, в которой, вообще говоря, никаких лишних переводов строк не будет, прикрепляю небольшой сервис для создания многоуровневых нумерованных списков HTML. Поскольку код там студенческий, строки вводятся через окна диалога prompt
.
Увидеть полный код страницы со скриптом можно как всегда - открыв в браузере через правую кнопку мыши исходник прилагаемого файла. Кодировка Юникода utf-8.
Сервис для создания многоуровневых нумерованных списков HTML, открыть в текущем окне/вкладке (5 Кб)

полученная скриптом разметка списка
P.S. Ниже показан небольшой законченный сервис на основе функции format
. Файл размещён в кодировке Юникода UTF-8, увидеть текст приложения можно из исходного текста его страницы.
Работа не гарантируется, если разметка сама по себе некорректна. С другой стороны, код самостоятельно исправит некоторые погрешности разметки.
formatHTML.html, открыть скрипт форматирования разметки HTML в текущем окне (вкладке) (2 Кб)
Вот несложный тест скрипта:

скриншот работы скрипта форматирования разметки HTML
03.05.2020, 15:07 [1172 просмотра]