Journal Lister rapidement les liens d'une page web

Posté par Siltaär (site web personnel) le 27 février 2018 à 11:25. Licence CC By‑SA.

Étiquettes :

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 Christophe G. le 27 février 2018 à 12:10. É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 Faya le 27 février 2018 à 13:42. É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 Axioplase ıɥs∀ (site web personnel) le 27 février 2018 à 14:40. É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 :

Et si je tape "vq", ça va pertinenter ton journal.
- [^] # Re: Plugins vim
  
  Posté par Siltaär (site web personnel) le 27 février 2018 à 16:50. Évalué à 3.
  
  J'ai utilisé vimperator, puis vimFX, puis Saka Keys pour Firefox 57, mais il ne fonctionne plus avec mon Firefox 58 là… Tu utilises quoi du coup ?
  
  La liberté ne s'use, que si on ne s'en sert pas.
  - [^] # Re: Plugins vim
    
    Posté par kna le 27 février 2018 à 17:58. Évalué à 4.
    
    Il y a plusieurs choix, encore en développement pour la plupart : https://linuxfr.org/users/nibel/journaux/le-firefox-nouveau-est-arrive#comment-1720210
  - [^] # Re: Plugins vim
    
    Posté par datross le 27 février 2018 à 17:59. Évalué à 2.
    
    Vimium marche bien chez moi.
  - [^] # Re: Plugins vim
    
    Posté par Siltaär (site web personnel) le 27 février 2018 à 21:03. Évalué à 0.
    
    Saka Key a, probablement depuis Firefox 58, associé mes raccourcis claviers avec une disposition Azerty, alors que j'utilise autre chose (Dvorak-fr pour programmeur pré-Bepo : https://s.d12s.fr/realisations/fr_dvorak_prog ) d'où ma déconvenue. Vimium n'a pas ce problème. Merci.
    
    La liberté ne s'use, que si on ne s'en sert pas.
  - [^] # Re: Plugins vim
    
    Posté par Axioplase ıɥs∀ (site web personnel) le 27 février 2018 à 21:53. Évalué à 2.
    
    cVim, sous Chrome.
    
    J'ai pas utilisé FF depuis des plombes (vimperator au début, puis pentadactyl)
# Lapin compris

Posté par lejocelyn (site web personnel) le 27 février 2018 à 19:18. É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 Siltaär (site web personnel) le 27 février 2018 à 21:00. É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 Vroum le 27 février 2018 à 19:19. É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 Pierre-Marie D le 27 février 2018 à 21:03. É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 Siltaär (site web personnel) le 02 mars 2018 à 12:16. É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 Pierre-Marie D le 04 mars 2018 à 14:07. É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 Alex G. le 28 février 2018 à 17:33. É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 benoar le 28 février 2018 à 19:28. Évalué à 3. Dernière modification le 28 février 2018 à 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 claudex le 28 février 2018 à 19:52. É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 benoar le 03 mars 2018 à 12:15. É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 claudex le 03 mars 2018 à 12:31. É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 linkou le 10 mars 2018 à 15:54. Évalué à 0.

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

Suivre le flux des commentaires

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