angularjs для вывода обычного текста вместо HTML

У меня есть такой текст:

<span>My text</span>

Я хочу отображать без тегов:

My text

Я тоже неЯ не хочу применять теги, я хочу их убрать. Какие'простой способ сделать это?

Угловой HTML:

{{myText | htmlToPlaintext}}
 Harry25 июн. 2013 г., 09:05
@callmekatootie Я добавил пример того, что яя делаю в угловых
 callmekatootie25 июн. 2013 г., 08:16
Я вижу, что и его решение использует jQuery - вы отметили это в AngularJS, и у меня есть ощущение, что вы можете делать это в AngularJS без использования jQuery, если только вы можете дать больше информации в своем вопросе - особенно там, где вы хотите отобразить текст на ваш взгляд ...
 Harry25 июн. 2013 г., 07:56
@callmekatootie Я создал фильтр на основе ответа, который дал Абхишек.
 callmekatootie25 июн. 2013 г., 07:44
Вы отметили это в AngularJS, поэтому я предполагаю, что вы хотите отображать текст с помощью AngularJS. Если так, этот текст в модели? Какой HTML-тег вы используете для отображения содержимого модели?

Ответы на вопрос(7)

Не нужно вставлять в html {{}} теги интерполяции, как вы делали {{myText}}.

и не надоне забудьте использовать ngSanitize в модуле, например,var app = angular.module("myApp", ['ngSanitize']);

и добавьте свою зависимость cdn в страницу index.htmlhttps://cdnjs.com/libraries/angular-sanitize

 Gaurav_009331 авг. 2017 г., 14:01
работать как шарм, спасибо простой и короткий ответ.

Используйте эту функцию как

 String.prototype.text=function(){
   return this ? String(this).replace(/<[^>]+>/gm, '') : '';
 }

  "<span>My text</span>".text()
  output:
  My text

скрипка

 pixelbyaj29 мая 2015 г., 12:08
Rev Марк ответом является Javascript, и если я сделал это с помощью JQuery, что делает его разницу
 Marecky23 авг. 2017 г., 12:50
+1 и я нене вижу здесь никакого jQuery ... wtf? Еще одна проблема - @Abjo 'Метод s расширяет сборку в String-прототипе. Некоторые разработчики предпочитают злиться.
 RevNoah02 июн. 2014 г., 23:21
Это решение на основе jQuery. Вопрос был об angularjs.
 Ibrahim Lawal21 июн. 2015 г., 12:19
Ваше решение не совместимо с OP 'требования. он уже построил свое приложение на angularjs. JQuery это другая структура.
 Harry26 июн. 2013 г., 07:56
@Utopik почему? Также вы можете написать это как ответ?
 pixelbyaj25 июн. 2013 г., 10:52
Почему люди дали отрицательный 2?

нене забудьте добавить сервис $ sanitize в ваш модуль. Надеюсь, это поможет

var app = angular.module('myapp', []);

app.filter('htmlToPlaintext', function()
{
    return function(text)
    {
        return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
});

<p>{{DetailblogList.</p>
 winner_joiner09 мар. 2016 г., 08:13
добавьте немного форматирования в код, что поможет генерировать лучшие ответы.
 twernt10 мар. 2016 г., 15:55
Там'Разница между некачественным ответом, за который следует отказаться, и без ответа, который следует удалить. Посмотри пожалуйстаВы'делаю это неправильно: призыв к здравомыслию в очереди сообщений низкого качества.
 Johannes Jander09 мар. 2016 г., 10:25
Пожалуйста, добавьте некоторые объяснения. Ваш ответ в данный момент помеченнизкое качество " и в конечном итоге может быть удален.
 codelearner07 июн. 2016 г., 10:13
Как показать предварительный просмотр, вместо того, чтобы показывать простой текст (он работает). но мне нужно показать предварительный просмотр, как шоу переполнения стека при публикации вопроса или ответа, включая изображения также
Решение Вопроса

JQuery примерно в 40 раз МЕДЛЕННОпожалуйста, не используйте jQuery для этой простой задачи.

  return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}

использование :

var plain_text = htmlToPlaintext( your_html );
С angular.js:
angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

использовать:

<div>{{myText | htmlToPlaintext}}</div>  
 Bogdan10 апр. 2015 г., 20:06
использование механизма DOM охватывает гораздо больше случаев, когда этот простой пример заменяет не пример: некоторые коды здесь и# 146; &# 147; &# 148;
 Utopik29 янв. 2014 г., 13:52
@ brettof86 Я обновил этолегче читать. Благодарю.
 Utopik11 мар. 2016 г., 22:32
@SamarthAgarwal что?S не так? это возвращаетсяSome Text.как я и ожидал
 Blaise16 апр. 2014 г., 19:57
Я бы никогда не добавил зависимость jQuery только для преобразования html в текст, но если бы мой проект уже использовал jQuery, я бы выбрал решение jQuery, потому что считаю написанное пользователем регулярное выражение менее читабельным, менее проверенным и менее надежным. Защищает ли ваше регулярное выражение отвсе возможные формы XSS?
 Utopik16 апр. 2014 г., 19:06
@ Слава, что вы правы, достаточно 8 тыс. Операций в секунду. Но подумай обо всей картине. Ваше приложение делает только это? А как насчет мобильных телефонов? Как насчет тяжелых приложений? Есть ли проблема совместимости браузера? Каковы преимущества jQuery? Является ли jQuery более читабельным? Легко ли написать jQuery? Иногда jQuery достаточно хорош. Но jQuery не должен использоваться везде. Особенно не здесь.
 Björn29 апр. 2015 г., 13:54
Вы, вероятно, должны добавить туда нулевую проверку, иначе она выдаст "null ": я"return text ? String(text).replace(/]+>/gm, '') : "";
 Samarth Agarwal12 мар. 2016 г., 07:30
Когда я попробовал это, он держалspan тег.
 kernel29 февр. 2016 г., 16:23
Вы можете сократить регулярное выражение с помощью несжатого поиска//gm, который выглядит немного более интуитивно понятным, читаемым, а также экономит несколько символов.
 Samarth Agarwal11 мар. 2016 г., 04:23
Это не работает, если HTML-текст следующий."<p><span style="color: rgb(34, 36, 38);text-align: left;float: none;background-color: rgb(255, 255, 255);">Some Text.</span><br><br><br></p>"
 Utopik16 апр. 2014 г., 20:48
@ Blaise, если вы добавите текст в DOM с помощью jQuery, вы ненужно защищать от XSS вэтот функция. JQuery делает это при добавлении в DOM. Кстати, яЯ действительно не уверен, какой из них является более читабельным.
 Blaise16 апр. 2014 г., 12:31
jQuery работает в 40 раз медленнее, но вы все равно получаете 8000 операций в секунду, поэтому использование jQuery по этой причине является преждевременной оптимизацией.
 boh19 авг. 2014 г., 10:53
это неработать с html экранированным символом?
 codelearner07 июн. 2016 г., 10:13
Как показать предварительный просмотр, вместо того, чтобы показывать простой текст (он работает). но мне нужно показать предварительный просмотр, как шоу переполнения стека при публикации вопроса или ответа, включая изображения также
 blockloop27 янв. 2014 г., 21:47
Я на самом деле предпочитаю String (текст) .replace (/ <[^>] +>/ гм). Я'Я использовал его в течение многих лет без каких-либо проблем.
 GuyGizmo15 сент. 2015 г., 17:56
Я опасаюсь этого решения. Там'Существует ряд обстоятельств, при которых он потерпит неудачу: 1. Знак «<» появляется в тексте, которыйэто не тег, т.е. <p>Один < Два </ Р>, Строка "< Два </п" будут удалены по ошибке. 2. Это победилоt преобразовывает ссылки на символы, такие как &усилитель; или более уместно &л;

то того, чтобы использовать регулярное выражение. Это более безопасно, так как когда-либо зеленый браузер делает работу за вас.

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return stripHtml(text);
    };
  }
);

var stripHtml = (function () {
  var tmpEl = $document[0].createElement("DIV");
  function strip(html) {
    if (!html) {
      return "";
    }
    tmpEl.innerHTML = html;
    return tmpEl.textContent || tmpEl.innerText || "";
  }
  return strip;
}());

Причиной оборачивания ее в самовыполняющуюся функцию является повторное использование создания элемента.

 codelearner07 июн. 2016 г., 10:14
Как показать предварительный просмотр, вместо того, чтобы показывать простой текст (он работает). но мне нужно показать предварительный просмотр, как шоу переполнения стека при публикации вопроса или ответа, включая изображения также
 rinogo02 нояб. 2016 г., 17:47
 Allen Hamilton06 окт. 2016 г., 01:26
изменил $ document [0] на document, и это сработало для меня! Спасибо

https://docs.angularjs.org/api/ng/function/angular.element

angular.element

оборачивает необрабанный элемент DOM или строку HTML как элемент jQuery (если jQuery недоступен, angular.element делегирует Angular 's встроенное подмножество jQuery, называемое "JQuery Lite " или же "jqLite. ")

Так что вы просто можете сделать:

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return angular.element(text).text();
    }
  }
);

Использование:

<div>{{myText | htmlToPlaintext}}</div>
 jake01 июл. 2014 г., 21:22
Я бы также избежал такого подхода; может занять не так много времени, как полный jQuery, но, конечно, намного медленнее, чем принятый ответ.
 Bruce25 мая 2017 г., 03:10
Престижность этому, использование регулярных выражений быстро, но будут крайние случаи, когда это терпит неудачу. Это более простой и безопасный способ, когда производительность не критична. Спасибо!
 Chris Jacob02 июл. 2014 г., 08:18
Я предлагаю обернуть ваш текст в элемент, иначе просто старая строка, как "Привет" вернет пустую строкуangular.element(''+text+'').text();
 Jordan02 дек. 2014 г., 19:38
если ты'В функции ссылки директивы вы можете просто сделать element.text () 0.o
 Episodex11 янв. 2018 г., 13:32
Это не удастся, еслиtext еще не заключен в какой-либо тег HTML. Таким образом, чтобы быть надежным, это должно быть больше похоже на:return angular.element('' + text + '')
 codelearner07 июн. 2016 г., 10:13
Как показать предварительный просмотр, вместо того, чтобы показывать простой текст (он работает). но мне нужно показать предварительный просмотр, как шоу переполнения стека при публикации вопроса или ответа, включая изображения также
 kaxi199316 дек. 2016 г., 12:31
Если ваш html имеет встроенный стиль, то принятый ответ не получится, этот способ работает нормально :)
 GuyGizmo15 сент. 2015 г., 17:58
Я предпочитаю это решение использовать регулярные выражения, по крайней мере, в тех случаях, когда скорость некритический Это'Это более правильно и фактически преобразует HTML в простой текст, внешне меньше, чем знаки, специальные объекты и все.

Ваш ответ на вопрос