php - w3schools - ¿Cómo hacer funcionar HTML5 con DOMDocument?

video tag play javascript

Question

Estoy intentando analizar código HTML con DOMDocument, hacer cosas como cambios en él y luego volver a ensamblarlo en una cadena que envío a la salida.

Pero hay algunos problemas relacionados con el análisis, lo que significa que lo que envío a DOMDocument no siempre vuelve de la misma forma :)

Aquí hay una lista:

1. utilizando ->loadHTML :

   • formatea mi documento independientemente de la configuración de preserveWhitespace y formatOutput (perdiendo espacios en blanco en texto preformateado)
   • me da errores cuando tengo etiquetas html5 como <header> , <footer> etc. Pero pueden suprimirse, por lo que puedo vivir con esto.
   • produce un marcado incoherente; por ejemplo, si agrego un elemento <link ... /> (con una etiqueta de cierre automático), después de analizar / saveHTML, la salida será <link .. >

2. utilizando ->loadHTML :

   • codifica entidades como > de las etiquetas <style> o <script> : body > div convierte en body > div body > div
   • todas las etiquetas se cierran de la misma manera, por ejemplo, <meta ... /> convierte en <meta...></meta> ; pero esto se puede arreglar con una expresión regular.

No probé HTML5lib pero preferiría DOMDocument en lugar de un analizador personalizado por razones de rendimiento

Actualizar:

Así como el Honeymonster mencionado usando CDATA corrige el problema principal con loadXML.

¿Hay alguna manera de evitar el cierre automático de todas las etiquetas HTML vacías además de un conjunto determinado, sin usar expresiones regulares?

Ahora mismo tengo:

$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);

que funciona pero también hará los reemplazos en el contenido CDATA, que no quiero ...

Answer 1

Al inicializar domDocument, haga lo siguiente:

$dom = new DOMDocument(5, ''UTF-8'');

Answer 2

Desafortunadamente, o posiblemente afortunadamente, domdocument está diseñado para no intentar preservar el formato del documento original. Esto es para facilitar la administración del estado interno del analizador manteniendo todos los elementos en el mismo estilo. Afaik la mayoría de los analizadores creará una representación de árbol en la memoria y no se preocupará por el formato textual hasta que el usuario lo solicite. Esta es la razón por la que sus etiquetas cerradas automáticamente se envían con etiquetas de cierre separadas. La buena noticia es que no importa.

En cuanto a las etiquetas de estilo y las etiquetas de secuencia de comandos, se convierten <> &lt;&gt; , puede evitar la conversión rodeando el contenido del elemento en cuestión con las etiquetas de cdata recomendadas:

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

El comentario /* */ alrededor de las declaraciones de cdata es para permitir clientes rotos que no conocen las secciones de cdata y en su lugar tratan las declaraciones como código CSS. Si está utilizando el documento solo de forma interna, puede omitir los alrededores /* */ comment y tener solo la declaración de cdata. Es posible que tenga problemas con los clientes rotos mencionados anteriormente si manipula el documento y luego lo envía al navegador sin verificar que los comentarios /* */ se conserven; No estoy seguro de si domdocument conservará estos o no.

Answer 3

Probé tanto con html5lib como con html5php pero ninguno de los dos trabajó con el HTML que me proporcionaron. Una alternativa que pudo analizar el HTML fue: https://github.com/ivopetkov/html5-dom-document-php

La clase principal extiende el DomDocument nativo de PHP.

Answer 4

Si desea admitir HTML5, no toque DOMDocument en absoluto.

Actualmente la mejor opción parece ser https://github.com/Masterminds/html5-php

Anteriormente, la mejor opción era https://github.com/html5lib/html5lib-php pero como dice la descripción, está "actualmente sin mantenimiento". Y este ha sido el estado desde octubre de 2011, así que no aguanto más la respiración.

No he usado html5-php en producción, por lo que no puedo proporcionar ninguna experiencia del mundo real al respecto. He utilizado html5lib-php en producción y diría que está analizando correctamente los documentos bien formados, pero tiene errores inesperados con algunos errores de sintaxis simples. Por otro lado, parece implementar correctamente el algoritmo de la agencia de adopción y algunos otros casos extraños de esquina. Si aún se mantuviera html5lib-php , todavía lo preferiría. Sin embargo, como están las cosas actualmente, preferiría usar html5-php y posiblemente ayudar a corregir los errores restantes allí.

Answer 5

Utilice html5lib . Puede analizar html5 y producir un DOMDocument. Ejemplo:

require_once ''/path/to/HTML5/Parser.php'';
$dom = HTML5_Parser::parse(''<html><body>...'');

Documentation