Web

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

投稿日:2021年1月15日 更新日:

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

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

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

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

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

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

2. Text Fragments(テキスト フラグメント)

Text Fragments とは?

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

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

Text Fragments の使い方

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

#:~:text=[prefix-,]textStart[,textEnd][,-suffix] 
          context  |-------match-----|  context
  • match で指定されている範囲が「指定したい文字列」になります(textStarttextEnd を使います)。
  • この範囲を明確にするために、context を指定することもできます(prefix--suffix を使います)。

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

prefix-
  • 指定した文字列の前の部分
  • 最後に「-」を付ける。
  • オプション
textStart
  • 指定したい文字列の始まり部分
  • 必須
textEnd
  • 指定したい文字列の終わり部分
  • オプション
-suffix
  • 指定した文字列の後の部分
  • 最初に「-」を付ける。
  • オプション

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

デモ

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

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

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

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

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

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

3. URLを生成するための拡張機能

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

Chrome 90 以降では標準機能になりました

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

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

この機能は、Chrome 90 で追加されました。

Android 用 Chrome 97 でのリンク作成方法

まず、目的の文字列を長押しして選択状態にします。

するとコンテキストメニューが表示されるので、そこにある [共有] をタップします。

目的の文字列を選択して [共有] をタップする

[選択箇所へのリンクを含める] を有効にして、リンクを貼り付けるアプリを選択します。

[選択箇所へのリンクを含める] をオンにして、リンクを貼り付けるアプリを選択する

参考

4. 参考

📂-Web

執筆者:labo


  1. 小寺 より:

    PCではChrome 90 以降では標準機能になりました。で簡単に指定したURLを作成できると思うのですがスマホではdのようにすればいいかご存知でしょうか?

comment

メールアドレスが公開されることはありません。

関連記事

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …

Web

Source Map に関する情報

目次1. Source Map とは?従来の問題点ソースマップ(Source Map)ソースマップに関連するファイルを整理するソースマップの動作ソースマップは誰が作るのか?2. Chrome ブラウザ …

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

CSS

【CSS】kbd 要素には “white-space: nowrap” を指定しましょう

kbd 要素に何も指定しないと、以下のように途中で改行されてしまうことがあります。 before 通常の状態 これを避けるために、kbd 要素に対して “white-space: nowr …