angularjs输出纯文本而不是html

Question

我有这样的文字：

<span>My text</span>

我想显示没有标签：

My text

我也不想应用标签，我想剥离它们。 有什么简单的方法可以做到这一点？

Angular html：

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

Answer 1

jQuery大约是SLOWER的40倍 ，请不要使用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>  

Answer 2

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

angular.element

将原始DOM元素或HTML字符串包装为jQuery元素（如果jQuery不可用，angular.element委托给Angular的内置jQuery子集，称为“jQuery lite”或“jqLit​​e。”）

所以你可以做到：

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

用法：

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

Answer 3

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

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

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

Answer 4

您希望使用内置的浏览器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;
}());

将其包装在自执行函数中的原因是为了重用元素创建。

Answer 5

<div ng-bind-html="myText"></div>无需像{{myText}}一样放入html {{}}插值标签。

并且不要忘记在模块中使用ngSanitize，例如var app = angular.module("myApp", ['ngSanitize']);

并在index.html页面https://cdnjs.com/libraries/angular-sanitize中添加其cdn依赖项

Answer 6

您可以使用ng-bind-html，不要忘记将$ sanitize服务注入您的模块希望它有所帮助

Answer 7

使用ng-bind-html这只是最恰当和最简单的方法

Answer 8

使用此功能就像

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

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

小提琴