Discussion :

[Kayan]

Bonjour,

Je réalise un petit éditeur de texte en javascript dans le même style que fck editor ou que tinyMCE.

Mais, j'ai un petit souci pour la redéfinition de certaines balises
par exemple pour le gras et l'italique.
Sous firefox ce la donne quelque chose du genre :

Code :

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

<span style="font-weight: bold;"> mot en gras </span>

Code :

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

<span style="font-style: italic;"> mot en italique</span>

Or sous IE on a :

Code :

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

<strong>mot en gras</strong>

Code :

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

<em>mot en italique</em>

Donc dans un souci d'homogénéité je souhaite retransformer les balises span.
Sous firefox en mode editable, je sais qu'il y a également la commande :

Code :

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

document.execCommand("styleWithCSS", null, false);

qui permet de faire cette conversion mais elle restreint d'autres options que je voudrais utiliser.

Donc j'ai pensé à une expression régulière du type :

Code :

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

html = html.replace(/<span style=\"font-weight: bold;\s*\">(.*?)<\/span>/gi,"<strong>$1</strong>");

Mais cela fonction uniquement si dans mon html il n'y a qu'une balise "span".

donc en gros ça marche pour ça :

Code :

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

1
2
 
mon texte en <span style="font-weight: bold;">gras</span>

mais pas pour ça :

Code :

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

mon texte<span style="font-weight: bold;"> en gras<span style="font-style: italic;"> qui entoure</span> celui en italique</span>

En fait ce que je souhaiterai faire, c'est trouver une Regex (ou autre chose) qui permet de localiser les bonnes balises ouvrantes et fermantes pour pouvoir les remplacer.

[SpaceFrog]

dans le (.*?) il faut lui preciser par de <span>.*[^</span>]</span>

[Kayan]

Merci de répondre aussi vite

il semble que ça me fasse la même chose :

en gros ma nouvelle expression est :

Code :

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

html = html.replace(/<span style=\"font-weight: bold;\s*\">(.*?(<span>.*[^<\/span>])*)<\/span>/gi,"<strong>$1</strong>");

En plus, il me semble que l'opérateur

Code :

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

[^

n'exclut qu'un seul caractère et non tout une chaîne. Mais, ça m'a donné des idées je continue de chercher.

[SpaceFrog]

Code :

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

[^<\/span>]

entre les crochets c'est une classe d'exclusion

[Kayan]

Hum, disons que cette solution m'a aidé.

J'ai réussi à pondre ce que je cherchais et ça donne un truc du genre :

Code :

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

html = html.replace(/<span style=\"font-weight:\s*bold;\s*\">(([^<]*)(<span.*?<\/span>.*?)*)<\/span>/gi, "<strong>$1</strong>");

Reste maintenant à le tester dans tous les sens avant de pouvoir dire si cela fonctionne correctement et de tagué ce topic en résolu.

le RegEx finale est :

Code :

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

html = html.replace(/<span style=\"font-weight:\s*bold;\s*\">(.*?(<span.*?<\/span>.*?)*)<\/span>/gi, "<strong>$1</strong>");

En tout cas, Merci.