Creare link a frammenti di testo di una pagina

Ti ho già mostrato come creare dei punti di ancoraggio in una pagina, in modo da poter creare poi un link che porta direttamente a quel preciso elemento.

In questo tutorial ti voglio mostrare come ottenere un risultato simile senza richiedere modifiche al codice delle pagina di destinazione.

Questo può essere utile quando desideri condividere un link con qualcuno indicandogli però il punto esatto di un testo.

Il metodo consiste nell’utilizzare una specifica funzionalità chiamata “URL Fragment Text Directives“ che al momento è supportata nelle versioni più recenti dei principali browser, ad eccezione di Mozilla Firefox.

Ecco un esempio di URL che permette di sfruttare questa funzionalità:

https://www.fogliata.net/autenticazione-email-wordpress/#:~:text=per%20evitare%20qualsiasi,dominio

Il risultato è qualcosa di questo tipo:

In pratica la pagina viene caricata esattamente nel punto contenente la porzione di testo che inizia con “per evitare“ e termina con “dominio“. Il testo viene anche automaticamente evidenziato.

Per creare URL di questo tipo, all’URL principale della pagina viene aggiunto il carattere # seguito dai caratteri :~: che serve ad abilitare la funzionalità frammenti di testo

A seguire, la direttiva text= che permette di indicare quale testo deve essere utilizzato per il frammento.

La sintassi del comando è la seguente:

https://esempio.com#:~:text=prefix-,textStart,textEnd,-suffix

Dove prefix-, textEnd e -suffix sono elementi opzionali.

• textStart è il testo da considerare come l’inizio del frammento.
• textEnd è il testo da considerare come la fine del frammento.
• prefix- indica l’eventuale testo che deve precedere l’inizio del frammento.
• -suffix indica l’eventuale testo che deve seguire la fine del frammento.

prefix- e -suffix servono ad evitare che venga evidenziato più testo del necessario, oppure che venga evidenziata la porzione sbagliata di testo nella pagina.

Ecco un esempio di URL che sfrutta tutte le direttive:

https://www.fogliata.net/autenticazione-email-wordpress/#:~:text=dmarc-,questi,via%20email,-.

Ti segnalo anche che questa funzionalità è attiva solo durante il primo caricamento completo della pagina. Quindi non funziona su link interni che puntano alla medesima pagina.

Google ha realizzato anche un’estensione per i principali browser che consente di generare facilmente questi link.