如何显示带有 JavaScript 包括 <p> 标签的段落文本？

Question

我是 JavaScript 和 reactjs 的新手。我有一个包含一些段落标记的文本，例如

换行符和...来自带有 CKEDITOR 的文本区域。如何在 html 标签中显示保存的文本？例如我想显示这段文字：

myString=<p>Cumque et blanditiis magnam optio amet. Eum eos et et et sit autem optio. Asperiores fuga iure quis sequi voluptas laboriosam et.</p>
<div className={'myclass'}>myString</div>

在 html 标签中？

Answer 1

为此使用 dangerouslySetInnerHTML :

<div className={'myclass'} dangerouslySetInnerHTML={{__html: myString}}/>

Answer 2

清除其 html 标签或其他恶意 javascript 代码的字符串的过程称为清理。

一种方法是使用reactjs的

dangerouslySetInnerHTML

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. For example:

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

但我会推荐使用 DomPurify or SanitizeHtmlReact

这样的库

因为它们更灵活，而且有很多选择。

查看他们的示例和演示以获取更多信息

Answer 3

为此，我们可以编写一个方法来接受字符串并将 HTML 特殊字符替换为 like

var charMap ={
 '<' : '&lt; ',
 '>' : '&gt'
 }`

如何显示带有 JavaScript 包括 <p> 标签的段落文本？

How to show paragraph text with JavaScript including <p> tags?

html

javascript

paragraph

reactjs