Sélectionner des id de la forme #texte[n1][n2] avec querySelectorAll

Version imprimable

28/09/2017, 18h18
moimp

Sélectionner des id de la forme #texte[n1][n2] avec querySelectorAll

Bonjour,

Il me semble que j'avais déjà une question similaire mais je ne la retrouve pas. Désolé!
Pour le traitement php, j'ai besoin d'avoir des crochets dans mes id. L'id est de la forme #texte[n1][n2]. La partie [n1][n2] est extraite dans une variable subKeys.
Je veux sélectionner tous les id qui ont les mêmes valeurs n1 et n2 mais pas forcément la même chaîne littérale.
J'ai essayé plusieurs possibilités avec 'id*='+subKeys. J'ai aussi essayé d'échapper les crochets avec une regex mais je n'arrive pas à construire ma regex.
Voici la regex que j'ai essayé: subKeys = subKeys.replace(/(\[||\])/, '\\$1');.

:salut:

Un ID ne peut pas avoir cette forme car elle provoque une erreur :

Citation:

Envoyé par console

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#texte[24][36]' is not a valid selector.

Malgré cette erreur, le sélecteur donne la bonne réponse, exemple :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                label {
                        display: block;
                }
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        // k$all( "[id^='texte[']" ) : Array.from( document.querySelectorAll( "[id^='texte[']" ) )
                        const elemsIDtexte = k$all( "[id^='texte[']" );
                        
                        for ( const elemIDtexte of elemsIDtexte ){
                                klog( elemIDtexte.id, elemIDtexte.textContent );
                        }
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<div id="texte[24][36]">Bonjour !</div>
		<div id="texte[42][63]">Hello !</div>
 
	</main>
</body>
</html>

29/09/2017, 18h48
moimp
Merci avec cependant 2 petites remarques:
for... of ne fonctionne pas avec IE<11.
L'exemple ne correspond pas tout à fait à mon besoin puisque ce qui m'intéresse est de trouver tous les ID qui ont la partie entre crochets identiques quelque soit la chaîne qui précède.
Cependant l'exemple m'a bien aidé et j'ai pu transposer comme ceci:
Code:

1 2 const subKeys = id.substring(id.indexOf('[')), elemsToDel = kTbody.querySelectorAll("[id*='"+subKeys+"']");