Quelles fonctions pour parser du HTML ET modifier le contenu?

**Nixar** · 08/05/2012, 14h28

Bonjour à tous,

Je cherche à parser un string qui contient la sortie d'une page HTML. Mon but est de retrouver les <ul> qui sont elles-mêmes contenues dans des <ul> pour leur ajouter des <li></li> englobant (le WYSIWYG utilisé pour générer le HTML ne respecte pas la norme).

En résumé, j'ai quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<ul>
	<li>1 zone de rencontre en projet (env 300 hab) :</li>
	<ul>
		<li>Communication : posters, lettre, flyers</li>
		<li>Sensibilisation : radar pédagogique</li>
		<li>activités participatives avec les habitants :</li>
		<ul>
			<li>enquête stationnement,</li>
			<li>une réunion de lancement,</li>
			<li>un atelier-promenade,</li>
			<li>et 2 stands-projet.</li>
			<li>Réunions publiques.</li>
		</ul>
	</ul>
	<li>2 rues pour enfants le 15/06/11 et 5/10/11 soit :</li>
	<ul>
		<li>env 135 adultes et 250 enfants participants</li>
		<li>env 25/30 personnes impliquées</li>
		<li>env une dizaine d’activités proposées</li>
	</ul>
</ul>

et je souhaite ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<ul>
	<li>1 zone de rencontre en projet (env 300 hab) :</li>
	<li>
		<ul>
			<li>Communication : posters, lettre, flyers</li>
			<li>Sensibilisation : radar pédagogique</li>
			<li>activités participatives avec les habitants :</li>
			<li>
				<ul>
					<li>enquête stationnement,</li>
					<li>une réunion de lancement,</li>
					<li>un atelier-promenade,</li>
					<li>et 2 stands-projet.</li>
					<li>Réunions publiques.</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>2 rues pour enfants le 15/06/11 et 5/10/11 soit :</li>
	<li>
		<ul>
			<li>env 135 adultes et 250 enfants participants</li>
			<li>env 25/30 personnes impliquées</li>
			<li>env une dizaine d’activités proposées</li>
		</ul>
	</li>
</ul>

J'ai regardé du côté des RegEx, c'est assez compliqué et pas forcément adapté. Du coup je me tourne vers le parsing via la classe DOM Document de PHP mais je ne vois pas comment à la fois faire ma recherche de tags (<ul> fille dans mon cas) et en suivant modifier ces tags...

Avez-vous une idée?

Merci pour vos retours !

Nicolas

**rawsrc** · 08/05/2012, 15h12

Salut

Avec DOM, pour rechercher et extraire des tags on utilise DOMXPath, ensuite tu peux très bien faire toutes les modifs que tu veux sur le résultat obtenu.

**Nixar** · 08/05/2012, 15h48

Merci pour ta réponse. Si je reprends tout ça, voici ce que ça me donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
   // Load content
   $dom = new DOMDocument;
   $dom->loadHTML($html); 
 
   $xpath = new DOMXpath($dom);
 
 
   // Get all child ul
   $path = '//ul//ul';
   $uls = $xpath->query($path);

J'ai mes ul. Maintenant, je ne vois pas comment changer <ul></ul> par <li><ul></ul></li>...

Tu pourrais m'éclairer?

Merci !

**Nixar** · 08/05/2012, 16h23

Je suis parti sur quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Load content
   $dom = new DOMDocument;
   $dom->loadHTML($html); 
   // Clear all errors
   libxml_clear_errors();
 
   $xpath = new DOMXpath($dom);
 
 
   // Get all child ul
   $path = '//ul//ul';
   $uls = $xpath->query($path);
 
   for($i=0;$i<$uls->length;$i++) {
       $ul = $uls->item($i);
       $li_container = $dom->createElement('li');
       $li_container->appendChild($ul);
       $dom->replaceChild($li_container, $ul);
   }

Sauf que maintenant, j'ai une sorte d'erreur inconnue:

Fatal error: Uncaught exception 'DOMException' with message 'Not Found Error'

Je précise que mon HTML n'est malheureusement pas valide du tout... Il comporte des balises custom. C'est pour ça que j'ai désactivé les erreurs.

Peut-être qu'en utilisant un chargement XML pur?

Merci pour vos avis,

Nicolas

**rawsrc** · 08/05/2012, 18h54

Bon allez parce que c'est toi,
[mode=distributeur_de_code] :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
 
$xml = <<<'XML'
<ul>
   <li>1 zone de rencontre en projet (env 300 hab) :</li>
   <ul>
      <li>Communication : posters, lettre, flyers</li>
      <li>Sensibilisation : radar pédagogique</li>
      <li>activités participatives avec les habitants :</li>
      <ul>
         <li>enquête stationnement,</li>
         <li>une réunion de lancement,</li>
         <li>un atelier-promenade,</li>
         <li>et 2 stands-projet.</li>
         <li>Réunions publiques.</li>
      </ul>
   </ul>
   <li>2 rues pour enfants le 15/06/11 et 5/10/11 soit :</li>
   <ul>
      <li>env 135 adultes et 250 enfants participants</li>
      <li>env 25/30 personnes impliquées</li>
      <li>env une dizaine d’activités proposées</li>
   </ul>
</ul>
XML;
 
function nestUl($xml, $xpath)
{
   $dom = new DOMDocument();
   $dom->loadXML($xml);
 
   $dom_xpath = new DOMXPath($dom);
   $nodes = $dom_xpath->query($xpath);
 
   foreach($nodes as $node) {
      $li = $dom->createElement('li');
      $li->appendChild($node->cloneNode(true));
      $node->parentNode->replaceChild($li, $node);
   }
   return $dom->saveXML();
}
 
$xml = nestUl($xml, 'ul/ul');
$xml = nestUl($xml, '/ul/ul');
 
echo $xml;
 
?>

Et le résulat chez moi :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" ?> 
<ul>
   <li>1 zone de rencontre en projet (env 300 hab) :</li> 
   <li>
      <ul>
         <li>Communication : posters, lettre, flyers</li> 
         <li>Sensibilisation : radar pédagogique</li> 
         <li>activités participatives avec les habitants :</li> 
         <li>
            <ul>
               <li>enquête stationnement,</li> 
               <li>une réunion de lancement,</li> 
               <li>un atelier-promenade,</li> 
               <li>et 2 stands-projet.</li> 
               <li>Réunions publiques.</li> 
            </ul>
         </li>
      </ul>
   </li>
   <li>2 rues pour enfants le 15/06/11 et 5/10/11 soit :</li> 
   <li>
      <ul>
         <li>env 135 adultes et 250 enfants participants</li> 
         <li>env 25/30 personnes impliquées</li> 
         <li>env une dizaine d’activités proposées</li> 
      </ul>
  </li>
</ul>

**Nixar** · 08/05/2012, 22h33

Alors écoute parce que c'est toi merci beaucoup... Ca fonctionne très bien

.

Une dernière petite question (en fait 2) : bien que ce ne soit pas de l'HTML valide, il est appelé à être utilisé en tant que tel (si tu connais, je génère une page pour la bibliothèque HTML2PDF)...

Je reçois une variable qui contient mon pseudo HTML. Comment puis lui ajouter dynamiquement les attributs que tu as rajouté (<<<'XML' et XML)
Comment puis-je faire l'opération inverse une fois le parsing et les changements effectués afin de récupérer mon pseudo code HTML à nouveau??

Merci vraiment beaucoup pour tes réponses !

Nicolas

**rawsrc** · 08/05/2012, 23h06

Envoyé par Nixar

Je reçois une variable qui contient mon pseudo HTML. Comment puis lui ajouter dynamiquement les attributs que tu as rajouté (<<<'XML' et XML)

Le 'XML' ne t'est pas utile quand tu as déjà toutes tes données dans une variable. Je m'en sers parce que cela permet de présenter un code relativement long de manière très lisible. Cette notation s'appelle en php : NOWDOC et tu as aussi une autre quei sert dans d'autres cas : la notation HEREDOC. Un peu de lecture ici.
Donc tu n'as rien à faire à part passer ta variable avec ton pseudo code à la fonction nestUl().

Envoyé par Nixar

Comment puis-je faire l'opération inverse une fois le parsing et les changements effectués afin de récupérer mon pseudo code HTML à nouveau??

La fonction te renvoie ton code transformé.
Cela revient à faire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$xml = nestUl($pseudo_code, 'ul/ul');
$html_corrige = nestUl($xml, '/ul/ul');

**ascito** · 08/05/2012, 23h27

C'est vrai que je n'avais jamais vraiment compris mais la c'est clair

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$str = <<<EOD
Exem"ple de chaîne
sur plus''ieurs lignes
en utilisant la syntaxe Heredoc.
EOD;
echo $str;
 
$str = "
Exem\"ple de chaîne
sur plus''ieurs lignes
en utilisant la syntaxe Heredoc.
";
echo $str;

Note : comme ca je garde le lien pour le XML de coté

**rawsrc** · 08/05/2012, 23h35

Envoyé par ascito

Note : comme ca je garde le lien pour le XML de coté

Tu sais qu'il t'est possible de t'abonner à une discussion sans être obligé de poster dedans. Dans la barre d'outils au dessus de la discusion tu as "Outils de la discussion" et tu sélectionnes : "S'abonner à cette discussion".

**Nixar** · 08/05/2012, 23h53

Merci rawsrc pour ce complément d'informations fort utile

. Je l'avais déjà vu mais jusque-là pas compris.

Je pose la question parce qu'en debugging, une fois que les passages dans nestUl() sont faits, je me retrouve avec cette chaîne-là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0"?>
<ul>
	<li>1 zone de rencontre en projet (env 300 hab) :</li>
	<li><ul>
		<li>Communication : posters, lettre, flyers</li>
		<li>Sensibilisation : radar p&#xE9;dagogique</li>
		<li>activit&#xE9;s participatives avec les habitants :</li>
		<li><ul>
			<li>enqu&#xEA;te stationnement,</li>
			<li>une r&#xE9;union de lancement,</li>
			<li>un atelier-promenade,</li>
			<li>et 2 stands-projet.</li>
			<li>R&#xE9;unions publiques.</li>
		</ul></li>
	</ul></li>
	<li>2 rues pour enfants le 15/06/11 et 5/10/11 soit :</li>
	<li><ul>
		<li>env 135 adultes et 250 enfants participants</li>
		<li>env 25/30 personnes impliqu&#xE9;es</li>
		<li>env une dizaine d&#x2019;activit&#xE9;s propos&#xE9;es</li>
	</ul></li>
</ul>

Il m'a clairement transformé mon string en XML plus ou moins valide... D'où mon souci, car mon moteur de génération de PDF perd les pédales avec ça en entrée. J'ai également essayé en utilisant une chaîne classique, même résultat.

Sauf qu'avec ce que tu viens de m'expliquer, je ne comprends pas ce phénomène. As-tu une piste pour moi ?

Merci beaucoup !

**rawsrc** · 09/05/2012, 00h24

ça sent un problème avec l'encodage.
Je ne sais pas si ta version de lib html2pdf gère l'utf-8.

**Nixar** · 09/05/2012, 00h30

Bonsoir,
Je n'ai pas été clair : le contenu que j'ai mis dans mon post précédent est le contenu après :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$html = nestUl($html, 'ul/ul');
$html = nestUl($html, '/ul/ul');
// check en debug

Du coup, je suis bien avant l'appel à HTML2PDF... Il semble que ce soit la modif' des ul qui ajoute ça.

Tu en penses quoi?

BOnne nuit !

**ascito** · 09/05/2012, 00h36

Po sur que cela rentre dans HTML2PDF ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?xml version="1.0"?>

et si c'est convertiseur xml -> pdf, faut mettre un truc comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<bloc>
<ul>
<li>
<tag  value="1 zone de rencontre en projet (env 300 hab) :" />
</li>
</ul>
</bloc>

enfin c'est du xml...

**Nixar** · 09/05/2012, 08h03

Non non ce n'est pas ça :

Je créé une page "HTML compatible HTMLPDF"
J'englobe les ul filles par des li
J'envoie le tout à HTML2PDF

La solution de rawsrc fonctionne bien, mais mon HTML se transforme en XML. Mon objectif est d'avoir l'étape 2) tout en gardant mon HTML.

Je précise que le html compatible HTML2PDF est de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<page>
   <page_header>
.
.
.
   </page_header>
...
   <page_footer>
.
.
.
   </page_footer>
 
</page>

Les balises contiennent du HTML valide.

J'espère avoir été plus clair !

**rawsrc** · 09/05/2012, 08h43

Envoyé par Nixar

Du coup, je suis bien avant l'appel à HTML2PDF... Il semble que ce soit la modif' des ul qui ajoute ça.

Comment sont encodés tes fichier sources ?

**Nixar** · 09/05/2012, 08h52

Je viens de regarder de plus près le résultat que tu as eu lorsque tu as publié ton algo : tu as toi aussi la balise de définition XML (<?xml version="1.0" ?>).

Je précise donc encore ma question : est-il possible de faire la manip' de remplacement de noeud en utilisant loadHTML et saveHTML? J'ai essayé et chez moi ça ne fonctionne pas.

Merci pour vos retours !

Nicolas

**rawsrc** · 09/05/2012, 08h58

Envoyé par Nixar

Je viens de regarder de plus près le résultat que tu as eu lorsque tu as publié ton algo : tu as toi aussi la balise de définition XML (<?xml version="1.0" ?>).

Je précise donc encore ma question : est-il possible de faire la manip' de remplacement de noeud en utilisant loadHTML et saveHTML? J'ai essayé et chez moi ça ne fonctionne pas.

Merci pour vos retours !

Nicolas

J'ai la même chose que toi sauf que je n'ai pas de problème d'encodage.
Pour virer l'en-tête, tu peux faire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$html = mb_substr($xml, mb_strlen('<?xml version="1.0"?>', 'utf-8') + 1);

Bon c'est pas très propre, mais ça devrait gazer.

Ensuite pour ton problème d'encodage avec HTML2PDF, il faudrait passer la chaine à la moulinette utf8_decode() avant de l'injecter dans ta lib.
Faut faire des essais

**rawsrc** · 09/05/2012, 09h04

Si tu pouvais répondre à ma question ça serait bien :
Comment sont encodés tes fichiers sources (charset) ?

**Nixar** · 09/05/2012, 09h15

Désolé, j'avais zappé. Pour être sûr, j'ai converti mes fichiers sources en UTF-8 sans BOM via Notepad++.

J'ai refais le test après, toujours le même résultat.

Pour être sûr qu'on parle de la même chose, voici le contenu pseudo-HTML généré sur lequel je cherche à englober mes ul filles dans des li :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<link type="text/css" href="../css/main-css.css" rel="stylesheet" >
<link type="text/css" href="css/livret.css" rel="stylesheet" >
<page backtop="0" backbottom="0" backimg="" backimgx="center" backimgy="middle" backimgw="100%">
   <page_header>        
        <div id="header-container">
                            <div id="macaron-container">                      
                    <img src="images/macaron-projet.png"/>                    
                </div>
                        <div id="title">
                <h1>Test</h1>
            </div>
        </div>                                   
    </page_header>
    <page_footer>
        <div id="footer-container">
        </div>           
    </page_footer>
</page>
<page backtop="216px" backbottom="250px" backimg="" backimgx="148mm" backimgy="middle" backimgw="100%" backcolor="#b9cc25">
   <page_header>        
        <div id="header-container">
                            <div id="macaron-container">                      
                    <img src="images/macaron-projet.png"/>                    
                </div>
                        <div id="sumup-title">
                <h1 style="font-size:30pt">Test</h1>
            </div>
        </div>                                   
    </page_header>
    <page_footer>
        <div id="footer-container">
        </div>           
    </page_footer>
    <div id="sumup">
        <ol id="sumup-list">
                                <li><h1 style="font-size:20pt; text-transform: none;">test 1
</h1></li>
                                        <li><h1 style="font-size:20pt; text-transform: none;">test 2</h1></li>
                            </ol>
    </div>
</page>
<page backtop="220px" backbottom="220px" backright="100px" backleft="100px" style="font-size: 15pt">
   <page_header>               
        <div id="body-page-header-container">
                             <div id="macaron-container">                      
                    <img src="images/macaron-projet.png"/>                    
                </div>
                        <div id="number">
                <h1 style="font-size:80pt;">1</h1>
            </div>
            <div id="title">
                <h1 style="font-size: 40pt;">sdqsd sq</h1>
            </div>
        </div>                                   
    </page_header>
    <page_footer>
        <div id="footer-container">
        </div>           
    </page_footer>  
 
 
<ul>
 
	<li>qsdqsd</li>
 
	<li>qsdqsdqsd</li>
 
	<li>qsdqsd</li>
 
   <ul>
 
 	<li>qsdqssqdqsqsd</li>
 
   </ul>
 
</ul></page>

Je précise que cette syntaxe est imposée par HTML2PDF et que je n'ai pas de possibilité de la faire évoluer.

Merci pour le temps passé sur mon souci !