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 [1065 просмотров]