Here is my input

<p>Hello/<p>

Aadafsf

<h1>H1 in hello</h1>

I write this from CKEditor from Admin side

This is the React result in front size

&lt;p&gt;Hello/&lt;p&gt;

Aadafsf

&lt;h1&gt;H1 in hello&lt;/h1&gt;

This is the result I would like

<p>Hello/<p>

Aadafsf

<h1>H1 in hello</h1>

Here is what I tried so far

1. Using `dompurify`

import {Parser} from "html-to-react";
import DOMPurify from "dompurify";

{Parser().parse(DOMPurify.sanitize(HTMLCONTENT))}

I tried this but I'm not getting the expected output.

2. Using `dangerouslySetInnerHTML`

I have the below HTML content:

<h2>This is Heading</h2><p>&lt;p&gt;&lt;/p&gt;</p><p>This is para.</p><p>&nbsp;</p><p><strong>This is Bold</strong></p><p>&nbsp;</p><ol><li><strong>dwsfdf</strong></li><li><strong>fdsfdf</strong></li></ol><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><figure class="media"><oembed url="https://youtu.be/rokGy0huYEA"></oembed></figure>

I used it like:

<div dangerouslySetInnerHTML={{__html: HTMLCONTENT}} />;

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T11:42:41.041Z

Actually, your mistake is not on the serialization, it is because there is a typo in your HTML.

The <p> tag is "closed" by a /<p> tag and not by a </p> !

So you need to update your HTML:

-  <p>Hello/<p>
+  <p>Hello</p>

Aadafsf

<h1>H1 in hello</h1>

Also, in order to display raw HTML in your component. React offer a function for that dangerouslySetInnerHTML.

But, take real care as this can open your site to attacks known as cross-site scripting (XSS).

Answer 2 · 2022-07-10T11:42:41.047Z

You could allow some tags you want like this

let clean = DOMPurify.sanitize('<div>hello</div>',{ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});

0

171

How to sanitized HTML in React?