When linking to sites, I’ve often wished I could link directly to specific text on a page rather than the page itself. Earlier this year, I learned this was possible by using Text fragments. Quoting from that MDN link:

Text fragments link directly to specific text in a web page, without requiring the page author to add an ID. They use a special syntax in the URL fragment. This feature lets you create deep links to content that you don’t control and may not have IDs associated. It also makes sharing links more useful by directly pointing others to specific words.

Text fragments have been a feature of several browsers since 2020 and came to Safari 16.1 in 2022.

A text fragment link contains four parameters, three of them optional:

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

The only required parameter is textStart; this text will be highlighted on the page. For example, to link to the word “Scarborough” in my Naming My Devices article, you would add #:~:text=scarborough to the end of the URL:

https://jagsworkshop.com/2025/08/naming-my-devices/#:~:text=scarborough

(You can click that link to try it.)

The text must be percent-encoded—meaning spaces and most punctuation must be replaced by their hex values; for example, a space is %20. That’s simple enough for a word or two, but I usually link to a sentence, or sometimes an entire paragraph. Here’s an example that links to the phrase “1) New York Mets vs. Boston Red Sox: 1986 World Series” which percent-encodes the ), :, and each space:

https://bleacherreport.com/articles/903479-power-ranking-the-25-greatest-world-series-in-mlb-history#:~:text= 1%29%20New%20York%20Mets%20vs. %20Boston%20Red%20Sox%3A%201986%20 World%20Series

This can be shortened by adding textEnd to give a start and end point to highlight; here, start with “1)” and end with “Series”:

https://bleacherreport.com/articles/903479-power-ranking-the-25-greatest-world-series-in-mlb-history#:~:text=1%29,Series

(From my tribute to Davey Johnson.)

You can see the format is relatively easy to understand, but finicky. Trying to do this by hand would be madness.

So I built a JavaScript bookmarklet to do it.

Bookmarklets

Bookmarklets are like regular web browser bookmarks, but instead of saving a link to a website, they store JavaScript that the browser executes when selected. They can even include CSS and load external resources. Virtually anything you can do with regular JavaScript you can do with a bookmarklet. Yes—including playing Doom.

This bookmarklet started as just a single dialog box that accepted a text entry, which was then percent-encoded and copied to the clipboard. It evolved into a more complex custom overlay that accepts all four components of a text fragment, copies the encoded URL to the clipboard, opens it in a window for verification, and properly handles Escape and Return keys to activate the Cancel and Generate buttons. It’s nicely styled, and it even places keyboard focus in the first field to make basic use as simple as: invoke, type, return.

Try it here: Drag this link to your bookmarks bar, name it, then click the bookmark.

Here’s a Gist for the code. It consists of two parts:

1. The first line of the Gist is a comment with the minified and percent-encoded JavaScript code that’s copied into the bookmarklet: copy everything starting with javascript: (remove the leading //) and paste it into a bookmark.
2. The remaining code is the un-minified version, for ease of reading and editing.

(I borrowed the idea for this structure from John Gruber.)

Let me be clear about this code: I am very much not a JavaScript programmer. I know my way around the syntax, can edit existing code well enough, and can write basic functionality—but that’s about it. Anything more complex and I rely on the kindness of internet strangers. Or, increasingly, on Anthropic’s Claude, which knows JavaScript much better than I do and can synthesize often contradictory suggestions into a single, comprehensive (though sometimes wrong!) answer. Thanks to Claude, I was able to scrape this bookmarklet together without spending hours banging my head against a wall. Is it the most efficient or the best way to do this? Most assuredly not! But it works great for my needs. Maybe it does for yours, too.

(If you have any suggestions for improvements, please let me know.)

Adding and Using the Bookmarklet

To set up the bookmarklet:

1. In your browser of choice, create a new bookmark.
2. Copy the minified JavaScript (the first line of the Gist, without the //).
3. Paste the JavaScript as the URL of your bookmark.
4. Name it appropriately (I call it “TextFragment”) and save.

(If you dragged the test version to your bookmarks bar earlier, edit the existing bookmarklet and paste in the code from the Gist.)

To use the bookmarklet:

1. Select the bookmark and complete the fields. See Text fragments for an explanation of each field. You must complete at least the textStart field.
2. Click Generate (or press Return/Enter). The page should load with the text highlighted, and the URL will be copied to the clipboard.
3. Use the URL as you otherwise would.

Issues

I’ve seen three issues—two related to text fragments themselves, and one related to bookmarklets.

The first issue is that sites can opt out of text fragments (using Document-Policy: force-load-at-top) or remove anchors (anything after the # symbol). The second is that content can change, breaking your link. In each case, the link takes you to the top of the page, which is fine, but frustrating, as it loses the specific context you were trying to highlight, making the act of linking less effective. It’s not a deal breaker, of course—link rot is a reality of the web, alas. But it’s frustrating nonetheless.

The more annoying issue is that some sites really mess with the overlay. Some, like ESPN, didn’t show the bookmarklet at all until I changed the z-index to the maximum (2147483647) so the overlay was above everything else on the site. Worse still, fonts, positioning, and sizing can all change depending on the CSS of the underlying site. While I’ve done what I can to isolate the bookmarklet styling, I still occasionally see changes. Most are minor, but some are pretty damn significant. Here’s what the overlay looks like on Apple’s Developer Documentation site, for example:

(Even more frustratingly, Apple Developer Documentation also strips anchors, so text fragments don’t work at all.)

Postscript, or Learning Something New Every Day

After creating this bookmarklet and using it for a few days, I decided to look for other examples that do the same thing. It turns out there are dozens of examples of bookmarklets for creating text fragments.

In a double-turns-out, several web browsers even have a “Copy link with highlight” menu item that takes highlighted text and makes it into a text fragment link. (In Safari, it’s only available in the contextual menu accessed via a right- or control-click.)

I could be disappointed that I spent a few hours figuring out how to build this bookmarklet, but I very much subscribe to the philosophy of “I learn something new every day.”

Had I done my research prior to undertaking this exercise, I would have missed this opportunity to learn a little bit more JavaScript—including using CSS in a bookmarklet!—and I wouldn’t have further exercised Claude’s coding and troubleshooting abilities.

And, of course, I have a bookmarklet that works exactly the way I need it to, and can improve over time.

One “improvement” compared to most other solutions I saw: this version exposes all four text fragment fields, rather than just selecting the text you want to link to. This offers greater precision over what gets highlighted. For example, I can easily target a specific instance of a phrase that appears on a page multiple times, like selecting just the second instance of “Anthropic’s Claude” in my Blackmailing Claude piece, by filling in the -suffix field (“me”):

https://jagsworkshop.com/2025/05/how-long-ago-is-2900-weeks/#:~:text=anthropic’s%20claude,-me

Wanting that level of control may be the programmer in me, though, so one future improvement would be to use the current text selection to prefill the fields.

I’m off to experiment—before I learn someone already did this. In the meantime, let me know if this bookmarklet is useful for you.