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

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

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, 14h07

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, 16h38

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, 19h29

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, 09h33

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, 09h45

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, 09h57

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 |

**Bovino** · 11/06/2009, 10h15

Envoyé par SpaceFrog

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

J'imagine que la boucle inversée permet d'éviter un certain nombre d'évaluations.
Par exemple, dans la boucle

Code :

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

1
2
3
for(i=0; i<tableau.length; i++){
...
}

à chaque itération, il faut récupérer la valeur de tableau.length pour la comparer

Ensuite, pour éviter de faire un reverse, tu peux passer par le méthode unshift() de l'objet Array. Mais il me semble qu'elle est peu optimisée et parfois problématique sous IE (hasard...)

**le_chomeur** · 11/06/2009, 10h17

Envoyé par SpaceFrog

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

a vérifir, mais je pense que le reverse de javascript est optimisé

Envoyé par SpaceFrog

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

Pas très bien compris le problème :-/

Code :

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

{"expression":"laregexp","typeElement":"div","by":"id" ...}

Sinon ! passé par la propriété arguments de l'objet function pour récupérer le nombres d'arguments passés et traiter en fonction de ...

Envoyé par SpaceFrog

pour le commence par ou finit par j'ai opté pour la notation *

Nickel ! je pensais aussi choisir un caractère par défaut.

Je vais juste refaire la méthode version objet en ajoutant le className ou id ou name

**SpaceFrog** · 11/06/2009, 10h23

je voulais justement eviter la notation hash en paramètre reston simple pour coller au max à la syntaxe getElementById

Code :

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

{"expression":"laregexp","typeElement":"div","by":"id" ...}

je ne vois pas l'interet de rajouter type d'element ?

**le_chomeur** · 11/06/2009, 10h34

juste une option permettant d'optimiser la recherche, plutôt que de rechercher sur tous les éléments via *

sinon pour le hash et pour coller a la syntaxe , je pense qu'on peut passer dans ce cas par des arguments optionnels

m'enfin j'dis ça je dis rien hein ...

**SpaceFrog** · 11/06/2009, 11h00

tu ferais un getElementsByTagName(tag) au lieu de getElementsByTagName('*') ...

mouaip dans ce cas il faudrait inverser l'ordre des params

Code :

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

document.getElementsByReg=function(tag, attr, reg )

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
<script type="text/javascript">
 
document.getElementsByReg=function(tag,attr,reg){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
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>

utilisation:

document.getElementsByReg('input','id','ma*')

on passe le type de balise cherchée ce qui permet à la fois d'optimiser la recherche en limitant à un seul tag (autorise toujours * pour tous les tags)

on passe l'attribut recherché (permet aussi ne chercher dans les inputs les type text radio checks ...)

et le string raccourci ou la regExp

Par exemple pour les inputs de type text:

Code :

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

document.getElementsByReg('input','type',/text/)

les checkboxes

Code :

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

document.getElementsByReg('input','type',/checkbox/)

les div dont l'id commence par menu_

Code :

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

document.getElementsByReg('div','id','menu_*')

Bref les possibilités sont multiples et ce petit script s'avère plus puissant que je ne le pensais

**SpaceFrog** · 11/06/2009, 11h25

A noter qu'un string passé seul sans le joker * dans le paramètre reg retournera un tableau vide.

c'est volontaire car il faudrait parser le string à la recherche de caractères réservés aux expression régulières afin d'eviter que la conversion du string en RegExp ne s'avère catastrophique

déja on peut mettre le script en defaut en passant des caractères comme ^$+:
mais ce sont des caractères rarement utilisés pour des names ou des ids ...

on pourrait toujours rajouter un switch sur le string pour tester si il vaut text, radio, button, submit, checkbox

**le_chomeur** · 11/06/2009, 11h34

humm ça me titille , on y est presque

et pour les inputs de type texte comportant un id particulier ??

**SpaceFrog** · 11/06/2009, 11h40

tu crois que ça vaut la peine ...
tu le fais sur l'input avec l'attribut id directement non ?
là faudrait commencer à recursiver

ou alors passer ['type','id'] en second paramètre ?

tester si le second param est un array , un peu complexe pour un cas aussi rare non ?
mieux vaut le prevoir au niveau de la conception du code html et rajoutant un prefixe dans l'id ...
('input','id','check_idcheck*')

**le_chomeur** · 11/06/2009, 11h47

mouai , on va pas pinailler , ça va alourdir la méthode en fait :-/

Déja pas mal , a partir d'une méthode on récupère pas mal de trucs :p

**SpaceFrog** · 11/06/2009, 13h59

je pense que l'on pourrait faire une variante:

Code :

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

document.modifyElementsByReg

vu qu'a& priori lke but sera de boucler sur le tableau obtenu pour modifier les éléments
on peut soit stocker les groupes d'elements dans des tableaux puis boucler dessus à chaque fois que c'est nécessaire,
soit on fait directemetn dans une fonction
il suffirait d'ajouter l'attribut à modifier et sa nouvelle valeur ...

**Auteur** · 12/06/2009, 00h25

le bug IE sur la méthode test() a été corrigé sous IE 7 et IE 8 ?

Au quel cas il faut réinitialiser la valeur lastIndex. En ce qui me concerne je fais un

Code :

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

reg.test("");

après l'appel de la méthode test().

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

arf ou le fameux une fois sur deux...

Voici la version en modification avec un exemple d'utilisation

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script type="text/javascript">
 
document.modElementsByReg=function(tag,attr,reg,mod,val){
 
var tabElts=document.body.getElementsByTagName(tag);
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
 
 
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 		  		}
 		else {return	false;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
	         if(reg.test(tabElts[i][attr])){
	         tabElts[i].style[mod]=val;}
	         }
	         reg.test("");
	i++;         
	}
 
}
 
</script>
 
 
 
<title>Nouvelle page 1</title>
</head>
 
<body >
<ul>
	<li id="rub1" onclick="document.modElementsByReg('li','id',/^rub[23]$/,'backgroundColor','white');this.style.backgroundColor='blue'">rubrique1</li>
	<li id="menu1" onclick="document.modElementsByReg('li','id',/^menu[2345]$/,'backgroundColor','white');this.style.backgroundColor='red'">menu1</li>
	<li id="menu2" onclick="document.modElementsByReg('li','id',/^menu[1345]$/,'backgroundColor','white');this.style.backgroundColor='red'">menu2</li>
	<li id="rub2" onclick="document.modElementsByReg('li','id',/^rub[13]$/,'backgroundColor','white');this.style.backgroundColor='blue'">rubrique2</li>
	<li id="menu3" onclick="document.modElementsByReg('li','id',/^menu[1245]$/,'backgroundColor','white');this.style.backgroundColor='red'">menu3</li>
	<li id="menu4" onclick="document.modElementsByReg('li','id',/^menu[1235]$/,'backgroundColor','white');this.style.backgroundColor='red'">menu4</li>
	<li id="rub3" onclick="document.modElementsByReg('li','id',/^rub[12]$/,'backgroundColor','white');this.style.backgroundColor='blue'">rubrique1</li>
	<li id="menu5" onclick="document.modElementsByReg('li','id',/^menu[1234]$/,'backgroundColor','white');this.style.backgroundColor='red'">menu5</li>
</ul>			
</div>
</body>
</html>

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

et la version getELemntsByIsReg corrigée du bug signalé par Auteur

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript">
document.getElementsByReg=function(tag,attr,reg,mod,val){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
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]);}
	         }
	         reg.test("");
	i++;         
	}
return tabReg;
}
</script>
 
 
 
<title>Nouvelle page 1</title>
</head>
 
<body onload="alert(document.getElementsByReg('li','id','rub*').length)" />
<ul>
	<li id="rub1" >rubrique1</li>
	<li id="menu1" >menu1</li>
	<li id="menu2" >menu2</li>
	<li id="rub2" >rubrique2</li>
	<li id="menu3" >menu3</li>
	<li id="menu4" >menu4</li>
	<li id="rub3" >rubrique1</li>
	<li id="menu5">menu5</li>
</ul>			
</div>
</body>
</html>

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

Contribuez

Discussions similaires

Partager

Partager