Lier un fragment de texte dans une page web
Un petit article pour pĂ©renniser sur le web une astuce qui a eu du succès sur le Fediverse.
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ë !