67

我有一些这样的文字：

<span>My text</span>

我想显示没有标签：

My text

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

角HTML：

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

8 回答 8

210

jQuery 大约慢了 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>
于 2013-06-26T08:47:40.950 回答
21

来自https://docs.angularjs.org/api/ng/function/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>
于 2014-06-04T19:41:43.483 回答
4 
var app = angular.module('myapp', []);

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

<p>{{DetailblogList.description | htmlToPlaintext}}</p>
于 2016-03-09T07:08:49.943 回答
3

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

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

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

于 2017-07-26T05:44:22.440 回答
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;
}());

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

于 2015-12-08T14:05:49.490 回答
0

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

于 2017-04-13T00:35:19.103 回答
-3

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

于 2017-01-03T10:30:53.313 回答
-7

像这样使用这个功能

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

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

小提琴

于 2013-06-25T05:09:13.127 回答