Discussion :

[aa1807]

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 :

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

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

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

Code :

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

<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

[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 :

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

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

[Benjamin Delespierre]

Hello

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

Code :

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

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.

[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..

[Benjamin Delespierre]

Et voilà:

Code :

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

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.

[stealth35]

moi j'ai une question :

A quoi ça sert ?

[aa1807]

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...

[stealth35]

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 ....

[Benjamin Delespierre]

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

[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

[stealth35]

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

plus tard

la ça touche au CSS, donc c'est plus compliquer,
un jour je ferai SAC en PHP.

[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.

[Benjamin Delespierre]

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...

[aa1807]

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 :

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

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...

[stealth35]

pour le float c'est align

cherche pas a faire ça en un seul coup

[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.

[stealth35]

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

non c'est valign qui correspond vertical-align

[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 :

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

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!

[stealth35]

tien

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

[aa1807]

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 :

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

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 :

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

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!!!