Код формата, который отображается в div

Я строю пользовательский интерфейс на основе Javascript, который генерирует код на основе пользовательского интерфейса. У меня работает генерация кода. код сохраняется в строке. Я попытался отформатировать его, сделать отступ, но больше не знаю как. Есть ли способ выложить отформатированный код?

Например, если у меня есть эта строка:

"<body><div><h1>Hi</h1></div></body>"

выводится так:

<body>
  <div>
    <h1>
      Hi
    </h1>
  </div>
</body>

сейчас я вывожу так:

$(".output").text(string);

3 ответа

Решение

Посмотрите на тег кода в HTML. Показать вашу строку, обернутую тегами кода

<code>your string</code>

Или используйте текстовую область. https://jsfiddle.net/sureshatta/k1atgn6o/1/

Если вы пытаетесь получить форматированный вывод, пожалуйста, посмотрите на литералы шаблона

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Если вы хотите отобразить код с правильными отступами и цветом, вы можете использовать для этого библиотеку, такую ​​как highlighjs.

Я не уверен, что это делает автоматический отступ, но алгоритм для этого не так сложен: просто добавьте новую строку и достаточно пробелов при открытии нового HTML-тега (рекурсия облегчит этот путь).

Также вы можете использовать js-beautify.

.text() используется для изменения текста любого тега.

$(".output").text(string);

.html () используется для добавления строки с тегом.

$(".output").html(string);
Другие вопросы по тегам