[DOM] Avis aux amateurs RegExp

Version imprimable

26/05/2007, 13h06
LEK

[DOM] Avis aux amateurs RegExp
Bonjour,
j'essaye en partant d'une chaine contenant :
Code:

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:

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:

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>

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:

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

26/05/2007, 18h41
cerede2000

Les regex pour ajouter??? Drole d'utilisation... Le code de Auteur est bien :)
26/05/2007, 18h55
Auteur

Citation:

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

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

Code:

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>

26/05/2007, 19h08
Auteur

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

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

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

26/05/2007, 21h45
LEK

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, @+
27/05/2007, 08h45
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 ... :oops:
27/05/2007, 09h28
cerede2000

Ouai enfin moi je gére pas mal avec les REGEX et pourtant je n'en voit pas l'utilité ici...
27/05/2007, 12h56
Auteur

Citation:

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

Citation:

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 :pleure:
27/05/2007, 14h53
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.

Citation:

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...
27/05/2007, 15h28
Auteur

Citation:

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é :D ;)

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).
27/05/2007, 16h40
SpaceFrog

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

Bon aller du temps a tuer ce soir :D

Code:

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

28/05/2007, 02h05
LEK

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.