235

Today I noticed that some searches on Google gave me links to results with apparent instructions to highlight text.

Google brought me to What is the maximum size of a zip file on Windows 10 Pro 64... at the following url:

https://superuser.com/questions/1305867/what-is-the-maximum-size-of-a-zip-file-on-windows-10-pro-64-bit#:~:text=4%20GB%20size%20is%20a,about%2016%20exabytes%20size%20limitation

Google search for "win explorer max zip file size" - the Stack Exchange page in the result has highlights

I experimented a little bit further and this seems to be a feature of Google Chrome. It highlights text on the page if you append #:~:text=something to the URL. https://example.com/#:~:text=domain seems to work fine, but only on Chrome (Chrome Beta on the left, Firefox on the right).

The word "description" is highlighted on example.com

The word text together with different characters is a bit hard to google, so I couldn't find anything on the subject.

For finding out more information about these kinds of "URL-hacks" I want to know:
What is this feature of Google Chrome called?

KyleMit
  • 30,350
  • 66
  • 462
  • 664
palsch
  • 5,528
  • 4
  • 21
  • 32
  • 9
    i can find it and others in this website https://chromestatus.com/feature/4733392803332096 – Alberto Sinigaglia Jun 02 '20 at 21:58
  • I like it. I would hate it if the highlighting wouldn't go away when I scroll, but it does. – Nils Lindemann Mar 17 '21 at 00:47
  • [This Chrome add-on](https://chrome.google.com/webstore/detail/rabbit-url-rewriter/kcbmcmeblpkcndhfhkclggekfblookii) can remove those text fragments from the URL. Create a group matching all sites (`.*`) and inside match for `(.*)#:~:.*` and replace with `$1`. – Nils Lindemann Mar 17 '21 at 00:50
  • 1
    @Makyen Would you mind to extend on why you think this question does not suit this site? I certainly think it's an edge case, however the name of the feature in question seems to be so unknown and yet needed for a technical implementation, which is what Stack Overflow can help with. – palsch Sep 25 '21 at 19:26
  • 5
    @palsch How is this a "a practical, answerable problem that is unique to software development"? You're literally asking "What is this feature of Google Chrome called?", which is "what's this feature of my browser called?" It could, alternately be paraphrased as "what is this portion of a URL called". Those are not *programming* questions. They are general technical questions. Closing this question doesn't mean it's not useful. It just means that it's not on-topic here. – Makyen Sep 25 '21 at 20:30
  • 1
    @Makyen In that case, do you think [my question](https://stackoverflow.com/q/62186150/5532169) "is it part of any RFC or Web standard" would be better phrased, and reverse the duplicate link direction? Because if we choose to forget the specific language used in the question and focus on the idea / topic presented in this question, it's closely related to web development. Think about it, if I ask about URL host / port / path / query / fragment (RFC3986), are those off-topic? This question is just asking about the specifics of a certain type of fragment string, and this makes it off-topic, how? – zypA13510 Feb 18 '22 at 04:08

1 Answers1

245

Scroll To Text Fragment

OK, with the help of a friend and at the same time via a comment from Berto99 I found it:

Apparently this is a feature called Scroll To Text Fragment. It is enabled by default since Chrome 80, but apparently not yet implemented in other browsers.

There are quite nice examples in the "W3C Community Group Draft Report". More good examples can be found on Wikipedia.

Highlighting the first appearance of a certain text

Just append #:~:text=<text> to the URL. The text search is not case-sensitive.

Example: https://example.com#:~:text=domain The word "domain" is highlighted on example.com

Highlighting a whole section of text

You can use #:~:text=<first word>,<last word> to highlight a whole section of text.

Example: https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url/62162093#:~:text=Apparently,Wikipedia part of this very answer is highlighted

More advanced techniques

Sreenikethan I
  • 319
  • 5
  • 17
palsch
  • 5,528
  • 4
  • 21
  • 32
  • 19
    The prefixing/suffixing does work. The example doesn't, though, because that text has not existed in Wikipedia since October 2019. This points out one of the dangers of using page content for scrolling & highlighting. – mgkrebbs Jun 06 '20 at 22:48
  • 2
    Throwback to Google Quick Scroll – Elijah Mock Jun 19 '20 at 15:47
  • 14
    @mgkrebbs "one of the dangers of using page content for scrolling & highlighting" It's not a "danger" though, it's just a tradeoff. At worst, there would be no fine-grain positioning, that's it. Exactly as with normal `#fragment` links. Note: page _structure_ can also change, rendering normal fragment positioning brittle, too. But that's fine. The fact that links break sometimes, doesn't mean they are "dangerous". It's an inherent, universal property of the web that we have to deal with anyway. – Sz. Jul 14 '20 at 16:33
  • 9
    For anyone who came here like me wanting to know how to *turn off* this annoying feature, the flag in Chrome is called "Enable Text Fragment Anchor." -- chrome://flags/#enable-text-fragment-anchor – qJake Jul 16 '20 at 02:23
  • 1
    @palsch By the way, you can get a link to a Stack Overflow (not sure about other SE sites) comment by hovering the timestamp next to the comment. [example](https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url#comment109940026_62161819) – Sreenikethan I Aug 27 '20 at 05:47
  • 9
    chrome://flags/#enable-text-fragment-anchor is unavailable in Chrome 85. – hongsy Sep 23 '20 at 02:36
  • 1
    For more details and background on this feature, see the [article](https://web.dev/text-fragments/). – DenverCoder9 Dec 16 '20 at 16:01
  • 2
    Any idea how to read this in javascript? – arunwithasmile Feb 11 '21 at 04:48
  • Unfortunately it looks like, at this point, you can only style the element, not the highlighted text sub-part within it. So if I had an

    for example, I could style that via the :target, but not the text contained within, if only part of the

    text is highlighted by this feature.

     – nbsp Aug 05 '21 at 17:35
  • Since Microsoft's Edge is built on Chrome, it works in the Edge browser too. – StanE Jun 20 '22 at 12:09
  • 1
    Is there an equivalent feature for Firefox? – Thielicious Jan 25 '23 at 01:43
  • Wow! I've found out the equivalent feature for Safari. Check this link out, "https://support.apple.com/en-lb/guide/safari/ibrw40158bf7/16.0/mac/12.0" It is implemented to be constrained inside MacOS's Quick Note, saying after you create a link "A link to the webpage appears in the Quick Note, and the text in Safari is highlighted. When you revisit the website, your highlight is still there, and a thumbnail of the Quick Note appears in the lower-right corner of the screen." I think this would be very useful for those in need. – Scott Yang Apr 28 '23 at 15:17
  • 1
    @Thielicious No, unfortunately it is not supported for Firefox, even now. – Scott Yang Apr 28 '23 at 17:22
  • 1
    This is now supported in Safari on macOS, coming from Google search. Not sure exactly when this was enabled. – jcaron Aug 26 '23 at 12:40