фильтр новой строки angularjs без другого html

Question

фильтр новой строки angularjs без другого html

Я пытаюсь конвертировать символы новой строки (n) в html br ' s.

Согласно это обсуждение в группе Google, вот что у меня есть:

myApp.filter('newlines', function () {

    return function(text) {

        return text.replace(/n/g, '<br/>');

    }

});

обсуждение там также советует использовать следующее В представлении:

{{ dataFromModel | newline | html }}

это, кажется, с помощью старого html фильтр, в то время как теперь мы должны использовать .

несмотря на это, это создает проблему: я не хочу, чтобы какой-либо HTML исходная строка (dataFromModel) для отображения в виде HTML; только br ' s.

например, учитывая следующую строку:

в то время как 7 > 5

Я все еще не хочу html и прочее здесь...

Я бы хотел, чтобы он выводил:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

есть ли способ сделать это?

566 7

javascript html angularjs sanitization

7 ответов:

Comments

Ничего не найдено.

Devin Spikowski · Accepted Answer · 2013-08-01 00:17:25

может быть, вы можете достичь этого только с html, a <preformated text> путь ? Это позволит избежать использования фильтров или сделать какой-либо обработки.

все, что вам нужно сделать, это отобразить текст в элементе, который имеет этот CSS:
{{ MyMultiLineText}}
это будет анализировать и отображать \n как новые строки. Отлично работает для меня.

здесь пример jsFiddle.

MegaHit · Accepted Answer · 2012-12-20 21:39:57

вместо того, чтобы возиться с новыми директивами, я решил просто использовать 2 фильтра:
App.filter('newlines', function () {
 return function(text) {
 return text.replace(/\n/g, ' ');
 }
})
.filter('noHTML', function () {
 return function(text) {
 return text
 .replace(/&/g, '&amp;')
 .replace(/>/g, '&gt;')
 .replace(/</g, '&lt;');
 }
});
затем, на мой взгляд, я трубу один в другой:

JJW5432 · Accepted Answer · 2015-05-11 20:54:05

более простой способ сделать это-сделать фильтр, который разбивает текст на каждой \n в список, а затем использовать `ng-repeat.

фильтр:
App.filter('newlines', function() {
 return function(text) {
 return text.split(/\n/g);
 };
});
и в html:

 {{line}}

jaime · Accepted Answer · 2012-12-20 07:24:15

Я не знаю, есть ли у Angular служба для удаления html, но, похоже, вам нужно удалить html перед передачей вашего newlines пользовательский фильтр. Кстати, я хотел бы сделать это с помощью пользовательского no-html директива, которая будет передана свойство scope и имя фильтра для применения после удаления html
<div no-html="data" post-filter="newlines"></div>
вот реализация
app.directive('noHtml', function($filter){
 return function(scope, element, attrs){
 var html = scope[attrs.noHtml];
 var text = angular.element("<div>").html(html).text();

 // post filter
 var filter = attrs.postFilter;
 var result = $filter(filter)(text);

 // apending html
 element.html(result);
 };
});
важный момент-это text переменной. Здесь я создаю промежуточный элемент DOM и добавляю его HTML с помощью html метод, а затем получить только текст с text метод. Оба метода предоставляются облегченная версия jQuery от Angular.

следующая часть применяет newline фильтр, который делается с помощью $filter сервис.

Проверьте планкер здесь:http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

Sebastian Viereck · Accepted Answer · 2018-04-30 18:09:43

Если вы не хотите уничтожить макет с бесконечными строками, используйте pre-line:
{{ MyMultiLineText}}

Alex Mounir · Accepted Answer · 2016-02-20 19:04:11

обновление фильтра с ng-bind-html в настоящее время будет:
myApp.filter('newlines', function () {
 return function(text) {
 return text.replace(/(&#13;)?&#10;/g, ' ');
 }
});
и фильтр noHTML больше не требуется.

решение с белым пространством имеет низкую поддержку браузера: http://caniuse.com/#search=tab-size

Ben Edge · Accepted Answer · 2018-01-26 12:41:56

немного поздно для партии на этом, но я бы предложил небольшое улучшение, чтобы проверить неопределенные / нулевые строки.

что-то типа:
.filter('newlines', function () {
 return function(text) {
 return (text) ? text.replace(/(&#13;)?&#10;/g, ' ') : text;
 };
})
или (немного плотнее)
.filter('newlines', function () {
 return function(text) {
 return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, ' ') : text;
 };
})