去年十月普及的瀏覽器 text fragment（文字片段）功能，用 #:~:text=文字寫法深度連結到網頁特定位置，很實用，即使網站有轉址也能通，例如 立法院法律條文 https://www.ly.gov.tw/Pages/ashx/LawRedirect.ashx?CODE=03134#:~:text=中華民國104年2月4日公布
點進去會發現網址變了，但還是能把左邊欄「中華民國104年2月4日公布」這段字標亮。

:~: 規格： web.dev、 MDN

不過也發現有些網站用上去沒效果，有些自己寫的網頁竟然也不行！
要是被人發現網頁不友善卻渾然不知，那多丟臉啊。

簡單記一些踩點

  • 目標文字在初次 render 就要出現，所以需要 SSR。
    如果是轉圈圈載入資料再顯示的架構大概就沒救了。

  • 顯示之後重繪也會清掉效果，例如 react 能用卻沒用 useMemo 碰上多餘重繪，這關就不過。

  • 主要內容的 HTML 節點最好提早出現，例如我有一些主文放在 <dialog>，原始碼卻放在靠近底部 </body> 的位置，這樣如果目標文字也出現在其他地方就會有問題，會優先抓到別處（較不重要）。

  • 真的改不了的時候，想換條路自己解析網址再模擬「尋找、捲動、標亮」也做不到，因為安全隱私考量，# 開始的部分會被瀏覽器拆掉，不會暴露給程式，例如 location.href 就抓不到。

  • 操作瀏覽器寫自動測試時，我找不到方法讓 headless chrome 啟用這個功能，最後只能用頭跑，或改用 Firefox。

  • 雖然可以用 CSS ::target-text 改標亮部分的樣式，但實測只能動前景、背景色，也不能用漸層之類的值。
    那要改成怎樣才符合使用者預期？我想一般答案是先不要改吧。