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

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

<span>My text</span>

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

My text

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

угловой html:

<div>{{myText | htmlToPlaintext}}</div>
8 59
javascript angularjs html

8 ответов:

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

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

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

var plain_text = htmlToPlaintext( your_html );

с углового.js:

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

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

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

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

угловое.элемент

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

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

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

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

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

вы хотите использовать для этого встроенную 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;
}());

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

3

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

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

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

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

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

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

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

0

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

-2

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

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

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

Скрипка

-7