使用數據庫中的html標簽打印文本-Javascript

Question

我在我的React App中使用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中進行操作。 我試圖在google和堆棧中查找它，但老實說我失敗了，因為我什至不知道到底是什么問題，因為“從javascript中從db獲取原始數據”並沒有按照我的想象完全起作用。

感謝您提前提出任何建議。

PS我知道在Jquery中有這樣的事情：

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

但是我不知道如何用純JavaScript（或ES6）編寫此代碼。

Answer 1

您可以使用RegExp替換來做到這一點：

var text = '<p>I am <strong>testing </strong><em>text</em></p>';

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

Answer 2

可能（沒有我不能真正知道的代碼示例），發生情況的原因不是來自獲取，而是來自渲染。

默認情況下，渲染組件時react會轉義html標簽。

為避免轉義和設置組件的html，請使用dragonallysetinnerhtml（ https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml ）。

Answer 3

奧基（Okey），所以我在問這個問題之前整晚都在這個問題上度過，然后，我就設法解決了這個問題。

1. 我從npm軟件包安裝了“他”庫（npm安裝他）
2. 我安裝了“ html-react-parser”（npm安裝html-react-parser）。

第一個用於從數據庫解碼html。 第二個是將此HTML寫入jsx元素。

例：

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

這兩個庫為我做到了，它可以按我的意願工作。

感謝您的任何輸入，案例已關閉:)