retour

🔗 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Ă« !



On en discute ?