I am currently writing a program that works very similar to a rich text editor, the way my HTML code is outputted is invalid and similar to this:
<span>This is a <em class="test">test</span> title</em>
Google Chrome renders that invalid HTML as valid HTML which looks like this
<span>This is a <em class="test">test</em></span><em class="test"> title</em>
I want to find the way Google Chrome (or a parser that outputs the same results) converts the broken HTML into that valid HTML so I can render this valid HTML instead of letting each browser use their own "HTML repairing techniques" which could cause compatability problems. I've seen programs such as HTMLAgilityPack but that seems to be for .NET and I'm using Javascript.
Honestly, I understand I should post my own code to do this but I really have no idea where to even start at dynamically correcting/repairing the invalid HTML and assume there's some sort of correction standard or library (My example was only based on two layers too, it could go much deeper) but I haven't been able to find anything.
Any assistance would be greatly appreciated.
Albeit this doesn't fix any cross-compatibility of HTML repairing due to each browser having their own implementation, I found I could use the DOMParser API to access the corrected HTML.
const dom = new DOMParser().parseFromString(
'<span>This is a <em class="test">test</span> title</em>',
'text/html'
)
This allowed me to then query the DOMParser and get the corrected HTML with
const html = dom.querySelector("body").innerHTML