Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ability to use htmlparser2 xmlMode #158

Closed
rburgst opened this issue May 30, 2020 · 6 comments · Fixed by #161
Closed

ability to use htmlparser2 xmlMode #158

rburgst opened this issue May 30, 2020 · 6 comments · Fixed by #161
Labels
feature New feature or request

Comments

@rburgst
Copy link

rburgst commented May 30, 2020

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
@remarkablemark
Copy link
Owner

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.

@rburgst
Copy link
Author

rburgst commented Jun 3, 2020

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.

@rburgst
Copy link
Author

rburgst commented Jun 3, 2020

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.

@remarkablemark
Copy link
Owner

Please review #161

@remarkablemark remarkablemark added the feature New feature or request label Jun 3, 2020
@rburgst
Copy link
Author

rburgst commented Jun 4, 2020

looks great!

@remarkablemark
Copy link
Owner

Published 0.12.0:

npm:

npm i -S html-react-parser@0.12.0

yarn:

yarn add html-react-parser@0.12.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants