angularjs 输出纯文本而不是 html

angularjs to output plain text instead of html

提问by Harry

I have some text like this:

我有一些这样的文字：

<span>My text</span>

I want to display without tags:

我想不带标签显示：

My text

I also don't want to apply the tags, I want to strip them. What's an easy way to do that?

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

Angular html:

角HTML：

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

回答by Utopik

jQuery is about 40 times SLOWER, please do not use jQuery for that simple task.

jQuery 大约是 SLOWER 的 40 倍，请不要将 jQuery 用于这个简单的任务。

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

usage :

用法 ：

var plain_text = htmlToPlaintext( your_html );

---

---

With angular.js :

使用 angular.js ：

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

use :

用 ：

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

回答by Davy R

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

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

angular.element

wraps a raw DOM element or HTML string as a jQuery element (If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite.")

角元素

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

So you simply could do:

所以你可以这样做：

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

Usage:

用法：

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

回答by Khyati Acharya

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

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

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

回答by Prasanna Sasne

<div ng-bind-html="myText"></div>No need to put into html {{}} interpolation tags like you did {{myText}}.

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

and don't forget to use ngSanitize in module like e.g. var app = angular.module("myApp", ['ngSanitize']);

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

and add its cdn dependency in index.html page https://cdnjs.com/libraries/angular-sanitize

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

回答by Olivier C

You want to use the built-in browser HTML strip for that instead of applying yourself a regexp. It is more secure since the ever green browser does the work for you.

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

The reason for wrapping it in an self-executing function is for reusing the element creation.

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

回答by Hung Vu

You can use ng-bind-html, don't forget to inject $sanitize service into your module Hope it helps

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

回答by Sandip Jana

Use ng-bind-html this is only proper and simplest way

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

回答by pixelbyaj

Use this function like

使用此功能，如

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

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

Fiddle

小提琴