conversion BBCODE a HTML avec balises imbriquées

Version imprimable

Bonjour,

Je suis confronté à un petit soucis bloquant. J'effectue actuellement la migration d'un site dont le contenu était formaté via du bbcode. Ce bbcode était assez pratique parce qu'il permettait d'imbriquer plusieurs balises pour des formatages plus précis.

Cette migration est effectuée sur un blog Wordpress. Mon soucis est de convertir le bbcode ver le html. Au niveau des balises classiques je m'en sort à peu près. Mais c'est au niveau des balises imbriqués qu'utilise l'ancien site où je m'y perds un peu.

des exemples :

j'utilise un script PHP assez général pour pouvoir être complété par d'autres conversions si besoin.
pour convertir la balise gras ( [b] ) j'utilise les regex suivant : 
BBCODE : '#\[b\](.*)\[/b\]#Usi' (ex : [ b ] texte [ /b ] )
HTML   : '<strong>$1</strong>'

pour un lien hypertexte :
BBCODE : '#\[url=(.*)\](.*)\[/url\]#Usi' (ex : [ url = http://adresse.com ] texte [ /url ] )
HTML   : '<a href="$1">$2</a>'

pour une image :
BBCODE : '#\[img\](.*)\[/img\]#Usi' (ex: [ img ] http://bla.com/image.jpg [ /url ] )
HTML   : '<img src="$1" alt="Image" />'
Ça, ça fonctionne bien. Voila où se trouve mon soucis : si par exemple j'impose la taille d'une image :
[ img = 400x506 ] http://bla.org/image.jpg [ /img ]
ce qui donnerait en HTML :

Code:

<img width="400" height="506" src="http://bla.org/image.jpg" alt="" />

Ou encore une image contenant un lien :
[ url = http://bla.com ] [ img ]/image.jpg[ /img ] [ /url ]
ce qui donnerait en HTML :

Code:

<a href="http://bla.com" onclick="window.open(this.href); return false;"><img style="border: 0;" src="/images.jpg" alt="image" />

N'étant absolument pas familier du regex je ne vois pas comment imbriquer cela. Auriez vous des idées ?

Voici une partie du code PHP du script :
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 $entree = array( '#\[b\](.*)\[/b\]#Usi', '#\[i\](.*)\[/i\]#Usi', '#\[u\](.*)\[/u\]#Usi', '#\[s\](.*)\[/s\]#Usi', '#\[img\](.*)\[/img\]#Usi', '#\[img=(.*)\](.*)\[/img\]#Usi', '#\[url\](.*)\[/url\]#Usi', '#\[url=(.*)\](.*)\[/url\]#Usi', '#\[left\](.*)\[/left\]#Usi', '#\[center\](.*)\[/center\]#Usi', '#\[right\](.*)\[/right\]#Usi' ); $sortie = array( '<strong>$1</strong>', '<em>$1</em>', '<span style="text-decoration:underline;">$1</span>', '<span style="text-decoration:line-through;">$1</span>', '<img src="$1" alt="Image" />', '<a href="$1">$1</a>', '<a href="$1">$2</a>', '<div style="text-align:left;">$1</div>', '<div style="text-align:center;">$1</div>', '<div style="text-align:right;">$1</div>'
Merci a vous ! :zoubi:

28/03/2013, 15h08
Dr.Wily
Merci à rawsrc pour l'édition c'est vrai que j'ai oublié d'enlever mes moufles pour formater mon topic.

Bon j'ai trouvé pour la balise imbriquée pour la taille de l'image

ce BBcode :
```
[ img = 400x506 ] http://bla.org/image.jpg [ /img ]
```
donne en regex :
Code:

1 2 '#\[img=(.*)x(.*)\](.*)\[/img\]#Usi'
puis :

Code:

'<img width="$1" height="$2" src="$3" alt="image" />',
28/03/2013, 16h53
CosmoKnacki

Bonjour,

en fait le cas de l'image dans le lien ne pose pas de problème particulier si ce n'est que tu dois le placer avant, dans tes tableaux, le traitement des images et des urls. Je pense que parti comme tu es, tu vas bientôt trouver les 2 patterns permettant de décrire ce cas (l'une avec les dimensions d'image, l'autre sans)

Au passage si tu veux donner un p'tit air américain à tes balises img tu pourrais les remplacer par <img src="$3" style="width:$1px; height:$2px;" alt="" /> et confier les éventuels border 0 au css.

Après tu peux parfaire tes expressions en voyant si le modifier \s est toujours pertinent, si les * ne peut pas être remplacer par des + voire {n,} dans certains cas. si le . ne peut pas être remplacer par une classe de caractère plus réduite, le but étant de générer moins de traitement et de diminuer les risques d'erreurs en cernant au maximum. Exemple: '#\[img=(\d+)x(\d+)]([^[]+)\[/img]#i' (<-- pas besoin ici de rendre les quantificateurs ungreedy avec le modifier U ou un ? qui vont ralentir le traitement, pas besoin non plus d'échapper les crochets quand il n'y a pas d'ambiguïté avec la définition d'une classe de caractères, le modifier \s est inutile dans la mesure où l'url de l'image ne contient ni sauts de ligne, ni tabulations, ni espaces)

Super, merci !

Citation:

Envoyé par CosmoKnacki

en fait le cas de l'image dans le lien ne pose pas de problème particulier si ce n'est que tu dois le placer avant, dans tes tableaux, le traitement des images et des urls.

Donc, tu veux que je place en 1er dans le tableau tout ce qui concerne les url et les images ?

Citation:

Envoyé par CosmoKnacki

le but étant de générer moins de traitement et de diminuer les risques d'erreurs en cernant au maximum.

Oui, justement je me disais qu'avec tout ces "parse" je risque d'avoir trop de "span" ouverts à la suite... et c'est le cas. L'affichage HTML est correct, ca fonctionne mais y aurait-il un moyen de tout mettre dans une seul balise span ?

Voici le code fonctionnel et complété des nouvelles balises :

J'ai ajouté color, font et size,
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 $entree = array( '#\[b\](.*)\[/b\]#Usi', '#\[i\](.*)\[/i\]#Usi', '#\[u\](.*)\[/u\]#Usi', '#\[s\](.*)\[/s\]#Usi', '#\[color=(.*)\](.*)\[/color\]#Usi', '#\[font=(.*)\](.*)\[/font\]#Usi', '#\[size=(.*)\](.*)\[/size\]#Usi', '#\[img\](.*)\[/img\]#Usi', '#\[img=(.*)x(.*)\](.*)\[/img\]#Usi', '#\[url\](.*)\[/url\]#Usi', '#\[url=(.*)\](.*)\[/url\]#Usi', '#\[left\](.*)\[/left\]#Usi', '#\[center\](.*)\[/center\]#Usi', '#\[right\](.*)\[/right\]#Usi' ); $sortie = array( '<strong>$1</strong>', '<em>$1</em>', '<span style="text-decoration:underline;">$1</span>', '<span style="text-decoration:line-through;">$1</span>', '<span style="color: $1;">$2</span>', '<span style="font-family: $1;">$2</span>', '<span style="font-size: $1px;">$2</span>', '<img src="$1" alt="Image" />', '<img width="$1" height="$2" src="$3" alt="image" />', '<a href="$1">$1</a>', '<a href="$1">$2</a>', '<div style="text-align:left;">$1</div>', '<div style="text-align:center;">$1</div>', '<div style="text-align:right;">$1</div>'
Le regex c'est vraiment une sacrée gymnastique ! :aie:

28/03/2013, 19h33
CosmoKnacki

Citation:

Donc, tu veux que je place en 1er dans le tableau tout ce qui concerne les url et les image ?

Non, en fait il faut juste que la recherche de liens contenant une balise img soit éffecutée avant la recherche de liens et avant la recherche d'image. Sinon on se retrouve dans cette situation:
on a:

Code:

[ url=http://bla.com][img]/image.jpg[/img][/url]

si je recherche en premier les balises url, j'obtiendrai:

Code:

<a href="http://bla.com">[img]/image.jpg[/img]</a>

et donc quand je chercherai ensuite les balises img contenues dans les balises url, je ne les trouverai jamais!

C'est pourquoi, il faut chercher ces balises imbriquées avant.

Citation:

Oui, justement je me disais qu'avec tout ces "parse" je risque d'avoir trop de "span" ouverts à la suite...

Je ne disais pas ça pour la quantité de code html généré au final, je parlais du traitement de la regex elle-même, c'est à dire la difficulté de trouver des correspondances dans le texte de départ.

Dans un premier temps, ne te soucis pas de la quantité de code html généré, et essai de tout convertir sans perte d'information, c'est le principal.

Dans un deuxième temps, si tu es chaud tu peux par exemple essayer de déterminer quelles sont les styles redondants ou inutiles pour créer une classe css à la place ou pour les supprimer.