Webページ中の特定の文字列をURLで指定する(Text Fragments)

1. URLにおける通常のフラグメント

一般に「URL」は Webページの住所を表しますが、末尾にフラグメント (fragment, # に続けて指定する文字列) を追加することにより、Webページ上の特定の位置を含めた表現が可能です。

例えば、アクセスしたいWebページのHTML内に、以下のタグが記述されているとします。

<a href="foo">Bar</a>

この場合、ブラウザのアドレスバーに「末尾に #foo を追加したURL」を指定してアクセスすると、ブラウザは上記のタグの位置がちょうど画面の上端にくる位置まで自動でスクロールしてくれます。

フラグメントの詳細については、URL Standard を参照してください。

一方、フラグメントに関する新しい仕様である Text Fragments を利用すると、Webページ上の「特定の文字列」を URL で表現することができるようになります。

テキストフラグメントを含むURLを指定してWebページにアクセスすると、ブラウザはその文字列をハイライト表示し、その位置までスクロールしてくれます。誰かに「このWebページのこの部分を伝えたい」という場合に大変便利です。

テキストフラグメントのフォーマットは以下になります。

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

4つの項目を指定することができます。それぞれの意味は以下の表の通りです。

この4つの項目の文字列は、それぞれパーセントエンコーディングしてから指定します（ブラウザが自動的に変換してくれます）。

以下の文章を使って、実際にいくつかのフラグメントを試してみます（ブラウザは Chrome か Edge を使ってください）。

私はコーヒーと紅茶が好きです。

彼はコーヒーも紅茶も嫌いです。

以下の「フラグメント（とリンク）」列にリンクが貼ってあるのでクリックしてください。


No.	フラグメント（とリンク）	説明
1	#:~:text=コーヒー	`textStart`のみ指定漠然と「コーヒー」としか指定していない。この場合、最初に合致したところだけがハイライト表示されるようだ。
2	#:~:text=コーヒー,紅茶	`textStart`と`textEnd`を指定
3	#:~:text=彼は-,コーヒー	`prefix-`と`textStart`を指定
4	#:~:text=紅茶,-も	`textStart`と`-suffix`を指定
5	#:~:text=彼は-,コーヒー,紅茶,-も	`prefix-`, `textStart`, `textSEnd`, `-suffix`をすべて指定
6	#:~:text=私は-,コーヒー&text=彼は-,コーヒー,紅茶	複数の文字列を指定したい場合は、`&text=` で条件を追加します。

※ Text Fragments によるハイライト表示は、ページを最初に開いたときしか適用されないため、上記のリンクは新規タブで開くようにしています。

テキストフラグメントを含むURLを手動で作成するのは面倒です。そのため、ブラウザの画面上から簡単にURLを生成するためのブラウザ拡張機能が用意されています。詳細は以下のページを参照してください。

Chrome のバージョン 90（2021年4月リリース）で、選択した文字列を指すリンクを作成する機能が標準搭載されました。

リンクにしたい文字列を選択状態にして、右クリックし [選択箇所へのリンクをコピー] を選びます。