AngularJS如何输出纯文本而不是HTML？

Question

我有这样的一段文本：

<span>My text</span>

我想要显示没有标签的内容：

My text

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

Angular HTML:

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

- Harry

---

您已将此标记为AngularJS，因此我假设您想使用AngularJS显示文本。如果是这样，那么这个文本在一个模型中吗？您使用哪个HTML标签来显示模型的内容？ - callmekatootie

@callmekatootie，我根据Abhishek的回答创建了一个过滤器。 - Harry

我看到他的解决方案使用了jQuery - 你把这个标记为AngularJS，我有一种感觉，如果你在问题中提供更多信息，特别是你希望在视图中显示文本的位置，你可以在AngularJS中完成它而不使用jQuery。 - callmekatootie

@callmekatootie 我添加了一个在Angular中的示例。 - Harry

Answer 1

使用jQuery的速度比纯JavaScript慢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>  

- Utopik

---

我实际上更喜欢使用String(text).replace(/<[^>]+>/gm, '')，我已经使用它多年了，没有任何问题。 - blockloop

jQuery运行速度较慢，但仍可达到每秒8000次操作，因此仅因此不使用jQuery是过早优化。 - Blaise

我不会为了将HTML转换为纯文本而添加jQuery依赖，但如果我的项目已经在使用jQuery，我会选择jQuery解决方案，因为我认为自己编写的正则表达式会更难以阅读、测试和可靠性较低。您的正则表达式是否可以防御所有可能形式的XSS攻击？ - Blaise

使用DOM引擎可以覆盖更多情况，而不是简单地替换，例如：这里有一些代码 ’ “ ”。 - Bogdan

你可能需要在代码中添加一个空值检查，否则它会输出“null”：“return text ? String(text).replace(/<[^>]+>/gm, '') : "";” - Björn

Answer 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>

- Davy R

---

我也会避免这种方法；虽然可能比完整的jQuery快，但肯定比被接受的答案慢得多。 - jake

建议将文本包装在一个元素中，否则像“hi”这样的普通字符串将返回一个空字符串。可以使用以下代码：angular.element('<div>'+text+'</div>').text(); - Chris Jacob

我更喜欢使用这种解决方案而不是正则表达式，至少在速度不是关键因素的情况下。它更加正确，并且实际上会将HTML转换为纯文本，去除多余的小于号、特殊实体等。 - Bri Bri

赞成这个观点，使用正则表达式虽然快速，但在某些边缘情况下可能会失败。当性能不是关键因素时，这是一种更简单、更安全的方法。谢谢！ - Bruce

如果 text 没有被包含在任何 HTML 标签中，这段代码将会失败。因此，为了更加健壮，应该改为：return angular.element('<div>' + text + '</div>')。 - Episodex

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>

- Khyati Acharya

---

为代码添加一些格式和见解，以帮助生成更好的答案。 - winner_joiner

请添加一些解释。您的答案当前被标记为“低质量”，可能最终会被删除。 - Johannes Jander

低质量的回答应该被投票否决，而非回答应该被删除。请参阅《你做错了：关于低质量帖子队列的理智呼吁》（http://meta.stackoverflow.com/questions/287563/youre-doing-it-wrong-a-plea-for-sanity-in-the-low-quality-posts-queue）。 - twernt

如何显示预览，而不是显示纯文本（它正在工作）。但我需要像Stack Overflow在发布问题或答案时显示的预览一样显示，包括图片。 - codelearner

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

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

- Olivier C

---

如何显示预览，而不是显示纯文本（它正在工作）。但我需要像Stack Overflow在发布问题或答案时显示的预览一样显示，包括图片。 - codelearner

将 $document[0] 更改为 document，这对我起作用了！谢谢 - Allen Hamilton

Answer 5

<div ng-bind-html="myText"></div>

不需要像您所做的{{myText}}那样放入html {{}}插值标签。

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

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

- Prasanna

Answer 6

你可以使用ng-bind-html，别忘了在你的模块中注入$ sanitize服务。希望能帮到你。

- Hung Vu

Answer 7

使用ng-bind-html，这是最合适和最简单的方法。

- Sandip Jana

---

欢迎来到 Stack Overflow。请添加更多细节以进行澄清。一旦您拥有足够的声望，您将能够评论任何帖子；而不是提供不需要提问者澄清的答案。 - mmushtaq

Answer 8

使用此函数的方式如下：

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

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

{{链接1：Fiddle}}

- pixelbyaj

---

这是一个基于jQuery的解决方案。问题是关于AngularJS的。 - RevNoah

答案是使用Javascript编写的，如果我使用jQuery编写会有什么不同。 - pixelbyaj

你的解决方案与 OP 的要求不兼容。他已经在 AngularJS 上构建了他的应用程序，而 jQuery 是一个不同的框架。 - Ibrahim Lawal

+1，我这里没有看到任何jQuery...什么鬼？另一个问题是@Abjo的方法扩展了内置的String原型。一些开发人员选择对此感到愤怒。 - Marecky