ability to use htmlparser2 xmlMode
rburgst opened this issue · 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.
looks great!