I have to write some tests to validate some email html, so I'm using DomXPath to roughly check that dynamic data is correctly displayed in the expected position.
I've built the html using an online visual builder (i.e.: Sendinblue) and checked with another online tool that the generated code is valid/supported for emails, but still getting the error below when loading email body with loadHTML().
The error:
DOMDocument::loadHTML(): htmlParseStartTag: misplaced <html> tag in Entity
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css" emogrify="no">#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
<style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} } </style>
<style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important } .r1-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r2-i { background-color: #f3f3f3 !important } .r3-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r4-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r5-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r6-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r7-o { border-style: solid !important; width: 100% !important } .r8-i { padding-left: 0px !important; padding-right: 0px !important } .r9-i { padding-bottom: 15px !important; padding-top: 15px !important } .r10-c { box-sizing: border-box !important; text-align: right !important; valign: top !important; width: 100% !important } .r11-o { border-style: solid !important; margin: 0 0 0 auto !important; margin-top: 30px !important; width: 100% !important } .r12-i { background-color: #ffffff !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; text-align: right !important } .r13-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 40px !important; width: 100% !important } .r14-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r15-o { border-bottom-width: 0px !important; border-left-width: 0px !important; border-right-width: 0px !important; border-style: solid !important; border-top-width: 0px !important; margin: 0 auto 0 0 !important; width: 100% !important } .r16-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-top: 10px !important; text-align: left !important } .r17-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r18-o { background-size: cover !important; border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r19-i { background-color: #ffffff !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; text-align: left !important } .r20-o { border-style: solid !important; margin: 0 auto 0 0 !important; margin-bottom: 0px !important; margin-top: 0px !important; width: 100% !important } .r21-i { padding-bottom: 0px !important; padding-top: 15px !important; text-align: left !important } .r22-o { border-style: solid !important; margin: 0 0 0 auto !important; margin-bottom: 0px !important; margin-top: 0px !important; width: 100% !important } .r23-o { border-style: solid !important; margin: 0 0 0 auto !important; width: 100% !important } .r24-i { background-color: #0887c5 !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; text-align: center !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
<!--[if !mso]><!-->
<style type="text/css" emogrify="no"> </style>
<!--<![endif]-->
<style type="text/css">p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #0092ff; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5 } .default-button { border-radius: 4px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; width: 50% } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">a:link{color: #0092ff; text-decoration: underline;}</style>
</head>
<body bgcolor="#f3f3f3" text="#3b3f44" link="#0092ff" yahoo="fix" style="background-color: #f3f3f3;">
...
Tried to remove the doctype and the error changed to
DOMDocument::loadHTML(): error parsing attribute name in Entity, line: 2
Not really sure what this is about...
Suppressing the warnings with @ made the test run but fail, and since I'm looking for specific tag ids with getElementById that I know are present, I just outputted the loaded html with saveHTML() to file, but here's the content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org=
/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body><p>=0A=0A </p>=0A <meta http-equiv='3D"Conte=' nt-type content='3D"text/html;' charset='3Dutf-8"'>=0A <meta http-equiv='=3D"X-UA-Compatible"' content='3D"IE=3Dedge"'>=0A <meta name='3D"format-=' detection content='3D"telephone=3Dno"'>=0A <meta name='3D"viewport"' co='ntent=3D"width=3Ddevice-width,' initial-scale='3D1.0"'>=0A <title>=
le>=0A <style type='3D"text/css"' emogrify='3D"no"'>#outlook a { padding=
:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .Ext=
ernalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div=
{ line-height: 100%; } table td { border-collapse: collapse; mso-line-heig=
ht-rule: exactly; } .editable.image { font-size: 0 !important; line-height:=
0 !important; } .nl2go_preheader { display: none !important; mso-hide:all =
!important; mso-line-height-rule: exactly; visibility: hidden !important; l=
ine-height: 0px !important; font-size: 0px !important; } body { width:100% =
!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margi=
n:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolati=
on-mode: bicubic; } a img { border:none; } table { border-collapse:collapse=
; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; t=
ext-align: left; } *[class=3D"gmail-fix"] { display: none !important; } =
tyle>=0A <style type=3D"text/css" emogrify=3D"no"> @media (max-width=
: 600px) { .gmx-killpill { content: ' \03D1';} } </style>=0A <style type='3D"text/css"' emogrify='3D"no"'>@media (max-width: 600px) { .gmx-killpill=
{ content: ' \03D1';} .r0-c { box-sizing: border-box !important; text-alig=
n: center !important; valign: top !important; width: 320px !important } .r1=
-o { border-style: solid !important; margin: 0 auto 0 auto !important; widt=
h: 320px !important } .r2-i { background-color: #f3f3f3 !important } .r3-c =
{ box-sizing: border-box !important; text-align: center !important; valign:=
top !important; width: 100% !important } .r4-o { border-style: solid !impo=
rtant; margin: 0 auto 0 auto !important; width: 100% !important } .r5-i { p=
adding-bottom: 20px !important; padding-left: 15px !important; padding-righ=
t: 15px !important; padding-top: 20px !important } .r6-c { box-sizing: bord=
er-box !important; display: block !important; valign: top !important; width=
: 100% !important } .r7-o { border-style: solid !important; width: 100% !im=
portant } .r8-i { padding-left: 0px !important; padding-right: 0px !importa=
nt } .r9-i { padding-bottom: 15px !important; padding-top: 15px !important =
} .r10-c { box-sizing: border-box !important; text-align: right !important;=
valign: top !important; width: 100% !important } .r11-o { border-style: so=
lid !important; margin: 0 0 0 auto !important; margin-top: 30px !important;=
width: 100% !important } .r12-i { background-color: #ffffff !important; pa=
dding-bottom: 10px !important; padding-left: 10px !important; padding-right=
: 10px !important; padding-top: 10px !important; text-align: right !importa=
nt } .r13-o { border-style: solid !important; margin: 0 auto 0 auto !import=
ant; margin-bottom: 40px !important; width: 100% !important } .r14-c { box-=
sizing: border-box !important; text-align: left !important; valign: top !im=
portant; width: 100% !important } .r15-o { border-bottom-width: 0px !import=
ant; border-left-width: 0px !important; border-right-width: 0px !important;=
border-style: solid !important; border-top-width: 0px !important; margin: =
0 auto 0 0 !important; width: 100% !important } .r16-i { padding-bottom: 10=
px !important; padding-left: 0px !important; padding-top: 10px !important; =
text-align: left !important } .r17-o { border-style: solid !important; marg=
in: 0 auto 0 0 !important; width: 100% !important } .r18-o { background-siz=
e: cover !important; border-style: solid !important; margin: 0 auto 0 auto =
!important; width: 100% !important } .r19-i { background-color: #ffffff !im=
portant; padding-bottom: 10px !important; padding-left: 10px !important; pa=
dding-right: 10px !important; padding-top: 10px !important; text-align: lef=
t !important } .r20-o { border-style: solid !important; margin: 0 auto 0 0 =
!important; margin-bottom: 0px !important; margin-top: 0px !important; widt=
h: 100% !important } .r21-i { padding-bottom: 0px !important; padding-top: =
15px !important; text-align: left !important } .r22-o { border-style: solid=
!important; margin: 0 0 0 auto !important; margin-bottom: 0px !important; =
margin-top: 0px !important; width: 100% !important } .r23-o { border-style:=
solid !important; margin: 0 0 0 auto !important; width: 100% !important } =
.r24-i { background-color: #0887c5 !important; padding-bottom: 10px !import=
ant; padding-left: 10px !important; padding-right: 10px !important; padding=
-top: 10px !important; text-align: center !important } body { -webkit-text-=
size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-ta=
ble { min-width: unset !important } .mobshow { height: auto !important; ove=
rflow: visible !important; max-height: unset !important; visibility: visibl=
e !important; border: none !important } .resp-table { display: inline-table=
!important } .magic-resp { display: table-cell !important } } </style>=0A =
<!--[if !mso]><!-->=0A <style type='3D"text/css"' emogrify='3D"n=' o> </style>=0A <!--<![endif]-->=0A <style type='3D"text/css"'>=
p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #0092ff; text-d=
ecoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-fami=
ly: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5 } .defaul=
t-button { border-radius: 4px; color: #ffffff; font-family: arial,helvetica=
,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; line=
-height: 1.15; text-decoration: none; width: 50% } .default-heading1 { colo=
r: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px } .def=
ault-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; fo=
nt-size: 32px } .default-heading3 { color: #1F2D3D; font-family: arial,helv=
etica,sans-serif; font-size: 24px } .default-heading4 { color: #1F2D3D; fon=
t-family: arial,helvetica,sans-serif; font-size: 18px } a[x-apple-data-dete=
ctors] { color: inherit !important; text-decoration: inherit !important; fo=
nt-size: inherit !important; font-family: inherit !important; font-weight: =
inherit !important; line-height: inherit !important; } .no-show-for-you { b=
order: none; display: none; float: none; font-size: 0; height: 0; line-heig=
ht: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed;=
visibility: hidden; width: 0; } </style>=0A <!--[if mso]>=0A =
<xml>=0A <o:OfficeDocumentSettings>=0A <o:AllowP=
NG/>=0A <o:PixelsPerInch>96</o:PixelsPerInch>=0A =
</o:OfficeDocumentSettings>=0A </xml>=0A <![endif]-->=0A =
<style type='3D"text/css"'>a:link{color: #0092ff; text-decoration: underli=
ne;}</style>=0A =0A </title>=0A =
<table cellspacing='3D"0"' cellpadding='3D"0"' border='3D"0"' role='3D"presen=' tation class='3D"nl2go-body-table"' width='3D"100%"' style='3D"background-color=' : width:>=0A <tr>=0A <td align="3D=" class='3D"r0-c"'>=0A <table cellspacing='3D"0"' cel='lpadding=3D"0"' border='3D"0"' role='3D"presentation"' width='3D"600"' class='3D"r1=' style='3D"table-layout:' fixed width:>=0A =
<tr>=0A <td valign='3D"top"' class='3D"r2-i"' style='=3D"background-color:'>=0A <table w='idth=3D"100%"' cellspacing='3D"0"' cellpadding='3D"0"' border='3D"0"' role='3D"pres=' entation>=0A <tr>=0A =
<td class='3D"r3-c"' align='3D"center"'>=0A =
<table cellspacing='3D"0"' cellpadding='3D"0"' bor='der=3D"0"' role='3D"presentation"' width='3D"100%"' class='3D"r4-o"' style='3D"tabl=' e-layout: fixed width:>=0A =
<!-- -->=0A <tr class='=3D"nl2go-responsive-hide"'>=0A =
<td height='3D"20"' style='3D"font-size:' line-height:>=
=C2=AD</td>=0A </tr>=0A =
<tr>=0A =
<td class='3D"r5-i"'>=0A =
<table width='3D"100%"' cellspacing='3D"0"' cellp='adding=3D"0"' border='3D"0"' role='3D"presentation"'>=0A =
<tr>=0A =
<th width='3D"50%"' valign='3D"top"' class='3D"r=' style='3D"font-weight:' normal>=0A =
<table cellspacing='3D"0"' cellpadding='3D"0"' border='3D"0"' role='3D"presentation"' width='3D"100%"' class='3D"r7-o"' style='3D"t=' able-layout: fixed width:>=0A =
<!-- -->=0A =
<tr>=0A =
<td valign='3D"top"' class='=3D"r8-i"'>=0A =
<table width='3D"100%"' cellspacing='3D"0"' cellpadding='3D"0"=' border='3D"0"' role='3D"presentation"'>=0A =
<tr>=0A =
<td cla='ss=3D"r3-c"' align='3D"center"'>=0A =
<table cellspacing='3D"0"' c='ellpadding=3D"0"' border='3D"0"' role='3D"presentation"' width='3D"300"' class='3D"=' r4-o style='3D"table-layout:' fixed width:>=0A =
=
<tr class='3D"nl2go-responsive-hide"'>=0A =
<td height='=3D"15"' style='3D"font-size:' line-height:>=C2=AD</td>=0A =
=
</tr>=0A =
<tr>=0A =
=
<td class='3D"r9-i"' style='3D"font-size:' line-height:> <a href="3D%22=" https: eb.png.webp target='3D"_blank"' style='3D"color:' text-decoration: un='derline;"'> <img src="3D%22https://www.arieteporteblindate.it/wp-content/upload=" s width='3D"300"' border='3D"0"' class='3D""' block width:></a> </td>=0A =
=
r>=0A =
</tr><tr class='3D"nl2go-responsive-hide"'>=0A =
=
<td height='3D"15"' style='3D"font-size:' line-height: x>=C2=AD</td>=0A =
</tr>=0A =
</table>=0A=
As you can see it is weirdly formatted, and there are a lot of '3D and = here and there that should be not.
Not sure if all of this is related to the warning I've suppressed.
Here's my DOM code:
$email = tests_retrieve_phpmailer_instance()->get_sent(0);
$dom = new DOMDocument();
$dom->loadXML($email->body);
$element = $dom->getElementById('date');