将 Html 转换为像字符串一样显示

Posted 2023-02-19

【中文标题】将 Html 转换为像字符串一样显示

【英文标题】：Convert Html to show like a String

【发布时间】：2022-01-11 14:30:14

【问题描述】：

我正在插入来自QUILL text editor 的数据，该数据以 html 格式存储。当我访问数据以在某处显示它与 HTML 相同时，我需要将其显示为普通文本。

<div class="card p-3 mb-3" [innerHTML]="mcq.question ">

来自数据库的 JSON：

0:
answer: "<p>mcq-1 A</p>"
question: "<p>mcq-1\tQ</p>"

【参考方案1】：

首先想到的是 HTML 是无效的。你确定它的格式正确吗？

另一种可能性：您是否尝试过使用DomSanitizer 将 HTML 标记为安全？根据使用的标签类型，Angular 可能会阻止其呈现以防止 XSS 攻击。

注意：仅当您 100% 确定 HTML 是安全的时才执行此操作。

【讨论】：

我会让它变得简单...我正在获取 HTML 格式的 api 数据。所以 HTML 必须像在浏览器中一样执行才能显示在我的 div 中。就是这样

【参考方案2】：

这个函数可以完成工作：

function decodeSpecialEntitiesHtml(html) 
  const str = document.createElement("textarea");
  str.innerHTML = html;
  return str.value;


var html = '<p>mcq-1 A</p>'

document.getElementById('withoutFunction').innerText = html;
document.getElementById('withFunction').innerText = decodeSpecialEntitiesHtml(html);

<label>without func:</label><div id="withoutFunction"></div>
<br>
<label>with func:</label><div id="withFunction"></div>
<br>

所以你可以像这样使用它：

<div class="card p-3 mb-3" [innerText]="decodeSpecialEntitiesHtml(mcq.question)">

因为您希望 HTML 表现得像文本。所以基本上它是一个看起来像 html 的文本。所以用innerText绑定它。

---

打字稿

对打字稿友好的功能将是：

public decodeSpecialEntitiesHtml(html) 
  const str = document.createElement("textarea");
  str.innerHTML = html;
  return str.value;

并在模板中使用它：

<div [innerText]="decodeSpecialEntitiesHtml(serverHtmlResponse)"></div>

【讨论】：

这些 javascript 在 Angluar 中引发错误

已更新。 @mohanarangan

不适合我...我从 Http 获得的数据本身就是一个 HTML .. 问题："<p>sdfsdtryt</p>" 像这样