AngularJS: конвертация \n в <br> без рендеринга HTML-тегов

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

Для преобразования символов новой строки в HTML-разметку в AngularJS можно использовать данный пользовательский фильтр. Добавьте его в ваше приложение следующим образом:

app.filter('newline', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml((text || '').replace(/\n/g, '<br/>'));
    };
}]);

Для использования фильтра внедрите следующий код в ваш HTML:

<div ng-bind-html="yourText | newline"></div>

Здесь yourText — это переменная, содержащая ваш текст. Таким образом, форматирование строк будет сохранено без ввода лишних HTML-элементов. Просто и надёжно!

Свойство CSS white-space

Если вам нужно сохранить символы новой строки без вставки <br/>, вы можете использовать CSS-свойство white-space: pre;, которое позволяет отображать текст так, как он выглядит в оригинале:

.preformatted {
  white-space: pre;
}

Примените этот класс в HTML следующим образом:

<div class="preformatted">{{ yourText }}</div>

Благодаря этому простому приёму, ваш текст сохранит первоначальное форматирование.

Экранирование HTML с помощью фильтров

Для обеспечения безопасности HTML можно использовать регулярные выражения:

app.filter('escapeHtml', function() {
    var entityMap = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        '/': '&#x2F;'
    };
    
    return function(text) {
        return String(text).replace(/[&<>"'\/]/g, function (s) {
            return entityMap[s];
        });
    }
});

Совместите фильтр escapeHtml с фильтром newline для расширения безопасности:

<div ng-bind-html="yourText | escapeHtml | newline"></div>

Использование тегов pre и code

Чтобы сохранить форматирование текста, можно использовать теги <pre> или <code>:

<pre>{{ yourText }}</pre>

А для работы с кодом подойдёт:

<code>{{ yourText }}</code>

Каждая строка – новое приключение

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

<div ng-repeat="line in yourText.split('\n')" ng-bind="line"></div>

Чтобы повысить производительность, примените track by $index:

<div ng-repeat="line in yourText.split('\n') track by $index" ng-bind="line"></div>

Безопасное встраивание HTML с помощью $sce

Для безопасного встраивания HTML доверьтесь сервису Angular $sce:

<div ng-bind-html="$sce.trustAsHtml(yourText)"></div>

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

Пример работы фильтра AngularJS для новой строки без необходимости использования HTML:

Если у вас есть текст: "Первая строка\nВторая строка\nТретья строка"

Вывод будет таким:
Первая строка
Вторая строка
Третья строка

После применения фильтра:
Первая строка
Вторая строка
Третья строка

Здесь символ \n выполняет функцию клавиши Enter, добавляя новую строку.

Переключение между различными стилями форматирования

Для более гибкой вёрстки используйте свойство CSS white-space: pre-line;. Оно обрабатывает пробелы особым образом:

.text-with-spacing {
  white-space: pre-line;
}

Для оформления динамических ссылок используйте тег <a>:

<a href="{{ dynamicLink }}">Нажмите здесь</a>

Применяйте тег <p> для структурирования контента на отдельные блоки:

<p ng-repeat="paragraph in yourText.split('\n\n') track by $index">
  {{ paragraph }}
</p>

Для работы с DOM используйте Angular-версию jQuery, нацеливая директивы на цель.

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

1. Документация по AngularJS фильтрам — официальное руководство по созданию фильтров в AngularJS.
2. Руководство разработчика AngularJS по выражениям — разница между выражениями в AngularJS и JavaScript.
3. Справочник по HTML-сущностям — всё, что нужно знать о HTML-сущностях.
4. Создание пользовательских фильтров AngularJS — пошаговый туториал по созданию пользовательских фильтров.
5. Привязка HTML фрагментов в AngularJS — правила безопасного использования HTML-фрагментов.
6. Безопасность при работе с $sce в AngularJS — защита данных при использовании сервиса Angular $sce.
7. Обзор фильтров в AngularJS — знакомство с фильтрами в AngularJS с примерами.