11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

J'ai une chaîne de caractères qui contient un code HTML "affichable", c'est à dire que les < et > ont été remplacés par &lt; et &gt;
Ce que je veux faire, c'est entourer le contenu de chaque balise par
<span class="editText">contenu de la balise</span>

Par exemple si j'ai
&lt;p&gt;texte du paragraphe&lt;/p&gt;

je dois obtenir
&lt;p&gt;<span class="editText">texte du paragraphe</span>&lt;/p&gt;


Pour réaliser cette opération, j'ai utilisé le code JavaScript suivant
htmlText = htmlText.replace(/(&gt;)(.+?)&lt;/g, '$1<span class="editText">$2</span>&lt;');

Je constate que ce code ne fonctionne pas quand on a une balise &lt;br&gt; suivie d'un saut de ligne, ce qui a priori est assez normal. Tout se passe comme si ".*" n'incluait pas le \n
J'ai également essayé de mettre
htmlText = htmlText.replace(/(&gt;\s*)(.+?)&lt;/g, '$1<span class="editText">$2</span>&lt;');

En me disant que cela permettrait de traiter le problème. Peine perdue...

Auriez vous une idée sur les raisons de ce problème et la façon d'y remédier?
Merci de votre aide
Après quelques essais (informatique expérimentale!) Smiley eek il semble que [\s\t\n]* soit la façon appropriée de traiter le problème.
Dans la mesure où j'ai une solution, je vais m'y résoudre, mais franchement cela me paraît bizarre... Smiley suspect
Salut
Je vais répondre un peu à côté de ta question mais, pourquoi ne travailles-tu pas avec de vrais éléments (document.createElement, puis innerHTML). Tu pourrais ainsi très facilement travailler avec l'intérieur de ta balise.
Après, je n'y connais rien en performances, mais j'imagine que ça doit être plus lent (je pense que c'est tout de même dérisoire, sauf si tu le fais plein de fois et que t'as besoin de performances).
Merci Zelena!
Ce qui me plante, c'est que ça n'est pas comme ça en PHP.
A force de passer d'un langage à l'autre, on en oublie les différences Smiley smile
mistiru a écrit :
Salut
Je vais répondre un peu à côté de ta question mais, pourquoi ne travailles-tu pas avec de vrais éléments (document.createElement, puis innerHTML). Tu pourrais ainsi très facilement travailler avec l'intérieur de ta balise.
Après, je n'y connais rien en performances, mais j'imagine que ça doit être plus lent (je pense que c'est tout de même dérisoire, sauf si tu le fais plein de fois et que t'as besoin de performances).

Merci de ta réponse
Je vais être un peu plus explicite.
Il s'agit d'un outil d'édition en ligne, dont le but est de permettre d'éditer les textes sans toucher aux balises.
Par exemple, supposons qu'on ait un bout de code comme:

<!-- code originel -->
<section>
    <h2>Premier paragraphe</h2>
    <p>premier alinéa</p>
    <p>deuxième alinéa>/p
</section>

Pour que ça s'affiche dans la fenêtre, je dois transformer cela en

<!-- code intermédiaire -->
&lt;section&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Premier paragraphe&lt;/h2&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;premier alinéa&lt;/p&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;deuxième alinéa&gt;/p&gt;<br>
&lt;/section&gt;<br>

Les &nbsp; et <br> sont là pour assurer l'indentation à l'affichage dans un navigateur;

Mais comme je veux pouvoir effectuer des modifications dans les textes, je dois entourer la partie "texte" avec une "vraie" balise <span>, ce qui donne comme résultat:

<!-- code final -->
&lt;section&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;<span class="editText" id="text0">Premier paragraphe</span>&lt;/h2&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<span class="editText" id="text1">premier alinéa</span>&lt;/p&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<span class="editText" id="text2">deuxième alinéa</span>&gt;/p<br>
&lt;/section&gt;<br>

Ce code est ensuite rendu actif en l'insérant dans une <div id="editDiv"> par une instruction
document.getElementById('editDiv').innerHTML = leCode;

ce qui fait que le code HTML s'affiche comme désiré.

Ensuite le script recherche tous les éléments <span class="editText"> et leur assigne un EventListener sur click qui permet d'agir sur le contenu de ces éléments sans toucher aux "vraies balises" en ouvrant une boîte de dialogue.

Pour écrire le programme qui passe du code originel au code final, on doit faire un abondant appel à la méthode replace(), d'où le besoin d'avoir une certaine connaissance des RegEx.
Le problème, comme Zelena l'a signalé, c'est que l'utilisation des RegEx en PHP et en JavaScript n'est pas exactement la même, et comme je passe mon temps à passer d'un langage à l'autre, je finis par perdre mes repères.