preface

Recent Chrome updates have brought a lot of new features, such as TAB movement, new groups, reading lists, TAB search, and the ability to share specific text content in Chrome90, which are amazing and make the experience even more user-friendly. This article focuses on this new feature, which was first announced in June 2020 and exists in the form of content extensions. Now that we can officially use it in a new version of the browser, take a look at the following scenario.

Usage scenarios

One day, I was concentrating on fishing, saw an interesting thing, I want to share it with baa baa classmates, how should I do?

As a senior CTRL CV engineer, of course it is copy and paste to send trine na.

Unfortunately, I have to attach some information, in paragraph XXX, entitled XXX.

With text Fragments, it’s easy. Select the content you want to share, right click and select copy the link to the highlighted content. When baa opens the link, she will see exactly what I want her to see.

Rapid experience

If you haven’t upgraded to the Chrome90 version (currently low-traffic), you can manually turn on the feature.

Open the following address, set Copy Link To Text To Enabled, and restart the browser.

chrome://flags/#copy-link-to-text
Copy the code

Every bits of bit see

Come on young man, click on me

When we click on the link, we findnavigating to a URLIs selected and highlighted by default

Right-click menu changes

Special URL format

#:~:text=URL%20fragment.%20When-,navigating%20to%20a%20URL,-with%20such%20a
Copy the code

More Application Scenarios

In product development, we often meet the need of link skipping. Usually, we use hash# to achieve positioning. Sometimes, this method cannot be expressed accurately, but text fragment can be successfully solved.

Link jump with text

Let’s see if it’s cool.

Let’s consider another scenario

When we use the search engine to search for a certain case, there will usually be a keyword prompt in the result page. However, when we click the link to enter the page, we do not know where the keyword we seek is, so we have to search Ctrl F again, which is very troublesome. It would be nice if, after clicking on the link, the results page automatically highlighted and pointed us to the target location. (See the &character example below)

Browser support

Syntax :~:text= Scroll To text Fragment

URL fragment that defines a piece of text to be scrolled into view and highlighted.
Copy the code

Currently, it can only be experimented with, but cannot be put into production. Firefox, Safari and other browsers are not supported yet.

Grammatical structure

https://example.com#:~:text=prefix-,startText,endText,-suffix


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

         context  |-------match-----|  context
Copy the code

Text parameters need to be decoded before matching to ensure that the syntactical structure symbol (- &,) is correctly read.

Everything in square brackets is optional, except textStart.

textStart

Simple usage :~:text=startText, you can manually add parameters after the URL, specify any content.

1. To an ordinary url https://fuchunhui.github.io/copy-link-text/ 2. To locate somewhere, need to have a hash https://fuchunhui.github.io/copy-link-text/# 3. Next to our little lovely ` : ~ : text = ` plus 4 https://fuchunhui.github.io/copy-link-text/#:~:text=. The last of the last, we want to let what piece of text highlighting, code added to the final after it https://fuchunhui.github.io/copy-link-text/#:~:text=Copy%20URL%20to%20hereCopy the code

I’m the URL for step 4 above. Click on me

For pages with a lot of duplicate content, if you specify only textStart, the first matched content will be highlighted.

Repeat text highlighting

textEnd

Using both textStart and textEnd, you can specify a piece of text. The matching rule starts with the first text conforming to textStart and ends with the first text conforming to textEnd. The advantage of this design is that the length of URL parameters can be saved.

Let’s look at an example

:~:text=textStart,textEnd (with a comma in the middle, select a paragraph) We start with "yugutai Xiaqingjiangshui" and end with "Chang 'an", which will hit "northwest Look chang 'an" instead of "Chang 'an a piece of moon" #:~:text= Yugutai Xiaqingjiangshui, Chang 'anCopy the code

Also, use textEnd explicitly and meaningfully.

#:~:text=Windows, Linux :~:text=textStart,textEnd :~:text=textStartCopy the code

prefix- and -suffix

Look at the example just now, if you want to match “Chang ‘an a month” of chang ‘an these two words, how to do?

You need to add a prefix and a suffix to look at the URL format

: ~ : text = prefix -- textStart, - # suffix: ~ : text = don li bai -, changan, - a month, thousands of householdsCopy the code

Chang ‘an a piece of Chang ‘an moon

“&” character

In one day, I saw all the flowers in Changan.

What if you want to prompt for more than one text? For example to highlight all changans, we need to use the & operator

Hit multiple changans.

# : ~ : text = changan & text = a month "-, changan, - select multiple & text = looking - northwest, changan, -, countless poor & text = li bai -, changan, - a month Look at the url structure is the same as # : ~ : Text = changan &text= a month "-, changan,- select multiple &text= northwest look -, changan,-, many &text= Libei -, Changan,- a month can hit four" changan"Copy the code

fragment directive

The Fragment Directive Delimiter (:~:) is really called Fragment Directive Delimiter

The fragment directive delimiter is the string “:~:”, that is the three consecutive code points U+003A (:), U+007E (~), U+003A (:).

Fragment Directive belongs to a part of URL, and the content immediately following xiaocuai is fragment directive. The multiple example mentioned above (multiple chang ‘an examples) is multiple fragment directive composed of & hyphen.

In order to avoid affecting page operation, text fragments are mainly reflected in UA. When scrolling the screen, highlighting prompts will disappear. When we select a large section of text, incomplete scenes may appear.

The current Chrome implementation is in the Location object and does not yet record the contents of directive.

quick fox and lazy dog

In the process of text matching, the matched text and its prefix/suffix can cross the block boundary, but these independent parameters cannot cross the block. That is, the values for prefix, textStart, textEnd, and suffix must be the text content in a single block.

Text matching within a single block

<article> <p>The<p> </p> Quick Brown Fox </p> <p>jumped over The lazy dog. </span> Quick Brown Fox </p> <p>jumped over the lazy dog. (span delimit)</p> </article>Copy the code

The initial string “The quick” is present in both examples, but in The above example, there is a block element between The and quick, so there is no match, while in The following example, there is a single unbroken block, which is matched successfully.

added

  • Case-insensitive (you can change The to The by testing The quick Fox and lazy Dog example)

  • The word must be cut completely, not truncated.

The substring “mountain range” is word bounded within the string “An impressive mountain range” but not within “An impressive mountain ranger”.

  • There is no doubt that highlighted text content will not be covered by background and text colors. Human taste is qinghuan

  • How to solve the text change? If the content does not match, it does not match. (More attention should be paid to the application in the product, this is a bug in the experience)

  • Scrolling disappears, only opens the page for the first time, only prompts once. At the same time, you can’t see content that doesn’t fit on one screen because the highlight disappears when you scroll down (so you shouldn’t have too much highlighting, which is not what the feature was designed for).

  • Not all pages support parsing. For example, can I use cannot be highlighted and needs to be used with syntax parsing.

The project address

Copy Link text for the full address of this code

Online experience address: Copy Link text

The resources

  • text fragment
  • wicg github
  • macrumors
  • copy link to highlight