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

У меня есть текст вроде этого:

<span>My text</span>

Я хочу показать без тегов:

My text

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

Angular html:

<div>{{myText | htmlToPlaintext}}</div>

Ответ 1

jQuery около 40 раз SLOWER, не используйте jQuery для этой простой задачи.

function htmlToPlaintext(text) {
  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>  

Ответ 2

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

angular.element

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

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

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

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

<div>{{myText | htmlToPlaintext}}</div>

Ответ 3

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

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;
}());

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

Ответ 4

<div ng-bind-html="myText"></div> Не нужно помещать теги интерполяции html {{}}, как вы {{myText}}.

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

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

Ответ 5

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

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

<p>{{DetailblogList.description | htmlToPlaintext}}</p>

Ответ 6

Вы можете использовать ng-bind-html, не забудьте ввести $sanitize service в ваш модуль Надеюсь, что это поможет.

Ответ 7

Использовать ng-bind-html это только правильный и простой способ

Ответ 8

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

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

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

Fiddle