Extraire une partie d'une URL/d'un code HTML

**spip93** · 15/09/2021, 19h52

Bonjour à tous et à toutes,

J'ai un agenda avec une liste d'événements dont voici le code HTML pour 1 événement (je précise pour couper court aux polémiques que ce n'est pas moi qui ait généré ce code. Il est pourri, je vous l'accorde, mais je n'y peux rien

) :

Code html :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div class="node-item node-event clearfix" id="event-260318">
    <div class="media">
        <div class="media-left">
            <div class="event-actions">
 
                <a href="https://nom_site.fr/node/content/nid/260318" target="_blank" title="Accéder au permalien (nouvel onglet)">
                    <span class="btn btn-link form-inline pull-right">
                        <i class="fas fa fa-link"></i>
                    </span>
                </a>
 
                <a class="btn btn-link pull-right" title="Editer" href="https://nom_site.fr/node/edit/nid/260318">
                    <i class="fas fa fa-pencil"></i>
                </a>
 
 
                <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip" data-original-title="Exporter">
                    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-download"></i>
                    </button>
 
                    <ul class="dropdown-menu"
                        aria-labelledby="dropdownContentExport">
                        <li>
                            <a href="https://nom_site.fr/agenda/export?document=pdf&amp;nid=260318" target="_blank">
                                <i class="fa fa-file-pdf-o"></i> PDF
                            </a>
                        </li>
                        <li>
                            <a href="https://nom_site.fr/agenda/export?document=csv&amp;nid=260318" target="_blank">
                                <i class="fa fa-file-excel-o"></i> CSV
                            </a>
                        </li>
                        <li>
                            <a href="https://nom_site.fr/agenda/export?document=ics&amp;nid=260318" target="_blank">
                                <i class="fa fa-calendar"></i> ICS
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <a target="_blank" href="/page-evenement-test-2?tab=news#node-260318">
 
            </a>
        </div>
        <div class="media-body">
            <h4><a target="_blank" href="/page-evenement-test-2?tab=news#node-260318">Evénement test 2</a></h4>
            <p>Du Vendredi 15 Octobre 2021 à 09h00 au Vendredi 22 Octobre 2021 à 23h59</p>
            <div class="node-item-tags">
                <a class="badge" href="https://nom_site.fr/node/tag/tid/26391">
                    Animation jeunesse </a>
                <a class="badge" href="https://nom_site.fr/node/tag/tid/26400">
                    Jeunesse </a>
                <a class="badge" href="https://nom_site.fr/node/tag/tid/26405">
                    Concert </a>
                <a class="badge" href="https://nom_site.fr/node/tag/tid/26581" style="background-color:#31e8db !important;color:#000000 !important;">
                    Place de la Mairie </a>
            </div><p>Description de l'événement sur environ 100 caractères dans le but de donner envie de cliquer dessus.</p>
        </div>
        <div class="event-description">
            <span class="event-description-close fas fa fa-times">                
            </span>
        </div>
    </div>
</div>

Je souhaiterais :
- extraire de ce code HTML le numéro du nœud (en l'occurrence 260318)
- insérer ce numéro de nœud dans une ligne de code comme ceci :

Code html :

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

<img class="img-responsive" src="https://nom_site.fr/data/nom_site.fr/application/node/260318/thumb.jpg">

- et enfin placer cette ligne de code entre les balises <a target="_blank" href="/page-evenement-test-2?tab=news#node-260318"> (en ligne 42 du code ci-dessus) pour avoir ceci :

Code html :

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

1
2
3
<a target="_blank" href="/page-evenement-test-2?tab=news#node-260318">
                <img class="img-responsive" src="https://nom_site.fr/data/nom_site.fr/application/node/260318/thumb.jpg">
</a>

En JS, je sais (à peu près) récupérer l'intégralité d'une URL (ou un lien si vous préférez), mais pas pas juste une partie. Pour le reste (insérer le N° de nœud dans une ligne de code + placer cette ligne où je veux), je pense savoir faire.
Vous l'aurez compris, je ne sais pas comment extraire le N° de nœud dans un code HTML.

Auriez-vous SVP une idée de comment faire ?

D'avance merci pour vos réponses

Bonne journée

**Gobble** · 15/09/2021, 20h21

Hello,

Avec quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
var url = 'https://nom_site.fr/node/content/nid/260318';
 
var params = url.substring(1).split('/');  
 
var identifiant =  params.slice(-1).pop();  //260318
 
//ou
 
var identifiant =  params[params.length - 1]

**-Nikopol-** · 15/09/2021, 20h44

@gobble, le substring ne sert à rien

Sinon autre solution avec une petite regex

Code :

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

1
2
3
 
let string = "https://nom_site.fr/data/nom_site.fr/application/node/260318/thumb.jpg";
let nodeId = string.match(/\d+/g).pop()

**SpaceFrog** · 16/09/2021, 10h08

Sauf il il peut y avoir du numérique ailleurs dans l'url ...
Par sécurité je ferais plutot:

Code :

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

1
2
3
let string = "https://nom_site.fr/data/nom_site.fr/application/node/260318/thumb.jpg";
let nodeId = string.match(/node\/([^\/]+)/).pop();
console.log (nodeId);

pour s'assurer que tu récupères le numérique suivant "node/"

**spip93** · 16/09/2021, 10h14

Merci beaucoup pour votre réponse à tous

, je vais tester tout ça.

J'ai 2 précisions à faire (qui amènent d'autres questions) :
Première précision : comme il s'agit d'un agenda, j'ai une liste d'événements. Le code HTML que j'ai donné ne correspond qu'à 1 seul événement.
Seconde précision : (vous l'aurez sans doute compris) cette liste d'événements est "dynamique" et, par conséquent, les N° de nœud vont bouger dans le temps.

Du coup, je voulais savoir, comment faire pour :
- Rechercher l'URL https://nom_site.fr/node/content/nid/xxxxxx dans tout une page HTML et plus précisément dans une liste dynamique d'événements
- Extraire le N° de nœud de chaque événement

de façon à construire l'URL de l'image de chaque événement et l'insérer le tout dans le code HTML de chaque événement également ?

Je demande ça parce que, de ce que je comprends de votre code, vous partez du principe (et c'est de ma faute, j'aurais dû le préciser au départ

) :
- qu'il n'y a qu'un événement
- que je connais le numéro de nœud de cet événement
- que ce numéro de nœud est toujours le même
or ce n'est pas le cas.
Du coup, malgré votre code (encore une fois merci), dans ma liste d'événements, je ne peux pas dire "j'extrais le N° de nœud du premier événement, pour l'utiliser et le placer dans le code du premier événement. J'extrais le N° de nœud du second événement, pour l'utiliser et le placer dans le code du second événement..." Je ne sais pas si je suis clair, mais je ne sais pas comment faire pour faire une recherche ciblée, pour distinguer un élément dans une liste, qui plus est, dynamique.

Est-ce que vous auriez une idée SVP ?

Au besoin, je peux vous donner un fichier HTML avec le code de tout mon agenda

Merci par avance en tout cas

**darkstar123456** · 16/09/2021, 10h57

Bonjour,

On ne sait pas ce qu'il faut faire de ce "nodeId" donc difficile de faire un exemple complet mais voici un bout de code qui récupère tous les liens de la page
On va ensuite les parcourir un à un en regardant si leur forme correspond à ce qu'on cherche (https://nom_site.fr/node/content/nid/XXXXXXXXX), et si oui, on va définir une variable avec le nodeId.
Je savais pas trop quoi faire de cette valeur, je l'ai donc simplement mis dans une liste de résultats (voir tout en bas de page pour ce résultat). Codepen : https://codepen.io/DarkStar123456/pen/MWorgLv

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let display_results = document.getElementById("results")
let links = document.querySelectorAll('a');
// On créé un pattern qui nous servira à la fois pour tester le format du lien mais également pour faire un replace() afin de ne récupérer que le nodeId
let pattern = new RegExp("^https://nom_site.fr/node/content/nid/([^\/]+)/?$", "gi");
 
links.forEach(function(v) {
  // Si le lien a la forme qu'on cherche
  if(pattern.test(v.href)) {
    let nodeId = v.href.replace(pattern, '$1');
    // Je sais pas quoi faire de ce nodeId, je vais donc juste mettre tous mes résultats dans ul#results
    let li = document.createElement("li");
    li.append(nodeId);
    display_results.append(li);
  }
});

NB : Si les liens à parser possédaient n'importe quoi qui puisse les identifier rapidement (une classe, un attribut ou un parent), le code serait plus facile et plus rapide car on aurait pas besoin de parser tous les liens de la page

**jreaux62** · 16/09/2021, 11h04

Bonjour,

1- il serait bien plus simple de modifier directement le code HTML généré, non ?

Où se trouve le script (PHP ?) qui génère ce code ?
C'est lui qu'il faut modifier.

2- @darkstar123456
pour chaque évènement, on a juste besoin d'extraire le node-id :

Code html :

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

<div class="node-item node-event clearfix" id="event-260318">

donc, au lieu de :

Code :

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

let links = document.querySelectorAll('a');

il suffit de parser :

Code :

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

let nodes = document.querySelectorAll('.node-item');

**spip93** · 16/09/2021, 12h01

Envoyé par jreaux62

1- il serait bien plus simple de modifier directement le code HTML généré, non ?

Et oui, j'aimerais bien que ça soit si simple, mais je ne peux pas modifier le code HTML. (C'est un peu long et compliqué à expliquer, mais) Le code HTML de l'agenda est appelé via une variable TWIG.

Visuellement, voici ce que j'ai :
Nom : agenda_accueil.jpg
Affichages : 437
Taille : 94,9 Ko

Nom : agenda_accueil.jpg
Affichages : 437
Taille : 94,9 Ko

Et voici ce que je voudrais avoir :
Nom : agenda.jpg
Affichages : 444
Taille : 160,9 Ko

c'est à dire les vignettes à gauche.

Pour cela, je ne sais pas si c'est clair, je souhaiterais :
- Extraire le N° de nœud de chaque événement
- (A partir de ce N° de nœud) De construire le code HTML de la vignette de chaque événement (https://nom_du_site.fr/data/nom_du_s...lication/node/xxxxxx/thumb.jpg)
- Insérer le code HTML de la vignette dans l'événement kivabien (ci-dessous aux lignes 101, 176, 251 et 326) de façon à ce qu'elle apparaisse à gauche de chaque événement
sachant que le numéro de noeud est amené à changer régulièrement puisqu'il s'agit d'un agenda (donc une liste d'événements).

(Si ça peut vous aider à y voir plus clair) Voici le code HTML de mon agenda :

Code html :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<div class="bloc_agenda">
    <h2 class="block_title">
        Agenda
    </h2>
    <div class="agenda">
 
        <a href="https://nom_du_site.fr/node/content/nid/244546" target="_blank"
            title="Accéder au permalien (nouvel onglet)">
            <span class="btn btn-link  form-inline pull-right">
                <i class="fas fa fa-link"></i>
            </span>
        </a>
 
        <a class="btn btn-link pull-right" title="Editer" href="https://nom_du_site.fr/node/edit/nid/244546">
            <i class="fas fa fa-pencil"></i>
        </a>
 
        <a class="btn btn-link pull-right rss-feed-link" href="https://nom_du_site.fr/agenda/rss/nid/244543?"
            target="_blank" data-toggle="tooltip" title="" data-placement="top"
            data-original-title="Obtenir le flux RSS">
            <i class="fas fa fa-rss"></i>
        </a>
 
        <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip"
            data-original-title="Exporter">
            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-download"></i>
            </button>
 
            <ul class="dropdown-menu" aria-labelledby="dropdownContentExport">
                <li>
                    <a href="https://nom_du_site.fr/agenda/export?document=pdf&amp;nid=244546" target="_blank">
                        <i class="fa fa-file-pdf-o"></i> PDF
                    </a>
                </li>
                <li>
                    <a href="https://nom_du_site.fr/agenda/export?document=csv&amp;nid=244546" target="_blank">
                        <i class="fa fa-file-excel-o"></i> CSV
                    </a>
                </li>
                <li>
                    <a href="https://nom_du_site.fr/agenda/export?document=ics&amp;nid=244546" target="_blank">
                        <i class="fa fa-calendar"></i> ICS
                    </a>
                </li>
            </ul>
        </div>
        <h3>Agenda du mois</h3>
        <hr>
 
        <div class="node-item node-event clearfix" id="event-260315">
            <div class="media">
                <div class="media-left">
                    <div class="event-actions">
 
 
                        <a href="https://nom_du_site.fr/node/content/nid/260315" target="_blank"
                            title="Accéder au permalien (nouvel onglet)">
                            <span class="btn btn-link  form-inline pull-right">
                                <i class="fas fa fa-link"></i>
                            </span>
                        </a>
 
                        <a class="btn btn-link pull-right" title="Editer"
                            href="https://nom_du_site.fr/node/edit/nid/260315">
                            <i class="fas fa fa-pencil"></i>
                        </a>
 
 
                        <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip"
                            data-original-title="Exporter">
                            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-download"></i>
                            </button>
 
                            <ul class="dropdown-menu" aria-labelledby="dropdownContentExport">
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=pdf&amp;nid=260315"
                                        target="_blank">
                                        <i class="fa fa-file-pdf-o"></i> PDF
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=csv&amp;nid=260315"
                                        target="_blank">
                                        <i class="fa fa-file-excel-o"></i> CSV
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=ics&amp;nid=260315"
                                        target="_blank">
                                        <i class="fa fa-calendar"></i> ICS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a target="_blank" href="/page-evenement-test-1?tab=news#node-260315">
 
                    </a>
                </div>
                <div class="media-body">
                    <h4><a target="_blank" href="/page-evenement-test-1?tab=news#node-260315">Evénement test 1</a></h4>
                    <p>Du Vendredi 15 Octobre 2021 à 09h00 au Vendredi 22 Octobre 2021 à 23h59</p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26391">
                            Animation jeunesse </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26399">
                            A partir de 6 ans </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26407">
                            Club de lecture </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26580"
                            style="background-color:#d62020 !important;color:#ffffff !important;">
                            Lieu indéfini </a>
                    </div>
                    <p>Description de l'événement sur environ 100 caractères dans le but de donner envie de cliquer
                        dessus.</p>
                </div>
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
 
                </div>
            </div>
        </div>
        <div class="node-item node-event clearfix" id="event-260318">
            <div class="media">
                <div class="media-left">
                    <div class="event-actions">
 
 
                        <a href="https://nom_du_site.fr/node/content/nid/260318" target="_blank"
                            title="Accéder au permalien (nouvel onglet)">
                            <span class="btn btn-link  form-inline pull-right">
                                <i class="fas fa fa-link"></i>
                            </span>
                        </a>
 
                        <a class="btn btn-link pull-right" title="Editer"
                            href="https://nom_du_site.fr/node/edit/nid/260318">
                            <i class="fas fa fa-pencil"></i>
                        </a>
 
 
                        <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip"
                            data-original-title="Exporter">
                            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-download"></i>
                            </button>
 
                            <ul class="dropdown-menu" aria-labelledby="dropdownContentExport">
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=pdf&amp;nid=260318"
                                        target="_blank">
                                        <i class="fa fa-file-pdf-o"></i> PDF
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=csv&amp;nid=260318"
                                        target="_blank">
                                        <i class="fa fa-file-excel-o"></i> CSV
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=ics&amp;nid=260318"
                                        target="_blank">
                                        <i class="fa fa-calendar"></i> ICS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a target="_blank" href="/page-evenement-test-2?tab=news#node-260318">
 
                    </a>
                </div>
                <div class="media-body">
                    <h4><a target="_blank" href="/page-evenement-test-2?tab=news#node-260318">Evénement test 2</a></h4>
                    <p>Du Vendredi 15 Octobre 2021 à 09h00 au Vendredi 22 Octobre 2021 à 23h59</p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26391">
                            Animation jeunesse </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26400">
                            Jeunesse </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26405">
                            Concert </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26581"
                            style="background-color:#31e8db !important;color:#000000 !important;">
                            Place de la Mairie </a>
                    </div>
                    <p>Description de l'événement sur environ 100 caractères dans le but de donner envie de cliquer
                        dessus.</p>
                </div>
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
 
                </div>
            </div>
        </div>
        <div class="node-item node-event clearfix" id="event-260324">
            <div class="media">
                <div class="media-left">
                    <div class="event-actions">
 
 
                        <a href="https://nom_du_site.fr/node/content/nid/260324" target="_blank"
                            title="Accéder au permalien (nouvel onglet)">
                            <span class="btn btn-link  form-inline pull-right">
                                <i class="fas fa fa-link"></i>
                            </span>
                        </a>
 
                        <a class="btn btn-link pull-right" title="Editer"
                            href="https://nom_du_site.fr/node/edit/nid/260324">
                            <i class="fas fa fa-pencil"></i>
                        </a>
 
 
                        <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip"
                            data-original-title="Exporter">
                            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-download"></i>
                            </button>
 
                            <ul class="dropdown-menu" aria-labelledby="dropdownContentExport">
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=pdf&amp;nid=260324"
                                        target="_blank">
                                        <i class="fa fa-file-pdf-o"></i> PDF
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=csv&amp;nid=260324"
                                        target="_blank">
                                        <i class="fa fa-file-excel-o"></i> CSV
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=ics&amp;nid=260324"
                                        target="_blank">
                                        <i class="fa fa-calendar"></i> ICS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a target="_blank" href="/page-evenement-test-3?tab=news#node-260324">
 
                    </a>
                </div>
                <div class="media-body">
                    <h4><a target="_blank" href="/page-evenement-test-3?tab=news#node-260324">Evénement test 3</a></h4>
                    <p>Du Vendredi 15 Octobre 2021 à 09h00 au Vendredi 22 Octobre 2021 à 23h59</p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26395">
                            Animation musique </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26402">
                            Tout public </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26405">
                            Concert </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26580"
                            style="background-color:#d62020 !important;color:#ffffff !important;">
                            Lieu indéfini </a>
                    </div>
                    <p>Description de l'événement sur environ 100 caractères dans le but de donner envie de cliquer
                        dessus.</p>
                </div>
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
 
                </div>
            </div>
        </div>
        <div class="node-item node-event clearfix" id="event-260326">
            <div class="media">
                <div class="media-left">
                    <div class="event-actions">
 
 
                        <a href="https://nom_du_site.fr/node/content/nid/260326" target="_blank"
                            title="Accéder au permalien (nouvel onglet)">
                            <span class="btn btn-link  form-inline pull-right">
                                <i class="fas fa fa-link"></i>
                            </span>
                        </a>
 
                        <a class="btn btn-link pull-right" title="Editer"
                            href="https://nom_du_site.fr/node/edit/nid/260326">
                            <i class="fas fa fa-pencil"></i>
                        </a>
 
 
                        <div class="dropdown pull-right" title="" data-placement="top" data-toggle="tooltip"
                            data-original-title="Exporter">
                            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownContentExport"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-download"></i>
                            </button>
 
                            <ul class="dropdown-menu" aria-labelledby="dropdownContentExport">
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=pdf&amp;nid=260326"
                                        target="_blank">
                                        <i class="fa fa-file-pdf-o"></i> PDF
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=csv&amp;nid=260326"
                                        target="_blank">
                                        <i class="fa fa-file-excel-o"></i> CSV
                                    </a>
                                </li>
                                <li>
                                    <a href="https://nom_du_site.fr/agenda/export?document=ics&amp;nid=260326"
                                        target="_blank">
                                        <i class="fa fa-calendar"></i> ICS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a target="_blank" href="/page-evenement-test-4?tab=news#node-260326">
 
                    </a>
                </div>
                <div class="media-body">
                    <h4><a target="_blank" href="/page-evenement-test-4?tab=news#node-260326">Evénement test 4</a></h4>
                    <p>Du Vendredi 15 Octobre 2021 à 09h00 au Vendredi 22 Octobre 2021 à 23h59</p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26393">
                            Animation multimédia </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26401">
                            Adulte </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26408">
                            Atelier </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/26580"
                            style="background-color:#d62020 !important;color:#ffffff !important;">
                            Lieu indéfini </a>
                    </div>
                    <p>Description de l'événement sur environ 100 caractères dans le but de donner envie de cliquer
                        dessus.</p>
                </div>
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
 
                </div>
            </div>
        </div>
 
    </div>
</div>

Sachant aussi, dans ce code, je n'ai pas(plus) la main sur le HTML situé dans la div agenda
Mes seules armes sont le CSS et le JS, d'où ma question.

Dites-moi si vous avez des questions ou si vous avez besoin d'autres billes.

Encore merci à vous pour votre aide

**darkstar123456** · 16/09/2021, 12h32

Bonjour,

A partir de mon code précédent, il suffit de créer une balise img à la place de la balise li.
Ca donne ça : https://codepen.io/DarkStar123456/pen/XWgVJyd

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let links = document.querySelectorAll('a');
let pattern = new RegExp("^https://nom_du_site.fr/node/content/nid/([^\/]+)/?$", "gi");
 
links.forEach(function(v) {
  // Si le lien a la forme qu'on cherche
  if(pattern.test(v.href)) {
    let nodeId = v.href.replace(pattern, '$1');
    let img = document.createElement("img");
    img.src = "https://nom_du_site.fr/data/nom_du_site.fr/application/node/"+nodeId+"/thumb.jpg";
    // Pour l'exemple, je vais mettre la même image pour tous les events mais il faut utiliser la ligne ci-dessus
    img.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
    img.alt = "ici l'image de l'événement";
    v.parentNode.append(img);
  }
});

**spip93** · 16/09/2021, 18h35

@darkstar Ça m'a l'air super tout ça

Merci beaucoup

Je teste ça demain et je vous dis si j'ai des questions
Encore merci

**spip93** · 16/09/2021, 20h43

@Darkstar : C'est bon, (après quelques modifs mineures comme l'attribution d'une classe à mon image) ton script fonctionne

J'ai une autre question : Je n'arrive pas à déplacer ma vignette DANS le lien vers l'événement (ou si vous préférez entre les balises <a target="_blank" href="/page-evenement-test-1?tab=news#node-xxxxxx"> et </a>)
Je mets le code suivant dans la console :

Code :

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

$(".bloc_agenda .agenda .node-event:nth-child(11) .media-left img").insertAfter(".bloc_agenda .agenda .node-event:nth-child(11) .media-left a[href^="/"]");

mais ça ne fonctionne pas

En même temps, même s'il fonctionnait, je ne suis pas sûr que ce script JS place bien ma vignette DANS le lien vers l'événement. Je me demande si ça ne le place pas APRÈS la balise a.

Sauriez-vous comment faire SVP ?

D'avance merci

**NoSmoking** · 17/09/2021, 08h21

Bonjour,
tout d'abord où on utilise jQuery ou JavaScript vanilla mais les eux ensemble c'est plus que moyen !

Il y a 1001 façons de faire, binairement parlant cela ne fait pas tant que cela !
Donc une de celles-là

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
// template adresse image -> $$ remplacé par numéro événement 
const tmplSrc = "https://nom_du_site.fr/data/nom_du_site.fr/application/node/$$/thumb.jpg";
// récup. des éléments concernés
const elements = document.querySelectorAll('[id^="event-"]');
elements.forEach((el) => {
  // récup. numéro de l'événement
  const numEvent = el.id.split("-").pop();
  // récup. élément A de destination
  const oDest = el.querySelector(".media-left").lastElementChild;
  // création de l'image
  const oImg = document.createElement("IMG");
  // affectation attributs
  oImg.src = tmplSrc.replace("$$", numEvent);
  oImg.alt = "thumb-" + numEvent;
  // ajout image dans lien
  oDest.append(oImg);
});

ou plus concise :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// template adresse image -> $$ remplacé par numéro événement 
const tmplSrc = "https://nom_du_site.fr/data/nom_du_site.fr/application/node/$$/thumb.jpg";
// récup. des éléments concernés
const elements = document.querySelectorAll('[id^="event-"]');
elements.forEach((el) => {
  // récup. numéro de l'événement
  const numEvent = el.id.split("-").pop();
  // récup. élément A de destination
  const oDest = el.querySelector(".media-left").lastElementChild;
  // autre méthode plus concise
  const html = `<img src="${tmplSrc.replace("$$", numEvent)}" alt="thumb-${numEvent}">`;
  // ajout image dans lien
  oDest.insertAdjacentHTML("afterbegin", html);
});

il y aurait lieu de rajouter des tests et avec le CSS qui va bien cela devrait ressembler à ce que tu souhaites.

**spip93** · 21/09/2021, 10h27

Bonjour,

Envoyé par NoSmoking

ou on utilise jQuery ou JavaScript vanilla, mais les eux ensemble c'est plus que moyen !

Désolé si ça n'est pas propre ; j'ai pris des bouts de codes à gauche à droite que j'ai mis à ma sauce, mais sans savoir qu'est-ce qui est du JS et qu'est-ce qui est du jQuery.

J'y connais pas grand chose dans les 2 cas, d'où ma question ici. J'ai demandé une formation à mon responsable en JS, mais rien pour le moment.

Bref...

Merci beaucoup

, je vais regarder ça en effet.
Grâce au code de Darkstar, j'avais déjà 90% de ce que je voulais. Avec ton code NoSmoking, ça devrait combler les 10% restants

Bonne journée

Extraire une partie d'une URL/d'un code HTML

JavaScript

Discussions similaires

Partager

Partager