[DOM] Avis aux amateurs RegExp

**LEK** · 26/05/2007, 13h06

Bonjour,
j'essaye en partant d'une chaine contenant :

Code :

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

1
2
3
4
<span valID="a">contenu</span>
<span valID="b">contenu 2</span>
<span valID="c">contenu 3</span>
<span valID="d">contenu 4</span>

d'écrire une expression régulière (comme on pourrait faire avec xsl) qui me permette de remplacer l'ancien contenu de la chaine en :

Code :

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

1
2
3
4
<div valID="a" id="oSpan_1">contenu</div>
<div valID="b" id="oSpan_2">contenu 2</div>
<div valID="c" id="oSpan_3">contenu 3</div>
<div valID="d" id="oSpan_4">contenu 4</div>

Le problème vient de la valeur X de id="oSpan_X" : est-il possible de connaitre l'index du numéro d'occurence dans la chaine pour pouvoir l'incrémenter?
Si ceci n'est pas réalisable : est-il au moins possible de créer un attribut alternatif d'une occurence sur deux de cette manière :

Code :

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

1
2
3
4
<div valID="a" altern="oSpan_1">contenu</div>
<div valID="b" altern="oSpan_2">contenu 2</div>
<div valID="c" altern="oSpan_1">contenu 3</div>
<div valID="d" altern="oSpan_2">contenu 4</div>

**Auteur** · 26/05/2007, 18h11

bonjour,

voici un exemple (j'ai considéré que la chaine à traiter était dans une seule variable et ne possèdait aucun caractère d'échappement comme le retour à la ligne) :

Code javascript :

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
35
36
37
38
39
40
41
42
 
  var chaine = "";
  var tabChaine = new Array();
  var i, n, chaine2, exp;
 
  // la chaine est consituee d une ligne...
  chaine  = '<span valID="a">contenu</span>';
  chaine += '<span valID="b">contenu 2</span>';
  chaine += '<span valID="c">contenu 3</span>';
  chaine += '<span valID="d">contenu 4</span>';
 
 
  //on remplace les span par les div
  chaine = chaine.replace(/<span valID=/gi,"<div valID=");
  chaine = chaine.replace(/<\/span>/gi,"</div>");
 
  //on ajoute \n entre chaque div (plus simple ensuite pour le split)
  chaine = chaine.replace(/></gi,">\n<");
 
  //on separe chaque chaine au niveau du \n ajoute precedemment
  tabChaine = chaine.split(/\n/gi);
  n = tabChaine.length;
  //alert(tabChaine);
 
 
  //<div valID="a" sous forme de regexp (sans le > a la fin):
  //on considere que valID est constitue uniquement de lettres (intervalle [a-z])
  exp = /<div\s*valID=\"[a-z]*\"/gi;
 
  for (i=0; i<n; i++)
  {
     //extraction du debut de la chaine
     chaine2 = tabChaine[i].match(exp).toString();
 
     //insertion des id
     chaine2 = chaine2 + " id=\"oSpan_"+parseInt(i+1)+"\"";
 
     //on remplace la regexp par la nouvelle chaine
     tabChaine[i] = tabChaine[i].replace(exp, chaine2);
  }
 
  alert(tabChaine);

**cerede2000** · 26/05/2007, 18h41

Les regex pour ajouter??? Drole d'utilisation... Le code de Auteur est bien

**Auteur** · 26/05/2007, 18h55

Envoyé par cerede2000

Les regex pour ajouter??? Drole d'utilisation... Le code de Auteur est bien

Plus précisément, pour insérer une chaine au milieu d'une autre

Il y a sans doute plus simple, mais merci pour le compliment cerede2000

**SpaceFrog** · 26/05/2007, 19h05

je hais les regExp ...
Alors quand je peux faire sans ...

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
 
 
<script type='text/javascript'>
function populate(){
var SpanCollect=document.getElementsByTagName('span');
for (i=0;i<SpanCollect.length;i++){
   SpanCollect[i].id="oSpan_"+Number(i+1);
   SpanCollect[i].onclick=function(){alert(this.id)}
   }
   }
</script>
</head>
 
<body onload='populate()'>
 
<span valID="a">contenu</span>
<span valID="b">contenu 2</span>
<span valID="c">contenu 3</span>
<span valID="d">contenu 4</span>
 
 
</body>

**Auteur** · 26/05/2007, 19h08

certes.... mais il faut aussi transformer les span en div

**SpaceFrog** · 26/05/2007, 19h39

oui bon j'avais zappé ce détail ..

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
<script type='text/javascript'>
function populate(){
var SpanCollect=document.getElementsByTagName('span');
var MAX=SpanCollect.length
alert(MAX)
var Dump=document.createElement('div');
for (i=0;i<MAX;i++){
	 var NewDiv=document.createElement('div')
	 NewDiv.id="oSpan_"+Number(i+1);
	  NewDiv.valID=SpanCollect[i].valID;
	 NewDiv.innerHTML=SpanCollect[i].innerHTML;
	 NewDiv.onclick=function(){alert( this.id)}
	 document.body.appendChild(NewDiv)
	 	  }
for (i=0;i<MAX;i++){
	SpanCollect[0].parentNode.removeChild(SpanCollect[0])
}
   }
</script>
</head>
 
<body onload='populate()'>
 
<span valID="a">contenu</span>
<span valID="b">contenu 2</span>
<span valID="c">contenu 3</span>
<span valID="d">contenu 4</span>
 
 
</body>

**LEK** · 26/05/2007, 21h45

Merci les gars,
je peux effectivement partir sur la base de vos scripts qui ont le mérite de me montrer la voie avec RegExp et en utilisant le DOM.
Mon idée initiale était d'écrire une seule regexp et d'utiliser des parenthèses capturantes pour tous exécuter avec le moins d'instrcutions possibles et surtout plus rapide que le dom (même si dans le fond je suis d'accord avec SpaceFrog pour dire que dans l'absolu il y a plus propre comme programmation), donc je pense encore plancher dans cette direction.
Merci encore, @+

**SpaceFrog** · 27/05/2007, 08h45

Personnellement j'évite de modifier au pied de biche les objets, de peur que le browser ait quelques difficultés à reconnaitre les propriétés.
Quand je peux passer par le DOM, je suis au moins sur que pour la suite je n'aurais pas de mauvaises surprises de prorpiétés mal interprétés ...

Oui enfin ça c'est pour la justification fallacieuse. En vérité je suis une telle quiche avec les regExp ...

**cerede2000** · 27/05/2007, 09h28

Ouai enfin moi je gére pas mal avec les REGEX et pourtant je n'en voit pas l'utilité ici...

**Auteur** · 27/05/2007, 12h56

Envoyé par SpaceFrog

Personnellement j'évite de modifier au pied de biche les objets, de peur que le browser ait quelques difficultés à reconnaitre les propriétés.
Quand je peux passer par le DOM, je suis au moins sur que pour la suite je n'aurais pas de mauvaises surprises de prorpiétés mal interprétés ...

Oui enfin ça c'est pour la justification fallacieuse. En vérité je suis une telle quiche avec les regExp ...

Envoyé par cerede2000

Ouai enfin moi je gére pas mal avec les REGEX et pourtant je n'en voit pas l'utilité ici...

Bref, je me suis cassé la tête pour rien

**LEK** · 27/05/2007, 14h53

Auteur, je pense qu'il y a un malentendu : pour moi ta réponse est parfaitement utile, peut importe qu'on la juge ou non adaptée en l'occurence car j'avais surtout besoin d'étudier l'utilisation des regExp dans ce contexte : en se servant d'un pattern comme on le ferait sous XPAth et de replace pour changer le contenu HTML de la chaîne : mon but final étant de faire des benchmark avec l'utilisation d'innerHTML et de comparer la vitesse de transformation de l'arbre ensuite avec des approches plus académiques comme celle présentées par SpaceFrog.
Maintenant si j'ai posé la question c'est que je ne connais pas toute l'étendue des possibilités offertes par les RegExp : et ton exemple est bien venu dans ce contexte.

cerede2000 a écrit :Ouai enfin moi je gére pas mal avec les REGEX et pourtant je n'en voit pas l'utilité ici...

cerede2000, mon but encore une fois est de découvrir les limites de l'utilisation des RegExp, donc peut être effectivement ne vois-tu pas l'utilité que je peux retirer de cette opération mais si tu maîtrise effectivement la manipulation des RegExp tu peux prendre mes questions comme un exercice de style et partager si tu le veux bien un peut de ton savoir...

**Auteur** · 27/05/2007, 15h28

Envoyé par LEK

Auteur, je pense qu'il y a un malentendu : pour moi ta réponse est parfaitement utile, peut importe qu'on la juge ou non adaptée en l'occurence car j'avais surtout besoin d'étudier l'utilisation des regExp dans ce contexte : en se servant d'un pattern comme on le ferait sous XPAth et de replace pour changer le contenu HTML de la chaîne : mon but final étant de faire des benchmark avec l'utilisation d'innerHTML et de comparer la vitesse de transformation de l'arbre ensuite avec des approches plus académiques comme celle présentées par SpaceFrog.
Maintenant si j'ai posé la question c'est que je ne connais pas toute l'étendue des possibilités offertes par les RegExp : et ton exemple est bien venu dans ce contexte.

LEK : il ne fallait pas prendre ma remarque au premier degré

Il est vrai que moi aussi j'ai des difficultés avec les expressions régulières. Et parfois, les résultats renvoyés par ces méthodes match() et split() me laissent perplexes...

Je pense qu'à partir du moment où l'on maîtrise bien les expressions régulières tout est permis (élaboration d'un BBCode par exemple).

**SpaceFrog** · 27/05/2007, 16h40

Il est clair que les regExp c'est super puissant quand on maitrise.
Mais pour moi ce serait plutot ... faire un regExp et mourrir

**cerede2000** · 27/05/2007, 21h33

Bon aller du temps a tuer ce soir

Code :

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

1
2
3
4
5
6
7
 
$chaine = '<span valID="a">contenu</span>
<span valID="b">contenu 2</span>
<span valID="c">contenu 3</span>
<span valID="d">contenu 4</span>';
$contenu = 'id="oSpan_2"';
echo preg_replace('`\<span valID=("[a-z]")\>(.*)\</span\>`','<div valID=$1 '.$contenu.'>$2</div>', $chaine);

Bon desoler c'est du PHP, mais ca s'adapte

**LEK** · 28/05/2007, 02h05

Hé bien un grand merci à toi , je n'en demandais pas plus, et maintenant que cela est écrit , syntaxe php mise à part, je me dis que j'aurais pu l'écrire moi même(!) Comme quoi cela semble toujours plus aisé lorsqu'on la sous les yeux...
Merci encore.

[DOM] Avis aux amateurs RegExp

JavaScript

Discussions similaires

Partager

Partager