xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

google chrome goto special text by url All In One

google chrome goto special text by url All In One

goto text with highlight color by URL

https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg

bug

demo

https://www.cnblogs.com/xgqfrms/p/15401157.html#:~:text=goto text with highlight color by url

#:~:text=your_page_text

https://web.dev/text-fragments/#browser-compatibility:~:text=The Text Fragments feature is supported,to the Safari and Firefox discussions.

encodeURIComponent

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');

const result = generateFragment(window.getSelection());

if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;

  const fragment = result.fragment;

  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';

  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';

  const textStart = encodeURIComponent(fragment.textStart);

  const textEnd = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';

  url += `#:~:text=${prefix}${textStart}${textEnd}${suffix}`;
  // 
  console.log('\n🎉 encoded url =', url);
}

https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js

refs

https://web.dev/text-fragments/#browser-compatibility



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(62)  评论(5编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2020-10-13 MDN 文档高级操作进阶教程
2020-10-13 Learning Web Performance with MDN
2020-10-13 prefetch vs preload vs prerender vs preconnect All In One
2020-10-13 OAuth 2.0 JWT All In One
2020-10-13 吐槽一下国内用户体验非常不好的一些网站 All In One
2020-10-13 git tag All In One
2020-10-13 React components render order All In One
点击右上角即可分享
微信分享提示