0

I am getting below response from the API, and I want to convert it into proper html and would like to render it on dom, but it is rendering raw html and special characters.

example api response:

resp = {
  body: "<p>Cali Thirty Seven turned what appeared to be certain defeat into an exhilarating and much-deserved victory late Saturday afternoon at Gulfstream Park. She reasserted herself after relinquishing the lead to 8-5 favorite Stormy Victoria to successfully defend her title in the $100,000 Powder Break Stakes.</p>\r\n<p>"
}

In the react component I am rendering it in the following way:

<p
  className="newsDescription"
  dangerouslySetInnerHTML={{ __html:this.props.story.desp }}
/>

I tried to escape html but it is not working.

c-chavez
  • 7,237
  • 5
  • 35
  • 49
Kalashir
  • 1,099
  • 4
  • 15
  • 38
  • You need to replace the htmlentities `<` and `>` to turn that text back into html – charlietfl Dec 12 '18 at 15:17
  • You might find this useful: https://stackoverflow.com/questions/42361689/implement-html-entity-decode-in-react-js – Ana Liza Pandac Dec 12 '18 at 15:19
  • Is this your api? Why is it returning HTML escaped HTML? Can't think of a reason why would anyone want to do that ever. – Wanton Dec 12 '18 at 18:48
  • @c-chavez If `body` returned here is going to put to DOM as raw markup anyway I don't see what sanitizing has to do with it. If OP decodes that escaped HTML to HTML markup and inserts it to DOM and that HTML isn't sanitized same security problem are there. – Wanton Dec 13 '18 at 13:17
  • @c-chavez What has using `dangerouslySetInnerHTML` has to with anything I've said? I haven't talked about `React` at all, I talked about what api returns. You wrote before that api response is string containing html tags. Have you even look at the JSON OP posted? It's not string containing html tags, it's string containing html tags that are escaped with HTML escaping. My my whole question was why is it HTML escaped,meaning why does api return `

    ` as `<p&git;` instead just returning `

    ` etc. So maybe you misunderstood me?

     – Wanton Dec 13 '18 at 14:01

1 Answers1

0

You have to replace whatever html characters you have in your string to the corresponding tags. Since in your example you only have "&lt;p&gt; (which correspond to <p>) you can do this:

validate if this.props.story.desp has a value a is a string and then replace:

<span
  className="newsDescription"
  dangerouslySetInnerHTML={{ __html: this.props.story.desp.replace(/&lt;/g, '<').replace(/&gt;/g, '>')}}
/>

This will generate a <span> element with a <p> element (the paragraph element coming from your API) inside the <span> with your text. Also, notice that this will replace all occurrences for creating the paragraph tags.

Unfortunately there is no generic vanilla javascript function for replacing all possible tags.

Note that I changed the <p> tag to a <span> because block elements should not have other block elements inside. Have a look at this question in SO.

c-chavez
  • 7,237
  • 5
  • 35
  • 49