[SRC] getElement(s)ById filtré par une regExp

**SpaceFrog** · 10/06/2009, 12h55

Une demande qui revient souvent et qui n'est pas implémenté de base dans JQuery sans extension...

le but, recupérer un tableau d'elements au moyen d'un filtre sur l'id

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
<script type="text/javascript">
document.getElementsByReg=function(reg){
var tabReg=new Array();
var tabElts=document.getElementsByTagName('*');
var TEL=tabElts.length;
i=0;
while(tabElts[i]){
	if(tabElts[i].id){
	         if(reg.test(tabElts[i].id)){tabReg.push(tabElts[i]);}
	         }
	i++;         
	}
return tabReg;
}
</script>

un exemple de code html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<div id="_3">
<div id="mondiv1">truc</div>
<div id="mondiv2">truc</div>
<div id="madiv3">truc</div>
<div id="madiva">truc</div>
<div id="mandiv5">truc</div>
<div id="mondivb">truc</div>
</div>
</body>

et l'utilisation du code:

Code :

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

alert(document.getElementsByReg(/\d/).length)"

retournera ici un alert du nombre l'elements ayant du numérique dans leur id ...

3 limitations à ce script:
1) il faut maitriser les regExp pour s'en servir
2) si le paramètre passé à la fonction n'est pas une expression régulière il retourne un array vide
3)si tout se passe bien il retourne un tableau des elements dans l'ordre du flux html

**SpaceFrog** · 10/06/2009, 13h07

v2 en passant le selecteur filtré

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
 
<script type="text/javascript">
 
document.getElementsByReg=function(reg,attr){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName('*');
var TEL=tabElts.length;
if(! (reg instanceof RegExp)){return tabReg;}
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
 
	         if(reg.test(tabElts[i][attr])){tabReg.push(tabElts[i]);}
	         }
	i++;         
	}
return tabReg;
}
</script>

utilisation:
pour le name:
name contient la lettre a

Code :

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

document.getElementsByReg(/a/,'name')

pour l'id:
l'id contient du numérique

Code :

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

document.getElementsByReg(/\d/,'id')

**le_chomeur** · 10/06/2009, 15h38

Proposition d'amélioration

:

effectuer l'appel en passant par un hash et non pas des paramètres ( cela offre plus de souplesse )

ensuite pourquoi ne pas utiliser une regxp par défaut avec :

contenant "lemot"
commençant par "lemot"
se terminant par "lemot"

( avec possibilité de mixé les trois, donc une regexp dynamique par défaut )

ça fait un peut de travail mais a l'utilisation cela peut être vraiment TRES utile ...

autre chose une petite optimisation :

Code :

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

1
2
3
 
i=0;
while(tabElts[i]){

en faisant une boucle inversé :

Code :

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

1
2
3
4
i=tabElts[i].length;
while(i){
i--
}

**SpaceFrog** · 10/06/2009, 18h29

pour la regExp par defaut oui pourquoi pas
mais pour passer un hash en paramètre ça risque d'être plus complexe à l'utilisation.
a moins que tu ne veuilles dire la fonction en hash ?

en quoi la boucle inversée i-- est elle plus optimisée que le i++ ?

**SpaceFrog** · 11/06/2009, 08h33

A noter que l'on peut aussi filtrer sur la class css en passant className en paramètre.

IE accèpte n'importe quel atttribut personnel, pas ffx, il suffirait je pense de modifier la fonction pour y mettre getAttribute ...

**le_chomeur** · 11/06/2009, 08h45

Envoyé par SpaceFrog

pour la regExp par defaut oui pourquoi pas
mais pour passer un hash en paramètre ça risque d'être plus complexe à l'utilisation.

En quoi ? au contraire, on définit des paramètres obligatoire sinon on renvois null

Envoyé par SpaceFrog

a moins que tu ne veuilles dire la fonction en hash ?

Non non , bien les paramètres

Envoyé par SpaceFrog

en quoi la boucle inversée i-- est elle plus optimisée que le i++ ?

[/QUOTE]

Aucune idée ^^ TOUS les benchs trouvés ( et effectués ) passe par une boucle inversé lorsqu'il faut optimisé le traitement

Pour le filtre par css, effectivement, ( d'ou l'utilité du hash pour pouvoir gager en souplesse au niveau des paramètres

)

Je peux t'écrire la méthode si tu veux mais par contre heuu z'aurais besoins d'un coup de mail pour les regxp ^^

**SpaceFrog** · 11/06/2009, 08h57

Pour la boucle inversée le hic c'est que ça retournerait un tableau dans l'ordre inverse du flux

il faudrait faire un reverse sur l'array à la fin ce qui risque de faire perdre tout le bénéfice de l'optimisation...

Pour ce qui est du hash, je ne vois pas comment le mettre en forme pour conserver la syntaxe document

pour le commence par ou finit par j'ai opté pour la notation *, voici ce que ça donne:

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
 
<script type="text/javascript">
 
document.getElementsByReg=function(reg,attr){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName('*');
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 
 		  		}
 		else {return	tabReg;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
 
	         if(reg.test(tabElts[i][attr])){tabReg.push(tabElts[i]);}
	         }
	i++;         
	}
return tabReg;
}
</script>

Voici la syntaxe pour les expressions par defaut simplifiée pour le premier paramètre il doit être un string du type
*mot pour commence par mot
mot* pour finit par mot
*mot* pour continent mot
*mot|mot* pour commence ou finit par ...
ou toute autre combinaison de * et |

[SRC] getElement(s)ById filtré par une regExp

Contribuez

Vue hybride

Discussions similaires

Partager

Partager