Journal Lister rapidement les liens d'une page web

Posté par (page perso) . Licence CC by-sa.
26
27
fév.
2018

Il y a quelques jours je suis tombé sur une page web cul-de-sac. Pas un rongeur pour se la rat-comté.

J'ai donc tenté une inspection du HTML pour tenter d'y voir plus clair, et là j'me suis dit qu'une petite formule de JavaScript me donnerait une réponse limpide quant à la présence de lien dans la page :

javascript:document.querySelectorAll('a').forEach(console.log)
Ça rentre à l'aise dans un marque page, et ça peut dépanner. En plus l'affichage est celui, enrichi, des nœuds HTML dans la console de Firefox. Évidemment, ça marche pour l'importe quelle balise citée dans le querySelectorAll : img ? link ?

J'ai ajouté la formule à mon http://www.grimoire-command.es/post/2018/List-web-page-links-in-Firefox

  • # Merci pour l'astuce

    Posté par . Évalué à 2.

    Pourquoi faire compliqué quand on peut faire simple… merci pour cette astuce sympa, je note !

    Fais-moi plaisir, apporte-moi une clope, un whisky et toi. -- Matmatah

  • # Inspector

    Posté par . Évalué à 3.

    l'affichage est celui, enrichi, des nœuds HTML dans la console de Firefox.

    Et la mise en surbrillance du lien au survol comme dans l'inspecteur. Ça c'est magique !
    Le document.querySelectorAll('a') est simple et connu mais je n'avais jamais essayé d'utiliser directement console.log pour la sortie, j'affichais un bête JSON. (J'ai voulu voir si FF était en avance sur son principal concurrent mais ça marche aussi sous Chrome).

  • # Plugins vim

    Posté par (page perso) . Évalué à 7.

    Si tu utilises un plugin vim pour ton navigateur, alors tu as généralement une touche qui rend tous les liens bien accessibles pour les sélectionner au clavier.
    Par example, pour moi, ça donne ça :
    Imgur

    Et si je tape "vq", ça va pertinenter ton journal.

  • # Lapin compris

    Posté par (page perso) . Évalué à 4.

    Je n'ai pas compris ce journal :'( je me sens bête. Qu'est-ce une page web cul-de-sac ? Un exemple ?

    Et cette ligne de code javascript, en quoi simplifie-t-elle la vie ? Je veux dire, ok, je vois bien que ça permet d'afficher tous les liens de la page dans l'outil de dev de Firefox, et ensuite ? Quel rapport avec le marque page ? est-ce qu'il y'a moyen d'exécuter l'outil de dev et une ligne de javascript via un raccourci vers un marque page ? si oui, je n'ai pas trouvé comment…

    Sinon, effectivement, je trouve qu'une extension pour créer des raccourcis claviers de manière dynamique vers les liens, comme le propose Konqueror par exemple, serait un gros plus. Ça existe ?

    • [^] # Re: Lapin compris

      Posté par (page perso) . Évalué à 5.

      J'ai appelé page cul-de-sac une page qui ne permet pas de naviguer plus loin sur le net, donc qui ne comporte aucun lien vers d'autres pages.

      Du coup, lister les liens d'une page, ça permet (dans mon cas) de vérifier rapidement s'il y a un lien à trouver la page, ou non.

      Enfin, tu peux créer un marque-page depuis le volet des marque-pages, et dans ce cas, tu peux y mettre ce que tu veux dans le champs "Location" (peut être "destination" en français). Si tu y mais du texte commençant par javascript: alors la suite sera interprétée comme du JavaScript exécuté sur la page courante.

      Du coup, t'arrives sur une page, t'y trouves pas de liens, tu cliques sur le marque-pages préparé, puis F12 -> console, et là la liste des liens de la page t'attend :-)

      La liberté ne s'use, que si on ne s'en sert pas.

  • # Intéressant comme idée :)

    Posté par . Évalué à 4.

    Tu peux passer également par la fonction console.table qui me paraît plus lisible:

    console.table(document.querySelectorAll('a'))
    

    Note: Control-Shift + K permet d'ouvrir la console

    Pas mal d'astuces à découvrir sur ton site. Merci !

    • [^] # Re: Intéressant comme idée :)

      Posté par . Évalué à 1.

      Pour donner le résultat attendu il me semble qu'il faut plutôt faire :
      console.table(Array.from(document.querySelectorAll('a')))

      • [^] # Re: Intéressant comme idée :)

        Posté par (page perso) . Évalué à 1.

        Concernant la question : est-ce qu'il y a un lien sur cette page ?

        On peut en effet se contenter d'ouvrir la console avec CTRL-MAJ-K puis saisir : $$('a')

        Pour en faire un marque-pages avec Firefox 58 j'ai seulement la version suivante qui fonctionne :

        console.log(document.querySelectorAll('a'))

        La liberté ne s'use, que si on ne s'en sert pas.

        • [^] # Re: Intéressant comme idée :)

          Posté par . Évalué à 1.

          Effectivement ce n'est pas cette question que je réponds mais à la remarque de Vroum concernant la commande console.table() qui produit un résultat plus agréable à consulter à condition qu'on lui passe un tableau. Mais ce n'est pas le cas de document.querySelectorAll qui produit une NodeList et n'est pas très bien formatée. D'où l'ajout d'un Array.from qui converti le NodeList en plain-old Array.

  • # avec $x

    Posté par . Évalué à 2.

    Dans chrome et firefox il y a aussi $("a") ou $x("//a") (pour xpath).

    Si tu cherches à affiner plus la recherche c'est utile (genre avoir tous les liens en 3ème colonne du tableau): $x(//table//tr/td[3]//a)

  • # En XSLT

    Posté par . Évalué à 3. Dernière modification le 28/02/18 à 19:51.

    Pour les masochistes comme moi qui veulent rester dans les « vrais » technologies du Web, en XSLT, plus long mais qui n'est pas un one-liner sans contexte qui aura perdu son sens dans le future quand javascript aura disparu (ahah!) :

    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        >
    
    <xsl:template match="a">
        <li>
        <xsl:copy>
            <xsl:copy-of select="@href"/>
            <xsl:value-of select="@href"/>
        </xsl:copy>
        </li>
    </xsl:template>
    
    <xsl:template match="/">
            <html><body><ul>
            <xsl:apply-templates select="//a"/>
        </ul></body></html>
    </xsl:template>
    </xsl:stylesheet>

    Donc en plus la sortie est du standard réutilisable, si vous voulez chaîner les transformations, et ne dépend pas d'un browser hyper complexe avec sa fonction de highlihting « géniale ». Et c'est forcément du HTML correct, sans même que je vérifie. Et les sélecteurs c'est du XPath, comme dit plus haut c'est très pratique.

    Edit : et que dire des autres technologies « modernes » comme markdown qui ne te laisse pas écrire du XML (un langage à balise, la base de chez base du web) directement dans un commentaire sur Linuxfr ?…

    • [^] # Re: En XSLT

      Posté par (page perso) . Évalué à 3.

      J'ai corrigé le markdown, j'espère avoir respecter ce que tu voulais dire, ça fait longtemps que je n'ai plus fait de xslt.

      « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

      • [^] # Re: En XSLT

        Posté par . Évalué à 2.

        Merci ! C'est bon. Même si au final je ne vois pas le source et ne sait pas comment tu as fait ;-)

        • [^] # Re: En XSLT

          Posté par (page perso) . Évalué à 4.

          Voilà le source:

          ~~~xml
          <xsl:stylesheet
              version="1.0"
              xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
              >
          
          <xsl:template match="a">
              <li>
              <xsl:copy>
                  <xsl:copy-of select="@href"/>
                  <xsl:value-of select="@href"/>
              </xsl:copy>
              </li>
          </xsl:template>
          
          <xsl:template match="/">
                  <html><body><ul>
                  <xsl:apply-templates select="//a"/>
              </ul></body></html>
          </xsl:template>
          </xsl:stylesheet>
              ~~~
          

          « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

  • # )

    Posté par . Évalué à 0.

    Il manque une parenthèse sur la commande dans ton lien "grimoire".

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.