IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut Extraire une partie d'une URL/d'un code HTML
    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

  2. #2
    Membre régulier Avatar de Gobble
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    octobre 2014
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : octobre 2014
    Messages : 48
    Points : 87
    Points
    87
    Par défaut
    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]

  3. #3
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 114
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 114
    Points : 11 160
    Points
    11 160
    Billets dans le blog
    5
    Par défaut
    @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()

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 942
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 942
    Points : 65 315
    Points
    65 315
    Billets dans le blog
    1
    Par défaut
    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/"
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut
    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

  6. #6
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 376
    Points
    2 376
    Par défaut
    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

  7. #7
    Membre averti Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 218
    Points : 416
    Points
    416
    Par défaut
    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');

  8. #8
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    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 : 68
Taille : 94,9 Ko

    Et voici ce que je voudrais avoir :
    Nom : agenda.jpg
Affichages : 70
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

  9. #9
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 674
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 674
    Points : 2 376
    Points
    2 376
    Par défaut
    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);
      }
    });

  10. #10
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut
    @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

  11. #11
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut
    @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

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 526
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 526
    Points : 39 042
    Points
    39 042
    Par défaut
    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.

  13. #13
    Membre du Club
    Homme Profil pro
    Infographiste, Webdesigner
    Inscrit en
    juillet 2012
    Messages
    74
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Infographiste, Webdesigner
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 74
    Points : 56
    Points
    56
    Par défaut
    Bonjour,
    Citation Envoyé par NoSmoking Voir le message
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] Extraire une URL et en remplacer qu'une partie
    Par guillaumeIOB dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 01/10/2012, 19h43
  2. Extraire une URL d'un site en Javascript
    Par Toximix dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 09/01/2011, 16h05
  3. [RegEx] Extraire une url d'une chaine
    Par About dans le forum Langage
    Réponses: 1
    Dernier message: 16/04/2008, 21h23
  4. [RegEx] Extraire une URL en excluant certaines extensions
    Par marciv dans le forum Langage
    Réponses: 2
    Dernier message: 13/04/2007, 04h33
  5. [RegEx] [Script]Extraire une url
    Par Hell dans le forum Langage
    Réponses: 9
    Dernier message: 17/10/2004, 15h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo