str_replace poussé

Version imprimable

14/06/2011, 13h20
aa1807

str_replace poussé

Bonjour tout le monde voici mon problème:

J'ai un éditeur web qui génère du code HTML et pour une image insérée ils fait le code suivant:

Code:

<img src="xxx" style="width: 200px; height: 150px; ..... etc" />

J'aimerais effacer le "style=" et les points virgules afin d'obtenir un:

Code:

<img src="xxx" width="200" height="150" ..... etc" />

Ceci juste pour les balise <img> !

Pouvez vous m'aider svp? J'essaie de m'en sortir avec la doc mais j'ai du mal...

Merci d'avance
14/06/2011, 13h41
roduce
salut, petit indice, utilise deux tableaux
un tableau $old
et un tableau $new.
tu fais correspondre la clé du tableau pour les remplacement .
exemple
Code:

1 2 $old[0] // chaine recherchée $new[0] //chaine remplacée
et dedans tu inclus un effacement de style="
et du guillemet de fin
et après tu remplace les : par des =
et tu supprimes les ;
je te laisse chercher la suite, c'est + formateur ;)
14/06/2011, 13h52
Benjamin Delespierre
Hello

Fais donc ça avec une regexp, c'est encore ce qu'il y a de plus puissant dans ce cas.
Code:

1 2 $xhtml = '<img src="xxx" style="width: 200px; height: 150px;" width="100" alt="test" />'; var_dump(preg_replace('#(<img.+)( style="[^"]*")(.*/>)#', '$1$3', $xhtml));
Les editeurs graphiques et autres dreamweaver sont à éviter, le code produit n'est jamais bon.

Enjoy.
14/06/2011, 14h25
aa1807

Merci à tous les deux, mais il me semble que la 2ème solution est plus adéquate effectivement car la première me bloque au niveau où je ne sais pas comment effectuer ce str_replace sur une portion du code html (que sur les balise <img> d'un textarea).

En fait il s'agit d'un CKeditor sur un textarea et non un éditeur graphique :)

J'ai testé le code que tu m'as donné, il supprime carrément tout le style! il faut que je regarde comment extraire les infos..

Et voilà:
Code:

1 2 3 4 5 6 7 $xhtml = '<img src="xxx" alt="yyy" style="width: 300px; height: 80px;" title="zzz" />'; $pattern = '#(<img .*) style="[^"]*width: ([0-9]+)px;[^"]*height: ([0-9]+)px[^"]*" (.*/>)#'; $replace = '$1 width="$2" height="$3" $4'; var_dump(preg_replace($pattern, $replace, $xhtml));
Ce n'est peut être pas la façon la plus optimale de faire... Peut être que quelqu'un de plus calé que moi en regexp apporter quelques améliorations.

14/06/2011, 14h37
stealth35

moi j'ai une question :

A quoi ça sert ?
14/06/2011, 14h41
aa1807

Citation:

Envoyé par stealth35

moi j'ai une question :

A quoi ça sert ?

En fait c'est un logiciel qui permet de générer des pages HTML pou pouvoir réutiliser ces pages sur un autre logiciel qui ne prend pas en compte les "style" c'est compliqué je sais...
14/06/2011, 14h44
stealth35

Citation:

Envoyé par aa1807

En fait c'est un logiciel qui permet de générer des pages HTML pou pouvoir réutiliser ces pages sur un autre logiciel qui ne prend pas en compte les "style" c'est compliqué je sais...

arf galère ....

:calim2:
14/06/2011, 14h45
Benjamin Delespierre

Aïe, Stealth m'a vu en train de manipuler des flux HTML avec des regexp, il va me taper :sm:
14/06/2011, 14h48
aa1807

Hehe, en tout cas merci beaucoup Benjamin. Il suffit maintenant de ne pas indiquer width et height mais de faire quelque chose de général pour toute sorte de paramètre (border etc). Je vais chercher, mais si quelqu'un a une autre solution ou qui peut aider pour la suite je suis preneur :)
14/06/2011, 14h48
stealth35

Citation:

Envoyé par Benjamin Delespierre

Aïe, Stealth m'a vu en train de manipuler des flux HTML avec des regexp, il va me taper :sm:

plus tard ;)

la ça touche au CSS, donc c'est plus compliquer,
un jour je ferai SAC en PHP.
14/06/2011, 14h52
roduce

J'y pense pour ton système jette un coup d'oeil du coté des outils bbcode. Tu peux ptet trouver quelque chose d'intéressant .

Après c'est une idée en l'air.
Sinon ce que tu peux faire dans ton traitement c'est isoler dans une variable ce qui est entre <img et le prochain />
et ne parser que le contenu.
14/06/2011, 15h12
Benjamin Delespierre

Citation:

Hehe, en tout cas merci beaucoup Benjamin. Il suffit maintenant de ne pas indiquer width et height mais de faire quelque chose de général pour toute sorte de paramètre (border etc). Je vais chercher, mais si quelqu'un a une autre solution ou qui peut aider pour la suite je suis preneur

Tu aurais dû le dire dès le départ. Parce que là c'est de la transcription de propriétés CSS en attributs HTML si l'équivalence est possible (on s'en sort bien avec width et heigth mais pour border c'est une autre histoire), c'est un peux plus difficile qu'une bête manipulation de chaine...

Citation:

Envoyé par Benjamin Delespierre

Tu aurais dû le dire dès le départ. Parce que là c'est de la transcription de propriétés CSS en attributs HTML si l'équivalence est possible (on s'en sort bien avec width et heigth mais pour border c'est une autre histoire), c'est un peux plus difficile qu'une bête manipulation de chaine...

Alors attendez, j'ai dit une betise en passant... Il me suffit juste de sortir le height width et float, le reste est pris en compte (me demandez pas pourquoi... mystère)
Donc en fait ta solution me convient sauf que, lorsque je l'utilise il sort pas le float!

La solution serait je pense de faire un truc du genre :
Code:

1 2 3 4 5 $xhtml = '<img src="xxx" alt="yyy" style="width: 300px; height: 80px; float: left;" title="zzz" />'; $pattern = '#(<img .*) style="[^"]*width: ([0-9]+)px;[^"]*height: ([0-9]+)px;[^"]*float: (\w+);[^"]*" (.*/>)#'; $replace = '$1 width="$2" height="$3" float="$4" $5'; var_dump(preg_replace($pattern, $replace, $xhtml));
sauf que ça ne marche pas...

14/06/2011, 15h26
stealth35

pour le float c'est align

cherche pas a faire ça en un seul coup ;)
14/06/2011, 15h51
Benjamin Delespierre

Oui enfin la propriété CSS float n'a pas exactement la même valeur que l'attribut align des balises inline. Pour être plus précis, quelle que soit la valeur de la propriété align, l'élément reste dans le flux alors qu'avec le positionnement flottant, il sort. La propriété CSS qui correspond à align est vertical-align.
14/06/2011, 15h56
stealth35

Citation:

Envoyé par Benjamin Delespierre

La propriété CSS qui correspond à align est vertical-align.

non c'est valign qui correspond vertical-align
14/06/2011, 16h20
aa1807
Alors voici la meilleure solution que j'ai trouvé, je laisse le float dans un style qui ne fonctionne pas mais bon au moins le height et le width y sont plus... :(
Code:

1 2 3 $pattern = '#(<img .*) style="[^"]*width: ([0-9]+)px;[^"]*height: ([0-9]+)px;(.*/>)#'; $replace = '$1 width="$2" height="$3" style ="$4"'; $content = preg_replace($pattern, $replace, $content);
Je n'arrive pas à sortir le float.. pour info je pense que l'align fait l'affaire, la valeur du float ne peut être que right ou left dans ce cas et c'est pour mettre l'image à gauche et à droite d'un texte, align ça le fait!

tien

Code:

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
$source = <<<HTML
<img src="xxx" style="width: 200px; height: 150px; float:left" width="100" alt="test" />
<img src="xxx" style="width: 500px; height: 300px; float:right" width="100" alt="test" />
HTML;
 
$doc = new DOMDocument();
 
$frag = $doc->createDocumentFragment();
$frag->appendXML($source);
 
$doc->appendChild($frag);
 
$images = $doc->getElementsByTagName('img');
 
foreach($images as $image)
{
    preg_match_all('/(?P<name>[^:\s]+)\:\s*(?P<value>[^;\s]+);?/', $image->getAttribute('style'), $matches);
 
    $styles = array_combine($matches['name'], $matches['value']);
 
    foreach($styles as $name => $value)
    {
    	if($name === 'float')
    	{
    	    $name = 'align';
    	}
 
        $image->setAttribute($name, $value);
    }
 
    $image->removeAttribute('style');
}
 
echo $doc->saveHTML();

y'a sans doute un truc plus sympa a faire au niveau des replacements (float -> align)

J'ai pas encore testé ta solution stealth, mais voici une alternative que je viens de faire, en fait comme le height et width etc ne sont pas forcement dans le meme ordre dans le "style" alors je les sors 1 par 1..
Code:

1 2 3 4 5 6 7 8 9 10 11 $pattern = '#(<img .*) (style=".*)width: ([0-9]+)px;(.*/>)#'; $replace = '$1 width="$3" $2$4'; $content = preg_replace($pattern, $replace, $content); $pattern2 = '#(<img .*) (style=".*)height: ([0-9]+)px;(.*/>)#'; $replace2 = '$1 height="$3" $2$4'; $content = preg_replace($pattern2, $replace2, $content); $pattern3 = '#(<img .*) (style=".*)float: (\w+);(.*/>)#'; $replace3 = '$1 align="$3" $2$4'; $content = preg_replace($pattern3, $replace3, $content);
par contre le width sort pas lol y a toujours un truc qui cloche!!!
ça me fait un truc du genre
Code:

1 2 width="1" height="102" align="right" style=" width: 105px; border- border-style: solid; margin: 11px 1px; " //le width devrait être à 105 ici
Je vais tester ta solution!!!

14/06/2011, 16h57
stealth35

ça va être galère à refaire les marges

Citation:

Envoyé par stealth35

tien

Code:

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
$source = <<<HTML
<img src="xxx" style="width: 200px; height: 150px; float:left" width="100" alt="test" />
<img src="xxx" style="width: 500px; height: 300px; float:right" width="100" alt="test" />
HTML;
 
$doc = new DOMDocument();
 
$frag = $doc->createDocumentFragment();
$frag->appendXML($source);
 
$doc->appendChild($frag);
 
$images = $doc->getElementsByTagName('img');
 
foreach($images as $image)
{
    preg_match_all('/(?P<name>[^:\s]+)\:\s*(?P<value>[^;\s]+);?/', $image->getAttribute('style'), $matches);
 
    $styles = array_combine($matches['name'], $matches['value']);
 
    foreach($styles as $name => $value)
    {
    	if($name === 'float')
    	{
    	    $name = 'align';
    	}
 
        $image->setAttribute($name, $value);
    }
 
    $image->removeAttribute('style');
}
 
echo $doc->saveHTML();

y'a sans doute un truc plus sympa a faire au niveau des replacements (float -> align)

Euuuuh tu viens juste de m'épater!

Merci infiniment! :O (à tous, je tiens à le préciser)

14/06/2011, 17h26
aa1807

Citation:

Envoyé par stealth35

ça va être galère à refaire les marges

Non mais de toute manière je vais me débrouiller pour la suite, tu m'as aidé pour le plus dur...

:ccool:le clin d’œil à Marge

@stealth

Tu devrais ajouter un filtre pour éviter de prendre des attributs non-standards:
Code:

1 2 3 4 // .... $styles = array_combine($matches['name'], $matches['value']); $styles = array_intersect_key($styles, array_flip(array('width', 'height', 'border', 'float'));

15/06/2011, 18h19
aa1807

Euh en fait j'ai un gros problème là... ça fonctionne très bien sauf que si j'ajoute un " ' " ou un n'importe quel caractère spécial "é" "à" etc, ça ne fonctionne plus!!!! J'ai testé tout mais en fait, ça bloque quand je passe dans l'objet DOM, je vous avoue que je n'ai presque aucune connaissance là dedans. De l'aide !!! :calim2:
15/06/2011, 18h20
stealth35

Citation:

Envoyé par aa1807

Euh en fait j'ai un gros problème là... ça fonctionne très bien sauf que si j'ajoute un " ' " ou un n'importe quel caractère spécial "é" "à" etc, ça ne fonctionne plus!!!! J'ai testé tout mais en fait, ça bloque quand je passe dans l'objet DOM, je vous avoue que je n'ai presque aucune connaissance là dedans. De l'aide !!! :calim2:

montre un exemple qui ne fonctionnent pas

En fait j'ai le code suivant:

Code:

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
echo "CONTENT:".$source."<br>";
$doc = new DOMDocument();
 
$frag = $doc->createDocumentFragment();
$frag->appendXML($source);
 
$doc->appendChild($frag);
 
$images = $doc->getElementsByTagName('img');
 
foreach($images as $image)
{
	preg_match_all('/(?P<name>[^:\s]+)\:\s*(?P<value>[^;\s]+);?/', $image->getAttribute('style'), $matches);
	$styles = array_combine($matches['name'], $matches['value']);
 
	foreach($styles as $name => $value)
	{
		if($name === 'float')
		{
			$name = 'align';
		}
 
		$image->setAttribute($name, $value);
	}
 
	$image->removeAttribute('style');
}
 
$content = $doc->saveHTML();
echo "CONTENT:".$content."<br>";

Et j'obtient (avec les echos) le résultat suivant:

Code:

1
2
3
4
5
6
CONTENT:
 
dfgdf' ' ééé fgd
 
 
CONTENT:

Le deuxième echo est vide!

Si je mets en commentaire le code de DOMDocument le deuxième echo fonctionne. Même résultat si le texte ne contient aucun " ' " ou caractère spécial.

16/06/2011, 10h33
stealth35

que donne la source HTML

Citation:

Envoyé par stealth35

que donne la source HTML

Ca donne:

Code:

1
2
3
CONTENT:<br><p>
	ghjgfhj'bvhff"ééééé</p>
<br><br>CONTENT:<br>

Sinon en attendant j'utilise les regex ça fonctionne bien comme alternative..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$pattern = '#(<img .*) (style=".*) width: ([0-9]+)px;(.*/>)#';
$replace = '$1 width="$3" $2$4';
$content_final = preg_replace($pattern, $replace, $content_final);
 
$pattern2 = '#(<img .*) (style=".*) height: ([0-9]+)px;(.*/>)#';
$replace2 = '$1 height="$3" $2$4';
$content_final = preg_replace($pattern2, $replace2, $content_final);
 
$pattern = '#(<img .*) (style=.*)"width: ([0-9]+)px;(.*/>)#';
$replace = '$1 width="$3" $2"$4';
$content_final = preg_replace($pattern, $replace, $content_final);
 
$pattern2 = '#(<img .*) (style=.*)"height: ([0-9]+)px;(.*/>)#';
$replace2 = '$1 height="$3" $2"$4';
$content_final = preg_replace($pattern2, $replace2, $content_final);
 
$pattern3 = '#(<img .*) (style=".*)float: (\w+);(.*/>)#';
$replace3 = '$1 align="$3" $2$4';
$content_final = preg_replace($pattern3, $replace3, $content_final);

2 fois width et height c'est pour éviter les xxxx-width: 000px; et les choses comme ça... c'est pas propre c'est sûre c'est du bidouillage mais ça fonctionne :lol:

Fuseau horaire GMT +2. Il est actuellement 03h40.