从数据库打印带有 html 标签的文本 - Javascript答案

【问题标题】：Print text with html tags from database - Javascript从数据库打印带有 html 标签的文本 - Javascript
【发布时间】：2018-04-16 09:49:02
【问题描述】：

我在我的 React 应用程序中使用 CKEditor 将用户内容保存到 Firebase 数据库中。内容按我的意愿保存（例如，使用 html 标签 "<p>contentheheheh</p>\n" ) 但是当我想获取数据时就会出现问题。

作为获取的结果，假设我得到带有 html 标签的文本，而不是“转换”成粗体或斜体。

当我进入 Chrome 控制台并检查元素时，我看到如下内容：

<td>&lt;p&gt;I am&amp;nbsp;&lt;strong&gt;testing&amp;nbsp;&lt;/strong&gt;&lt;em&gt;text&lt;/em&gt;&lt;/p&gt;

问题是我之前在 Laravel 或 Symphony 中使用过“原始”数据库输入，但我不知道如何在 javascript 中进行操作。我试图在谷歌和堆栈中寻找它，但老实说我失败了，因为我什至不知道到底是什么问题，因为“在 javascript 中从 db 获取原始数据”并没有像我想象的那样工作。

提前感谢您的任何建议。

附：我知道在 Jquery 中有这样的东西：

var text = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = $('<textarea/>').html(text).text();
alert(decoded);

但我不知道如何用纯 javascript（或 ES6）编写。

【问题讨论】：

标签： javascript html reactjs parsing decode

【解决方案1】：

好吧，在我问这个问题之前，我整晚都在解决这个问题，就在我问这个问题之后，我设法解决了这个问题。

我从 npm 包安装了“he”库（npm install he）
我安装了“html-react-parser”（npm install html-react-parser）。

第一个用于从数据库中解码 html。第二个是将这个html写入jsx元素。

例子：

let text = he.decode(props.tdData[item]);
return (<td>{Parser(text)}</td>);

这两个库为我完成了它，它可以按我的意愿工作。

感谢您提出的任何意见，案件已结案:)

【讨论】：

【解决方案2】：

你可以用正则替换来做到这一点：

var text = '&lt;p&gt;I am&amp;nbsp;&lt;strong&gt;testing&amp;nbsp;&lt;/strong&gt;&lt;em&gt;text&lt;/em&gt;&lt;/p&gt;';

var decoded = text.replace(/"&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, "\"");

【讨论】：

我在 CMS 系统中使用 ckeditor，我认为我什至不想像这样“解码”。我的意思是我需要“替换”CKEditor 中存在的每个标签，对吧？还是我错了？
是的，没错。事实是，这是更长的版本，但我尝试过的版本。您可以制作等效对的映射并从接受匹配对的函数创建正则表达式（仍然需要映射所有符号）
是的，那可能会很痛苦 :D 谢天谢地，有“他”图书馆为我做了这件事 :)
酷，很高兴你找到了解决方案：D Cheers

【解决方案3】：

可能（没有代码示例，我真的不知道）发生的原因不是来自获取，而是来自渲染。

默认情况下，react 在渲染组件时会转义 html 标签。

为了避免转义和设置组件的 html，请使用 dangerouslysetinnerhtml ( https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)。

【讨论】：

我读到了“危险的..”，许多人声称这很危险。他们建议改用“html-react-parser”。要解码存储在 db 中的 html，我使用“he”库，也非常好用且简单。我将在 5-10 分钟内发布我所做的事情。不过谢谢你的建议！
不客气。是的，当然根据文档，它可能会暴露安全风险，这取决于您执行获取部分的方式以及 db 的填充方式。恕我直言，应该避免关于 db 中的内容以及 js 如何与 db 对话的 xss 风险。当然，您的最终解决方案更安全，但它仍然会根据服务器端检查（在此特定场景中）解码并解析应该“已经准备好”用于 dom 的东西。