Динамически исправлять/исправлять неверный HTML в Javascript

#javascript #html #dom #html-parsing

Вопрос:

В настоящее время я пишу программу, которая работает очень похоже на редактор форматированного текста, способ вывода моего HTML-кода неверен и похож на этот:

 lt;spangt;This is a lt;em class="test"gt;testlt;/spangt; titlelt;/emgt;  

Google Chrome отображает этот неверный HTML как действительный HTML, который выглядит следующим образом

 lt;spangt;This is a lt;em class="test"gt;testlt;/emgt;lt;/spangt;lt;em class="test"gt; titlelt;/emgt;  

Я хочу найти способ, которым Google Chrome (или анализатор, который выдает те же результаты) преобразует поврежденный HTML в этот действительный HTML, чтобы я мог отображать этот действительный HTML вместо того, чтобы позволять каждому браузеру использовать свои собственные «методы восстановления HTML», которые могут вызвать проблемы совместимости. Я видел такие программы, как HtmlAgilityPack, но, похоже, это для .СЕТЬ, и я использую Javascript.

Честно говоря, я понимаю, что для этого мне следует опубликовать свой собственный код, но я действительно понятия не имею, с чего начать динамическое исправление/исправление неверного HTML, и предполагаю, что существует какой-то стандарт исправления или библиотека (мой пример тоже был основан только на двух слоях, он может быть намного глубже), но я ничего не смог найти.

Любая помощь будет весьма признательна.

Ответ №1:

Хотя это не устраняет никакой перекрестной совместимости исправления HTML из-за того, что каждый браузер имеет свою собственную реализацию, я обнаружил, что могу использовать API DOMParser для доступа к исправленному HTML.

 const dom = new DOMParser().parseFromString(  'lt;spangt;This is a lt;em class="test"gt;testlt;/spangt; titlelt;/emgt;',  'text/html' )  

Это позволило мне затем запросить DOMParser и получить исправленный HTML с помощью

 const html = dom.querySelector("body").innerHTML