[Résolu] Recherche JS par caractère universel ou expression régulière

Bonjour,

J'ai une liste d'images qui peuvent être de différents formats, disons jpg, svg, png ou webp.

<img class="picture" src="im/pr/2099G.jpg" id="2099X510Xjpg" alt="texte un" />

<img class="picture" src="im/pr/138G.svg" id="138X320Xsvg" alt="texte deux" />

<img class="picture" src="im/pr/2501G.webp" id="2501X190Xwebp" alt="texte trois" />

Dans une boucle JS j'ai besoin de récupérer quelques valeurs placées dans les attributs HTML.

J'y arrive de la façon suivante :

/* tab_ca_id[i] correspond au numéro de l'image, donc 2099 puis 138 puis 2501 */

let imax = document.querySelector ('img[src="im/pr/' + tab_ca_id[i] + 'G.jpg"]');

if (imax === null)
{
imax = document.querySelector ('img[src="im/pr/' + tab_ca_id[i] + 'G.svg"]');
}

etc.

Cela fonctionne mais c'est assez horrible.

Je n'ai pas trouvé en JS l'équivalent du caractère * en css.
Cela existe-t-il ?
Autrement une expression régulière mais je ne sais pas trop comment l'intégrer dans la déclaration.
Ou autre ?

Merci d'avance.
Modifié par boteha_2 (20 Oct 2024 - 17:23)

Bonsoir,

si le nom de fichier est connu, que ce fichier existe mais que son extension peut varier, la valeur de l'attribut à rechercher peut-être alors réduite au nom du fichier sans son extension:

ex :

let imax = document.querySelector ('img[src^="im/pr/' + tab_ca_id[i] + 'G."]');

Est ce que cela conviendrait ?

voir : https://developer.mozilla.org/fr/docs/Web/CSS/Attribute_selectors#attrvaleur_4 si j'ai compris la question

edit , j'ai gardé le . pour ne pas posé le sélecteur sur GG ou Gcakechose
Modifié par gcyrillus (20 Oct 2024 - 21:05)

Bonjour gcyrillus,

Merci de ton suivi

Cela convient parfaitement.

tab_ca_id + 'G.' est bien un identifiant unique (même sans le ".").

Mozilla a écrit :
[attr^=valeur]
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.

Je ne connaissais pas...

Test concluant dans la vie réelle.

J'attends un peu avant de cocher Résolu.



Modifié par boteha_2 (20 Oct 2024 - 21:26)

Bonjour,

Il existe donc différents codes afin de cibler un attribut par une partie de sa valeur.

Par contre, s'agissant d'un id cherché par getElementById y a-t-il moyen de chercher par une partie de la valeur de l'id ?

id="2010X235Xsvg"

getElementById ('2010X' + un petit paquet inconnu derrière)

Je subodore que ce n'est pas possible...

Bonsoir,

Oui, même principe via querySelector : https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector
exemple

let myID = document.querySelector ('[id^="2010X"]')

Ils suffit de passer en paramètre un selecteur CSS(simple ou complexe).

QuerySelector renvoit le premier element correspondant au seleceur.
Si l'idée est de cibler plusieurs éléments , il faut alors utilisé querySelectorAll() https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll

Les sélecteurs CSS sont nombreux https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors

- Sélecteurs de type, de classe, et d'ID https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
- Sélecteurs d'attributs https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
- Pseudo-classes et Pseudo-éléments https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
- Sélecteurs combinateurs https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators
Modifié par gcyrillus (22 Oct 2024 - 23:57)

Mon Dieu ! Je viens de m'apercevoir qu'il y a deux sélecteurs d'attributs que je ne connaissais pas :

[attr~=value]
[attr|=value]

Quand je pense au problème qu'ils m'auraient aidé à résoudre dans certaines situations !

Bonjour gcyrillus,

Merci de ton suivi et de tous ces liens utiles.

gcyrillus a écrit :
Oui, même principe via querySelector : https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector
exemple

let myID = document.querySelector ('[id^="2010X"]')

D'accord, un id est un attribut, mais ma question était de savoir si l'on pouvait obtenir la même souplesse avec la méthode getElementById ().

getElementById ('2010X' + un petit paquet inconnu derrière)

Je reconnais que la question n'est pas importante mais j'ai entendu dire que getElementById est plus rapide que document.querySelector

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi et de tous ces liens utiles.



D'accord, un id est un attribut, mais ma question était de savoir si l'on pouvait obtenir la même souplesse avec la méthode getElementById ().

getElementById ('2010X' + un petit paquet inconnu derrière)

Je reconnais que la question n'est pas importante mais j'ai entendu dire que getElementById est plus rapide que document.querySelector

Bonjour,

Je ne pense pas, il va falloir que tu trouve la valeur de ce petit paquet inconnu en parcourant le DOM avant de la passer a getElementById , en final, tu vas devoir réécrire une fonction qui fait ce que fait déjà querySelector(). Il y a peu de chance qu'elle soit plus rapide qu'une fonction native.

Cdt

gcyrillus a écrit :
Je ne pense pas, il va falloir que tu trouve la valeur de ce petit paquet inconnu en parcourant le DOM avant de la passer a getElementById , en final, tu vas devoir réécrire une fonction qui fait ce que fait déjà querySelector(). Il y a peu de chance qu'elle soit plus rapide qu'une fonction native.

C'est noté.

Je coche Résolu.

Encore merci.