Решаем: Новые строки в jQuery text() без лишнего отступа

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

Для добавления переносов строк в jQuery используйте метод html(), заменив символы новой строки (\n) на тег <br>. Ниже приведён код, который выполнит данную операцию:

var textWithNewlines = "Строка 1.\nСтрока 2.";
$('#element').html(textWithNewlines.replace(/\n/g, '<br>'));

Защитите данные от некорректных символов

При использовании html(), не забывайте экранировать специальные HTML-символы для предотвращения XSS-атак и инъекций. Применяйте $.text() или аналогичные функции для очистки ввода пользователя:

var escapedText = $("<div>").text(textWithNewlines).html().replace(/\n/g, '<br>');
$('#safeElement').html(escapedText);

Пробелы в тренде: стиль CSS!

Герой 'white-space'

Подтвержденный способ – использование CSS свойства white-space со значением pre-line, которое позволяет поддерживать переносы строк без использования <br> и html():

#element {
  white-space: pre-line;
}

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

От черного героя 'bloating-space'

Избегайте лишних пробелов, применяя white-space для предотвращения нежелательных отступов и пробелов:

$('#element').css('white-space', 'pre-line').text(textWithNewlines.trim());

Профессиональные рекомендации и хитрости

Готовы к кастомным решениям?

Разработайте функцию для конвертации символов новой строки в теги <br/>, если требуется больше контроля над текстом:

function convertNewlines(text) {
  return text.replace(/\n/g, '<br>');
}
$('#element').html(convertNewlines(textWithNewlines));

Производительность – первый приоритет

Если вы работаете с большими текстовыми объёмами и производительность играет важную роль, создайте текстовые узлы через document.createElement():

function createTextWithNewlines(text) {
  return $('<p>').text(text).html().replace(/\n/g, '<br>');
}
$('#element').append(createTextWithNewlines(textWithNewlines));

Борьба с браузерами

Для обеспечения одинакового поведения в разных браузерах используйте textContent вместо innerText:

var textNode = document.getElementById('element').firstChild;
var content = 'Привет\nМир';

textNode.textContent = (textNode.textContent === undefined) ? textNode.innerText : content;

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

.text() в jQuery как нить (🧵):

До применения: 🧵 "Привет" + "Мир"

После применения .text(): 🧵 "ПриветМир"

Добавляем переносы строк, представив их как бусины (⚪️):

🧵 "Привет" + ⚪️ + "Мир"

С применением .html():

🧵 "Привет<br>" + ⚪️ + "Мир"

И вуаля, украшенная нить:

🧵 "Привет"

⚪️

"Мир"

Результат: текст с переносами строк.

Проблемы совместимости

Сохраняем традиции

Для IE8 используйте свойство white-space: pre-line;.

Храните, но не накапливайте

Сохраняйте объект jQuery в переменной, чтобы повысить эффективность работы со строкой:

var $element = $('#element');
// Используем $element.

Встретимся с каверзными случаями

CSS не всегда может помочь

Если CSS не подходит для вашей задачи, регулируйте переносы строк вручную с помощью jQuery для точного контроля над конечным результатом.

Тонкости использования split-join

Разделите текст по символам новой строки, обработайте каждую строку и соедините их обратно с помощью тегов <br>:

var linesArray = textWithNewlines.split('\n');
var htmlReadyText = linesArray.join('<br>');
$('#element').html(htmlReadyText);

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

1. .text() | jQuery API Documentation — документация по методу .text().
2. Escape HTML text in an AngularJS directive – Stack Overflow — методы экранирования HTML.
3. dom – What is the difference between jQuery: text() and html() ? – Stack Overflow — различия между .text() и .html().
4. .html() | jQuery API Documentation — возможности функции .html().
5. CSS white-space property — свойство CSS white-space.
6. HTML pre tag — использование тега <pre>.
7. String.prototype.replace() – JavaScript | MDN — метод .replace() для форматирования.