Способы вывода строки с переносом \n в HTML c jQuery

Быстрый ответ

Например, можно использовать JavaScript для замены символа \n на HTML-тег <br>, отвечающий за перенос строки:

let str = "Первая строка\nВторая строка";
document.body.innerHTML = str.replace(/\n/g, "<br>");

В итоге каждый символ \n в вашей строке заменится на тег <br>, гарантируя надлежащее отображение текста на странице.

Управление свойством whitespace

В HTML можно сохранить и пробелы, и переносы строк, применив в CSS свойство white-space: pre-wrap;. Это позволяет избежать замены \n на тег <br>.

.preformatted-text {
  white-space: pre-wrap; /* Внедрим порядок */
}

Просто добавьте этот класс к нужному HTML-элементу, и форматирование строк будет сохранено:

<div class="preformatted-text">
  Первая строка
  Вторая строка
</div>

Безопасность через jQuery

Если вы работаете с jQuery, метод .html() поможет вам вставить текст, сохраняя при этом разбивку на строки в элементе <div>:

let str = "Первая строка\nВторая строка";
$('#content').html(str.replace(/\n/g, "<br>")); /* Для сражающихся в танковом корпусе jQuery */

Учтите, для выполнения этой операции должна быть подключена библиотека jQuery.

Отказ от мутаций

Если вы желаете оставить исходную строку без изменений, не применяя замену \n на <br>, воспользуйтесь тегом <pre> для обрамления текста, этот тег сохраняет формат строки "как есть":

<pre>Первая строка
Вторая строка</pre>

Дополнительно вы можете стилизировать тег <pre> с помощью нового метода jQuery .css():

$('pre').css({
  'background-color': '#f3f3f3', /* Модный защитный костюм */
  'border': '1px solid #ddd',
  // Здесь можно выбрать любимый цвет рамки... 
});

Визуализация

Давайте представим строки в HTML в виде поезда:

"Мой Поезд\nСлов\nНа Несколько Рельс"

Каждый символ \n здесь — это станция, где поезд останавливается:

"Мой Поезд<br>
Слов<br>
На Несколько Рельс"

🚂 ➡️ 🚉 ➡️ 🚉 ➡️ 🚉

А тег <br> — это диктор, объявляющий: "Следующая станция, переходите к следующей строке".

Углубляемся в суть

innerHTML: используйте аккуратно

Непосредственное присвоение innerHTML может создать уязвимости для XSS-атак. Обрабатывайте контент из внешних источников для исключения рисков:

const safeStr = str.replace(/[<>"'&]/g, (match) => ({
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '&': '&amp;',
})[match]); 
/* Подготовка к приёму гостей */

document.body.innerHTML = safeStr.replace(/\n/g, "<br>");

Подробнее об этом расскажет наш спикер на видео

Эффективное управление узлами

Если вы работаете с текстом, исключая HTML-теги, лучше использовать textContent вместо innerHTML для повышенной производительности и безопасности:

let textNode = document.createTextNode(str); /* Создаем текстовый узел – эффективно и безопасно */

document.body.appendChild(textNode); /* Добавляем его в DOM */

Динамические обновления

Если вы работаете с динамическим контентом, не забывайте о обработчиках событий, чтобы ваши обновления отражались в реальном времени в соответствии с пользовательским вводом:

inputElement.addEventListener('input', function() {
  let freshText = this.value; /* Свежий пользовательский ввод */
  document.getElementById('display').innerText = freshText;
});

Полезные материалы

1. <br>: Тег переноса строки в HTML на MDN — подробная информация о теге <br> в HTML на MDN.

2. Полное руководство по элементу table от CSS-Tricks — обновите свои знания об использовании элемента table для структурирования данных на CSS-Tricks.

3. Как заменить все символы новой строки в строке на элементы <br /> в JavaScript? Обсуждение на Stack Overflow — обсуждение на Stack Overflow о преобразовании символов новой строки в теги <br> с использованием JavaScript.

4. white-space в CSS на MDN — подробное руководство по управлению пробелами и новыми строками в стилях на MDN Web Docs.

5. Тег pre для сохранения форматирования текста на W3Schools — глубокое изучение тега <pre>, сохраняющего текст таким, каким он есть.

6. Свойство textContent для работы с текстовым содержимым на MDN — детальный разбор работы со свойством textContent на MDN.