DOMParser() źle parsuje string

0

Używam takiego kodu do tworzenia elementów DOM na podstawie stringa:

function getDOMElementFromString(s) {
    let element = new DOMParser().parseFromString(s, 'text/html');
    return element.body.firstChild;
}

Na wejściu podaję:

<p style="text-align: left;">
	<a href="/images/fx/max/295647" class="swipebox" rel="gallery-0" style="vertical-align: middle; margin: auto; display: block; clear: both;">
		<img class="internal-image aligncenter" style="vertical-align: middle; margin: auto; display: block;" title="Split payment - przebieg zapłaty" src="/images/fx/max,590,0/295647" alt="Split payment - na czym polega?" data-image-id="274609">
		<div class="image-overlay" style="height: 308px;">
			<div>
				<i class="fa fa-search"/>
			</div>
		</div>
	</a>
</p>

Ale niestety jako element otrzymuję:

<p style="text-align: left;">
	<a href="/images/fx/max/295647" class="swipebox" rel="gallery-0" style="vertical-align: middle; margin: auto; display: block; clear: both;">
	<img class="internal-image aligncenter" style="vertical-align: middle; margin: auto; display: block;" title="Split payment - przebieg zapłaty" src="/images/fx/max,590,0/295647" alt="Split payment - na czym polega?" data-image-id="274609">
	</a>
</p>

Czyli obcina mi diva pod obrazkiem. Dlaczego? Jak temu zaradzić?

2

Podobny efekt jest w inspektorze.

Masz:

  • niedomknięty tag I,
  • DIV-y jako dzieci P (to podobno niepoprawne), zamień na SPAN-y.
0

wrzuciłem to w dev toolsy w Chrome i się bawię i u mnie są jeszcze większe cuda. Podwójne a.

kurczę, przypuszczam, że może to być kwestia specyfikacji czy to HTMLa, czy to samego parsera, że parsuje to w specyficzny sposób. Na Firefoksie podobny output jest.

Ale czemu tak się dzieje? Próbowałem modyfikować lekko ten kod, ale i tak czy siak, kończyło się na czymś podobnym do tego (ew. jak zamieniłem testowo a na article, to parsowało się tak, jak w kodzie).

screenshot-20200605142633.png

1 użytkowników online, w tym zalogowanych: 0, gości: 1