remarkablemark/html-react-parser

ability to use htmlparser2 xmlMode

rburgst opened this issue · 6 comments

Expected Behavior

valid xhtml should be properly parsed. For that to work with htmlparser2 you need to pass

const options = {xmlMode: true}

Actual Behavior

nesting is all wrong

Steps to Reproduce

try to parse a more complicated xhtml snippet that contains scripts, noscript, comments and html5 audio tags

Reproducible Demo

https://repl.it/@rburgst/html-react-parser

Environment

  • Version: 0.10.5
  • Platform: node
  • Browser: N/A

The reason the nesting is wrong is because the self-closing syntax (/>) is used on non-void HTML elements:

<div class="wp-playlist-next"/>
<div class="wp-playlist-prev"/>

I recommend validating your HTML markup and updating your JSFiddle. I would also recommend testing your input by rendering the markup server-side. See example.

Question: are you using html-react-parser on the server-side (Node.js) or client-side (browser)? Depending on your environment, there may be slight differences in HTML to DOM parsing.

I am using it server side (gatsby) for rewriting the html received from wordpress. This markup is generated by wordpress if you create an audio playlist. Note that I ran this code through html sanitizers (see #124) and they did not change those tags.

I reviewed your repl.it and updated mine, but the nesting is still wrong. I understand that your point is that this is invalid HTML and I should change it but I wont be able to change what wordpress is giving me. I have validated that when using htmlparser2 with xmlMode: true a correct looking DOM is produced. So I would very much appreciate some way to pass these options to the parser.

Please review #161

looks great!

Published 0.12.0:

npm:

npm i -S html-react-parser@0.12.0

yarn:

yarn add html-react-parser@0.12.0