如何使用JavaScript显示段落文字，包括 <p> 标签？

Question

i`m new with JavaScript and reactjs . i have a text that contain some paragraph tags like

newline and ... from a textarea with CKEDITOR. how can i show saved text in a html tag? for example i want to show this text :

 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> 

in a html tag?

Answer 1

为此，请危险地使用SetInnerHTML ：

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

Answer 2

The process of cleaning a string of its html tags or other malicious javascript code is called sanitization.

One method is to use reactjs's

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 · Second'};
}

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

But I will recomend using libraries like DomPurify or SanitizeHtmlReact

because they are more flexible and has many options.

Check their examples and demos for more info

Answer 3

For this, we can write a method to accept String and replace HTML special character to like

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