时间戳

首页 > 解决方案 > ng-bind-html 删除 < 之后的内容（小于号）

javascript - ng-bind-html 删除 < 之后的内容（小于号）

问题描述

我正在使用角度 v1.5.6。我有一些用户输入了 html 数据以及存储在数据库中的特殊字符。为了显示，

var txt = "<span class='txt_bold'> content with <lessthan signs<span> <span>";

var txt1 = "<span class='txt_bold'> content with <4 lessthan >greaterthan signs <span>";

当我在 ng-bind-html 指令中添加以上两行时，我得到如下输出。

txt : content with 
txt1 : content with <4 lessthan >greaterthan signs

正如我们所见，<（小于）符号之后的单词txt被指令删除。我尝试了以下线程中提供的解决方案。但是，它们都没有为我工作以保持 html css 效果正常工作。

  1. ng-bind-html 部分工作超出预期
  2. 将 HTML 插入视图

任何提示将不胜感激。

标签： javascriptangularjsescapingspecial-charactershtml-sanitizing

解决方案

<span class='txt_bold'> content with <lessthan signs<span> <span>

正如我们所见，txt 中 <(小于) 符号后的单词被指令删除

这是不正确的。该字符串实际上被解析为：

<span class="txt_bold">
  content with
  <lessthan signs<span>
    <span></span>
  </lessthan>
</span>

<lessthan没有被删除；它被解析为<lessthan>标签。它没有被删除；它被渲染为空。

要逃避解析，请使用html 实体：

&lt;lessthan

有关更多信息，请参阅MDN Web API 参考 - innerHTML 操作细节

推荐阅读