Help us understand the problem. What is going on with this article?

URLの `#:~:text=` とは何か?( Text Fragments )

最近 Chrome で Google 検索から検索結果に移動すると
結果に該当する部分が黄色でハイライトされて表示されます。
image.png
( 上記は Wikipedia のページを開いた例です。 )

これが何か気になったので調べてみました。

Scroll To Text Fragment

これは Scroll To Text Fragment あるいは Text Fragments と呼ばれる機能です。
Chrome 80 以降、デフォルトで有効になっています。

URL を開いた場合、ページの先頭が移動するのが一般的ですが
ページの特定部分に誘導したい場合があります。

今までは id が付いている html 要素にしかリンクを貼れませんでしたが
この機能の追加によりユーザが任意の場所にリンクを貼れるようになります。

将来的にはテキストを選択したあとにその部分へのリンクを作成するなどの機能も追加したいみたいです。
使えるようになると便利そうですね。

構文

注意: 構文は将来変更されるかもしれません。

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context

参考

What exactly is the #:~:text= location hash in an URL? - Stack Overflow
Scroll to Text Fragment - Chrome Platform Status
Text Fragments

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away