🔗 Lier un fragment de texte dans une page web

mardi 3 décembre 2024

Mis à jour le 2 janvier 2025, ajout du bookmarklet

---

LE truc qui a changé mon usage du web ces derniers mois, c’est les caractères suivants :

#:~:text=

Cette formule magique permet de faire un lien direct vers un fragment de texte présent dans une page.

Ce lien est composé d’une adresse, https://…/blablabla.html, à laquelle on ajoute #:~:text=, puis le texte qu’on vise.

En cumulant les trois, le lien ciblera la première occurence de la phrase. Magie 🧙✨

Voilà le lien : gutenberg.org/cache/epub/55456/pg55456-images.html#:~:text=Mais je ne veux pas fréquenter des fous

Il y a plus d’infos sur l’excellent site MDN : comment définir un mot de début et un mot de fin, comment spécifier un préfixe ou un suffixe à la sélection (pour affiner la recherche lorsqu’on vise un fragment de texte précis alors qu’il est répété dans le document). Lorsque vous faites un copier-coller d’un lien comme ça, vous verrez peut-être des %20 à la place des espaces et d’autres %xx à la place d’autres caractères (ponctuation, lettres accentuées…), c’est normal et ça ne change rien au résultat.

La fonctionnalité existait sur Chrome depuis quelques années, et elle est arrivée dans Firefox et Safari plus récemment. Il existe une extension Firefox pour copier le lien qui vise la sélection courante dans le document.

Ce qui a tout changé pour moi c’est que ça enrichit vraiment le partage de liens. J’aime partager des liens. Un collègue a besoin d’une info ? Je lui trouve le bon endroit dans la doc qui fait 40 écrans de scroll. Une amie m’envoie un article amusant ? Je lui réponds un lien vers mon paragraphe préféré et on rigole bien. Mon pire ennemi me calomnie bassement ? Je lui réponds de manière passive agressive avec un lien ciblé sur la pire insulte dans une liste de mots vulgaires sur Topito (il ne mérite pas plus de considération que ça de ma part mais j’espère qu’il se sent insulté que ça n’ait pas été un site respectable comme le wiktionnaire ou urban dictionary).

Bref, ça a ses usages, ce truc.

Le bookmarklet

Suite à cet article, Julianoë a créé un bookmarklet et l’a partagé sur le Fediverse.

Voilà le code :

javascript:(function(){let selected=window.getSelection().toString().trim();if(selected){let encodedText=encodeURIComponent(selected);let currentUrl=window.location.href.split('#')[0];window.location.href=`${ currentUrl }#:~:text=${ encodedText }`}else{alert('Aucun texte sélectionné. Pour renvoyer à un fragment de la page, sélectionner du texte.')}})();

Le code va récupérer la sélection dans le document ; s’il n’y a pas de sélection il affiche une alerte, sinon il prend la sélection, l’encode pour être dans une URL, il prend l’adresse actuelle, puis il change l’adresse actuelle pour avoir la forme : adresse actuelle, #:~:text=, texte de la sélection.

Pour l’utiliser, clique sur le bouton ci-dessous, et sans le lâcher glisse-le dans ta barre de favoris. Tu peux aussi faire un clic-droit pour l’ajouter dans un autre répertoire de favoris de ton navigateur. Ensuite, sur n’importe quel site, il te suffira de sélectionner du texte puis de cliquer sur le favori ; l’URL de la page changera pour cibler le texte sélectionné.

lien vers le texte sélectionné

Merci Julianoë !