Parsing correctly formatted self closing tags causes nesting bug

[arriesbrendan]

Description

When parsing in elements like [<div /><div />, <path /><path />, etc] causes the program to nest the elements instead of placing them as siblings.

What should happen

html = "<path /><path />"
parse(html) = <path /><path /> OR <path></path><path></path>

What happens instead

html = "<path /><path />"
parse(html) = <path><path><path /><path />

Steps to Reproduce

Parse in any self closing tags back to back, the error doesn't happen when parsing a single tag only multiple in succession.

[remarkablemark]

This is expected behavior.

You may want to check out option htmlparser2 and try enabling xmlMode:

const parse = require('html-react-parser');

parse('<path /><path />', {
  htmlparser2: {
    decodeEntities: true,
    xmlMode: true
  }
});

However, note that this option is only available on the server-side (Node.js) and does not work on the client-side (browser).

See #158

[Protectator]

I'm using html-react-parser on the client side. What path(s) toward supporting parsing self-closing tags on the client-side do you see ?

[remarkablemark]

@Protectator There might not be an easy way to support parsing invalid self-closing tags on the client-side since we're using html-dom-parser, which relies on the native DOM parser.

If you're not using the replace option, my recommendation is to sanitize the HTML string and using React's dangerouslySetInnerHTML.

[remarkablemark]

Closing issue due to inactivity.