Question

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

作为抓取的结果，让我们说一下我得到的带有html标签的文字，而不是＆＃39;转换＆＃39;例如，用粗体或斜体。

当我进入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;

事情是我和'原始＆＃39;数据库之前在Laravel或Symphony中输入，但我不知道如何在javascript中进行操作。我试图在谷歌和堆栈中寻找它，但老实说我失败了，因为我甚至不知道究竟是什么问题，因为在javascript中从db获取原始数据＆＃39;并没有像我想象的那样工作。

感谢您提前获得任何建议。

P.S。我知道在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）来写这个。

Answer 1

您可以使用RegExp替换：

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, "\"");

Answer 2

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

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

要避免转义并设置组件的html，请使用dangerouslysetinnerhtml（ https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml）。

Answer 3

Okey所以我在问这个问题之前整晚都在解决这个问题，就在我这样做之后，我设法解决了这个问题。

我安装了＆＃39;他＆＃39;来自npm包的库（npm install he）
我安装了＆＃; html-react-parser＆＃39; （npm install html-react-parser）。

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

示例：

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

这两个库为我做了它，它就像我想要的那样工作。

感谢你提出的任何意见，案件已经结束：）

使用数据库中的html标签打印文本 - Javascript

3 个答案: