◆ # の最後に :~:text=foo で foo をハイライトかつそこへ移動できる
◆ # から :~:text= の間のテキストはこれまで通り location.hash で取得できる
こんなの見つけました
https://www.suzukikenichi.com/blog/chrome-directly-scrolls-to-text-fragments-on-a-page-and-highlights-the-text/
URL に 「#:~:text=」 をつけることで text= の後に指定した文字列をハイライトして それが表示されるようにスクロールもしてくれます
すごく便利ですね
81 からとありますが Chrome Status によれば 80 から有効だったようです
https://chromestatus.com/feature/4733392803332096
検索エンジンから開いたときにこれがデフォルトだといいのですけど
毎回目的のワードを Ctrl-F して打ち直すのは手間ですし
ただ気になるとこもあって 「#」 を使ってます
昔ながらの SPA のページで JavaScript で # 以降を管理してるサイトもあります
また単純に id 指定で移動するアンカー機能にも使われています
これらが使えなくなるのも困ります
試してみると 「#:~:text=foo」 のページで JavaScript が取得できる location.hash は空文字でした
「#:~:text=」 が始まりを表していると思ってたのですが実際は 「:~:text=」 です
# の次にある必要はありません
「#foo:~:text=bar」 と書けば 「#foo」 を JavaScript で location.hash で取得でき かつ bar がハイライトされます
完全にこれまでの URL の最後につければいいようになっています
ちなみに検索条件は大文字小文字は区別せず 単語単位でした
user で検索すると users にマッチしません
「,」 で区切ると範囲ハイライトできました
「text=it,to」 とかくと it から to までが間に別の単語があってもハイライトされます
仕様はこれみたいなので その辺のことが詳しく書かれてると思います(まだ読んでない)
https://github.com/WICG/ScrollToTextFragment/
◆ # から :~:text= の間のテキストはこれまで通り location.hash で取得できる
こんなの見つけました
https://www.suzukikenichi.com/blog/chrome-directly-scrolls-to-text-fragments-on-a-page-and-highlights-the-text/
URL に 「#:~:text=」 をつけることで text= の後に指定した文字列をハイライトして それが表示されるようにスクロールもしてくれます
すごく便利ですね
81 からとありますが Chrome Status によれば 80 から有効だったようです
https://chromestatus.com/feature/4733392803332096
検索エンジンから開いたときにこれがデフォルトだといいのですけど
毎回目的のワードを Ctrl-F して打ち直すのは手間ですし
ただ気になるとこもあって 「#」 を使ってます
昔ながらの SPA のページで JavaScript で # 以降を管理してるサイトもあります
また単純に id 指定で移動するアンカー機能にも使われています
これらが使えなくなるのも困ります
試してみると 「#:~:text=foo」 のページで JavaScript が取得できる location.hash は空文字でした
「#:~:text=」 が始まりを表していると思ってたのですが実際は 「:~:text=」 です
# の次にある必要はありません
「#foo:~:text=bar」 と書けば 「#foo」 を JavaScript で location.hash で取得でき かつ bar がハイライトされます
完全にこれまでの URL の最後につければいいようになっています
ちなみに検索条件は大文字小文字は区別せず 単語単位でした
user で検索すると users にマッチしません
「,」 で区切ると範囲ハイライトできました
「text=it,to」 とかくと it から to までが間に別の単語があってもハイライトされます
仕様はこれみたいなので その辺のことが詳しく書かれてると思います(まだ読んでない)
https://github.com/WICG/ScrollToTextFragment/
1
- カテゴリ
コメントを書く