11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment 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 Smiley lol ) :
<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 :
<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"> pour avoir ceci :
<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 Smiley cligne
Modérateur
Et l'eau,

Je ne suis pas très sûr de comprendre ta demande.

edit: Je viens de mieux comprendre ton souci (tu veux insérer une image dont le chemin est l'ID du lien ?

window.addEventListener('DOMContentLoaded', () =>{
  document.querySelectorAll('a[href*="#node-"]').forEach($a =>{
    let pattern = /#node-(\d+)/,
        id = $a.href.match(pattern).pop(),
        src_img = `https://nom_site.fr/data/nom_site.fr/application/node/${id}/thumb.jpg`,
        img = `<img src="${src_img}" class="img-responsive" alt="miniature" />`;
    $a.insertAdjacentHTML('beforeend', img);
  });
});

Modifié par niuxe (16 Sep 2021 - 16:36)
Meilleure solution
Bonjour Niuxe,
a écrit :
Je viens de mieux comprendre ton souci : tu veux insérer une image dont le chemin est l'ID du lien ?

C'est ça en effet. L'ID du nœud/événement est repris dans l'URL de l'image entre /node/ et /thumb.jpg. C'est pour ça que je voudrais extraire l'ID du nœud/événement

Merci beaucoup pour ta réponse Smiley merci . Ça semble correspondre à ma demande en effet.
Je vais tester tout ça demain.
Je ne manquerai pas de revenir si j'ai des questions Smiley lol

Bonne journée Smiley cligne
Modifié par spip93 (21 Sep 2021 - 22:25)
Sujet clos
Aller à