parsing & wrapping HTML strings with React components

Question

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)?

@AndrewLi yup! Exactly why I said I don't want to. I don't want Zalgo to find me :) — tdc
– tdc, Commented Mar 14, 2017 at 22:53

MattYao · Accepted Answer · 2017-03-14 23:00:38Z

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:

Convert html string to React component nodes
Replace the Children of an Element

answered Mar 14, 2017 at 23:00

MattYao

2,55518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

parsing & wrapping HTML strings with React components

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related