1

I am hitting an API endpoint, which returns the HTML for a blog post as a string. So lots of <p> tags, <img>, <span>, and <div> tags in the response string, with a non-inconsequential amount of element nesting.

in a react app, I want to parse this HTML string, and replace some of the HTML elements (images, paragraphs) with custom react components ( ie wrap an image tag in a lazy-load react component).

what is a good / clean way to do this? trying to parse HTML with regex seems to be an antipattern, and I'm not sure what other possible options there are. parse the string into traditional dom nodes, and then iterate through the collection?

currently I just render the html-as-string inside a react component using dangerouslySetInnerHTML.

What is a reliable, non-regex way to wrap html-as-a-string entities with React components, while maintaining the original order of the nodes (ie in a blog post)?

tdc
  • 5,174
  • 12
  • 53
  • 102
  • 3
    Don't parse HTML with RegEx or else [Zalgo will destroy you](http://stackoverflow.com/a/1732454/5647260) – Andrew Li Mar 14 '17 at 22:52
  • @AndrewLi yup! Exactly why I said I don't want to. I don't want Zalgo to find me :) – tdc Mar 14 '17 at 22:53

1 Answers1

2

Take a look at this module and see if it can help you: (https://www.npmjs.com/package/html-to-react). Basically, you can:

  1. Convert html string to React component nodes
  2. Replace the Children of an Element
MattYao
  • 2,495
  • 15
  • 21