Chrome新機能:「指定のテキスト位置を表示するリンクを共有」の仕組み

最新のChromeで、指定のテキスト位置を表示するリンクを共有できるようになりました。
要素にIDを指定する以外にアンカーリンクを埋め込めるとはこれまで知らなかったのでどういう仕組みなのか調べてみました。

仕組み

Chrome 81で追加された機能を利用していました。
Chrome 81に追加された便利な機能――リンク先ページの特定の場所に移動しハイライト表示
(safari, Firefoxでは実装されていませんでした。)

指定した部分のテキストをURLエンコードし、 URLのアンカーとして#:~:text=[text_encode]を追加し、クリップボードにコピーしているようです。
利用する機会が思いつきませんが、プログラムからコードを作成して飛ばすなどのこともできそうです。(青空文庫にある本の好きな一節へのリンクを保存できるChrome拡張機能とか？)

サンプルコード

JavaScript

const url = "https://example.com/";
const text = "hogehoge"; // ハイライト表示したいテキスト

console.log(url + "#:~:text=" + encodeURI(text));

PHP

$url = "https://example.com/";
$text = "hogehoge"; // ハイライト表示したいテキスト

echo $url . "#:~:text=" . rawurlencode($text);

ちなみにPHPには、文字列をURLエンコードする関数に

• urlencode
• rawurlencode

の2種類あります。
urlencodeは、RFC3986に準拠していないので、特別な事情がなければrawurlencodeを使用するべきです。