How to create deep links to text within a web page

Highlight Text Fragments

A whole new dimension to URL links

The Google Chrome browser (Chromium to be more precise) and thus many popular browsers based on Chromium including Microsoft Edge, Opera, et. al. (*see full list below) have a really cool, useful, but surprisingly underutilized feature. As we all know, you can create a web URL link that refers to a specific web page. But did you know that you can also create a URL link that refers to a page and highlights specific text on that page, and automatically scroll to that text fragment without any required extensions?!

Maybe you’ve clicked on some search engine results where relevant text on a results page is highlighted without realizing that text was actually dynamically highlighted. So why not provide that same specificity when you share web info with others?

Use Cases

For example, rather than sending a friend a link to a long article, having to explain why it’s relevant and which parts to read, why not just send one link that also takes the visitor to the appropriate section on the page and highlights it. For content creators, rather then send readers to another reference page where they’re likely to get lost and forget to come back, you can navigate them to the specific reference and highlight it so they’re more likely to return to your page.

Once you start doing this more, you may wonder how you lived without it.

Highlight A Short Text Fragment

The concept is actually pretty simple, especially for anyone used to adding parameters to a URL. After the web page URL, simply add the text to highlight in the URL, separated by “#:~:text=”, in the form of:

[WebpageURL]#:~:text=[TextToHighlight]

For example, if we want to link to highlight “Text Fragments” on a WICG page like this:

…then the web page URL is “https://wicg.github.io/scroll-to-text-fragment/" and we want to highlight “Text Fragments”, so we pass that as a parameter at the end of the URL, separated with a special string: “#:~:text=”. However, not all characters (e.g., spaces) are allowed in the URL; those unsupported characters must be “% encoded” first. Thus, the URL would be:

https://wicg.github.io/scroll-to-text-fragment/#:~:text=Text%20Fragments

Highlight Longer Text Fragment

Pretty cool, right?!

This browser feature has more capabilities such as disambiguating (if there are multiple similar phrases) by providing a prefix and/or suffix, and highlighting multiple text fragments on a page. If you’d like to create your own URLs, here’s the general URL syntax:

[webpageURL]#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

I wanted to use this capability more, but found it cumbersome enough to deter me. Thus, I created a simple “Text Fragment Linker” form for my own use, which I’m happy to share with you. It uses Javascript (on the browser), so no data is submitted back to the server (and thus can’t be saved anywhere):

https://ghosh.com/blog/tfl

Text Fragment Linker for creating deep links to text within a page

Text Fragment Linker

I hope you find it useful. Any improvement suggestions?

Startup Business Coach: Growth & Fundraising | 7 startups | MSFT, IBM, P&G | MBA@UCLA, Int’l@SSE, BS CS@WPI | Triathlon, Golf, Photography | www.Ghosh.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store