Linking to text fragments with a bookmarklet
One of my favourite features added to web browsers in the last few years is text fragments.
Text fragments allow you to link directly to specific text on a web page, and some browsers will highlight the linked text – for example, by scrolling to it, or adding a coloured highlight. This is useful if I’m linking to a long page that doesn’t have linkable headings – I want it to be easy for readers to find the part of the page I was looking for.
Here’s an example of a URL with a text fragment:
https://example.com/#:~:text=illustrative%20examples
But I don’t find the syntax especially intuitive – I can never remember exactly what mix of colons and tildes to add to a URL.
To help me out, I’ve written a small bookmarklet to generate these URLs:
Create link to selected text
To install the bookmarklet, drag it to my bookmarks bar.
When I’m looking at a page and want to create a text fragment link, I select the text and click the bookmarklet. It works out the correct URL and shows it in a popup, ready to copy and paste. You can try it now – select some text on this page, then click the button to see the text fragment URL.
It’s a small tool, but it’s made my link sharing much easier.
Update, 16 September 2025: Smoljaguar on Mastodon pointed out that Firefox, Chrome, and Safari all have menu items for “Copy Link with Highlight” which does something very similar. The reason I don’t use these is because I didn’t know they exist! I use Safari as my main browser, and this item is only available in the right-click menu. One reason I like bookmarklets is that they become items in the Bookmarks menu, and then it’s easy for me to assign keyboard shortcuts.
Bookmarklet source code
This is the JavaScript that gets triggered when you run the bookmarklet: