angularjs输出纯文本而不是html

Posted 2023-03-05

【中文标题】angularjs输出纯文本而不是html

【英文标题】：angularjs to output plain text instead of html

【发布时间】：2013-06-21 18:49:53

【问题描述】：

我有一些这样的文字：

<span>My text</span>

我想不带标签显示：

My text

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

Angular html：

<div>myText | htmlToPlaintext</div>

【问题讨论】：

你已经在 AngularJS 下标记了这个，所以我假设你想使用 AngularJS 显示文本。如果是这样，此文本是否在模型中？您使用哪个 html 标签来显示模型的内容？

@callmekatootie 我根据 Abhishek 给出的答案创建了一个过滤器。

我看到了，他的解决方案使用了 jQuery - 你已经在 AngularJS 下标记了这个，我觉得你可以在 AngularJS 中做到这一点而不使用 jQuery，只要你能在你的问题中提供更多信息- 特别是您希望在视图中显示文本的地方...

@callmekatootie 我添加了一个我在 Angular 中所做的示例

【参考方案1】：

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

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>  

【讨论】：

我其实更喜欢 String(text).replace(/]+>/gm, '')。我多年来一直在使用它，没有任何问题。

jQuery 慢了 40 倍，但你仍然获得 8000 ops/s，因此不使用 jQuery 是过早的优化。

我永远不会添加 jQuery 依赖项来将 html 转换为文本，但如果我的项目已经使用了 jQuery，我会选择 jQuery 解决方案，因为我认为自定义编写的正则表达式可读性较差，测试较少并且不太可靠。您的正则表达式是否可以防止all possible forms of XSS？

使用 DOM 引擎涵盖了更多的情况，这个简单的替换那些不是例子：这里的一些代码 ’ “ ”

你应该在那里添加一个空检查，否则它会输出“null”：return text ? String(text).replace(/<[^>]+>/gm, '') : "";

【参考方案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>

【讨论】：

我也会避免这种方法；可能不会像完整的 jQuery 那样耗时，但肯定比接受的答案慢得多。

我建议将您的文本包装在一个元素中，否则像“hi”这样的普通旧字符串将返回一个空字符串angular.element('<div>'+text+'</div>').text();

如果你在一个指令的链接函数中，你可以简单地做 element.text() 0.o

我更喜欢这个解决方案而不是使用正则表达式，至少在速度不重要的情况下。它更正确，实际上会将 html 转换为纯文本，而不是符号、特殊实体等。

如何显示预览，而不是显示纯文本（它正在工作）。但我需要在发布问题或答案（包括图像）时显示堆栈溢出显示等预览

【参考方案3】：

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

app.filter('htmlToPlaintext', function()

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

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

【讨论】：

为代码添加一些格式和一些见解，这有助于生成更好的答案。

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

应否决的低质量答案与应删除的非答案之间存在差异。请参阅You're doing it wrong: A plea for sanity in the Low Quality Posts queue。

如何显示预览，而不是显示纯文本（它正在工作）。但我需要在发布问题或答案（包括图像）时显示堆栈溢出显示等预览

【参考方案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;
());

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

【讨论】：

如何显示预览，而不是显示纯文本（它正在工作）。但我需要在发布问题或答案（包括图像）时显示堆栈溢出显示等预览

将 $document[0] 更改为文档，它对我有用！谢谢

【参考方案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 依赖项

【参考方案6】：

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

【参考方案7】：

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

【讨论】：

欢迎来到 Stack Overflow。请添加更多详细信息以进行澄清。一旦你有足够的reputation，你就可以改为comment on any post;，provide answers that don't require clarification from the OP。

【参考方案8】：

像这样使用这个函数

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

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

Fiddle

【讨论】：

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

Rev 标记答案是 javascript，如果我使用 jquery 做到这一点，会有什么不同

您的解决方案与 OP 的要求不兼容。他已经在 angularjs 上构建了他的应用程序。 jquery 是一个不同的框架。

+1 我在这里没有看到任何 jQuery... wtf？另一个问题是@Abjo 的方法扩展了 String 原型中的构建。一些开发人员选择对此感到愤怒。