Text Fragments on The Web — Quick Tips

Use the new text fragments API to quickly save and share a specific scroll position or text on a website.

Have you ever wanted to save your scroll position on a website with large amounts of text content, or wanted to share specific text from a website to somebody else?

There used be no viable or long-term solution to that problem until now — text fragments offer a way to specify a section of text to highlight on a webpage and saves that highlight as a permanent position.

What dark wizardry do you need to achieve such functionality? Agentic coding? Microservices scaled with load balancers running background web scraping jobs every 5 seconds? Nah, just use a URL.

For example, click on this link:

[embed]Dog - Wikipedia Dog Scientific classification Genus: Canis Species: Binomial name Canis familiaris Synonyms [3] C. aegyptius Linnaeus…en.wikipedia.org

Notice how it immediately scrolled you down to some highlighted text? No matter who you share it with or how many times you reload the page, it works every time.

A text fragment is just a basic URL, but you specify special syntax for the starting text and the ending text of the text section highlight you want to create:

https://en.wikipedia.org/wiki/Dog#:~:text=The%20jaw%20contains%20around%2042%20teeth,consumption%20of%20flesh

There are 3 parts to a basic text fragment URL, and they follow this syntax:

<url>#:~:text=<start-text>

• url — the normal url

• :~:text= — You need to suffix the url with the #:~:text= syntax to start adding the text fragment

• start-text — the text to select to make up the text fragment.

However, there are a couple gotchas when it comes to specifying text for text fragments:

1. Any text you put must be URL-encoded. See the %20 stuff? That’s what I mean, and you should do that programmatically.
2. Make sure your text selection is unique. If not, the URL will scroll you to the first occurrence of the text selection, which may not be what you wanted. It can’t read your mind, after all.

The second point is the bottleneck — how can we ensure our text selection is unique without scouring the entire website to do so?

That’s where the end text comes in.

When the text fragment portion starts, we can add a comma to separate the start text from the end text, which will create a section of text that goes from the start text to the end text.

This means that you only have to make sure the combination of the start and end texts in the fragment are unique, which is a much easier task to accomplish.

Our updated syntax is as follows:

You might be thinking this though:

I just wanted to save my page on a website. You mean I have to manually type the start and end text myself and then encode it programmatically?

And you’d be entirely right. All these steps and manual work might make text fragments seem like absolute useless tedium, but I created a tool that makes using text fragments extremely easy:

[embed]text-fragment-tool Go here to create text fragments based on simple start and end text.text-fragment-url-tool.netlify.app

To use my website, all you have to do is enter the URL of a website, then add your start text and end text. The site then uses JavaScript to dynamically create a text fragment URL from those portions.

If you want to use text fragments programmatically yourself, I created this simple class in TypeScript that gets the job done:

export class TextFragmentURLManager {
    static createFragmentURL(url: string, text: string) {
      return `${url}#:~:text=${encodeURIComponent(text)}`;
    }

    static createFragmentURLWithStartAndEnd(
      url: string,
      startText: string,
      endText: string
    ) {
      return `${url}#:~:text=${encodeURIComponent(
        startText
      )},${encodeURIComponent(endText)}`;
    }

    constructor(private url: string) {}

    createFragmentURL(text: string) {
      return TextFragmentURLManager.createFragmentURL(this.url, text);
    }

    createFragmentURLWithStartAndEnd(startText: string, endText: string) {
      return TextFragmentURLManager.createFragmentURLWithStartAndEnd(
        this.url,
        startText,
        endText
      );
    }

    createFragmentLink(text: string) {
      const a = document.createElement("a");
      a.href = this.createFragmentURL(text);
      return a;
    }

    createFragmentLinkWithStartAndEnd(startText: string, endText: string) {
      const a = document.createElement("a");
      a.href = this.createFragmentURLWithStartAndEnd(startText, endText);
      return a;
    }
  }

If you enjoyed this quick tip, please follow for more.

Thank you for being a part of the community

Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: **X | [LinkedIn](https://www.linkedin.com/company/inplainenglish/) | [YouTube](https://www.youtube.com/@InPlainEnglish) | [Newsletter](https://newsletter.plainenglish.io/) | [Podcast](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0) | [Twitch](https://twitch.tv/inplainenglish)**
• **Start your own free AI-powered blog on Differ** 🚀
• **Join our content creators community on Discord** 🧑🏻‍💻
• For more content, visit **plainenglish.io + [stackademic.com](https://stackademic.com/)**