Alex Alex - 7 months ago 68
PHP Question

How to make HTML5 work with DOMDocument?

I'm attempting to parse HTML code with DOMDocument, do stuff like changes to it, then assemble it back to a string which I send to the output.

But there a few issues regarding parsing, meaning that what I send to DOMDocument does not always come back in the same form :)

Here's a list:


  1. using ->loadHTML:


    • formats my document regardless of the
      preserveWhitespace
      and
      formatOutput
      settings (loosing whitespaces on preformatted text)

    • gives me errors when I have html5 tags like
      <header>
      ,
      <footer>
      etc. But they can be supressed, so I can live with this.

    • produces inconsistent markup - for example if I add a
      <link ... />
      element (with a self-closing tag), after parsing/saveHTML the output will be
      <link .. >


  2. using ->loadXML:


    • encodes entities like
      >
      from
      <style>
      or
      <script>
      tags:
      body > div
      becomes
      body &gt; div

    • all tags are closed the same way, for example
      <meta ... />
      becomes
      <meta...></meta>
      ; but this can be fixed with an regex.




I didn't try HTML5lib but I'd prefer DOMDocument instead of a custom parser for performance reasons




Update:



So like the Honeymonster mentioned using CDATA fixes the main problem with loadXML.

Is there any way I could prevent self closing of all empty HTML tags besides a certain set, without using regex?

Right now I have:

$html = $dom->saveXML($node);

$html = preg_replace_callback('#<(\w+)([^>]*)\s*/>#s', function($matches){

// ignore only these tags
$xhtml_tags = array('br', 'hr', 'input', 'frame', 'img', 'area', 'link', 'col', 'base', 'basefont', 'param' ,'meta');

// if a element that is not in the above list is empty,
// it should close like `<element></element>` (for eg. empty `<title>`)
return in_array($matches[1], $xhtml_tags) ? "<{$matches[1]}{$matches[2]} />" : "<{$matches[1]}{$matches[2]}></{$matches[1]}>";
}, $html);


which works but it will also do the replacements in the CDATA content, which I don't want...

Answer

Unfortunately, or possibly fortunately, domdocument is designed to not try to preserve formatting from the original document. This is to make the parser's internal state easier to manage by keeping all elements the same style. Afaik most parsers will create a tree representation in memory and not worry about the textual formatting until the user requests such. This is why your self closed tags are output with separate closing tags. The good news is that it doesn't matter.

As to style tags and script tags getting <> converted to &lt;&gt;, you may be able to avoid the conversion by surrounding the contents of the element in question with the recommended cdata tags thusly:

<style>
  /*<![CDATA[*/
    body > div {
      width: 50%;
    }
  /*]]>*/
</style>

The comment /* */ around the cdata declarations are to allow for broken clients which don't know about cdata sections and instead treat the declarations as CSS code. If you're using the document internally only then you may omit the /* */ comment surrounds and have the cdata declaration only. You may encounter issues with the aforementioned broken clients if you manipulate the document and then send it to the browser without checking to ensure the /* */ comments are retained; I am unsure whether domdocument will retain these or not.

Comments