链接滚动加高亮 – Chrome这波骚操作我们等了二十多年

谷歌在本月发布了Chrome 80以及包括Edge和Opera等Chromium内核浏览器的新特性Link To Text Fragment。为什么这是个大新闻？因为这波骚操作我们足足盼了二十年不止。极诣数字营销将在本篇为你介绍什么是Link To Text Fragment以及为什么它具有历史意义。

片段标识符 Fragment Identifier

这要从链接说起。当我们分享网页的时候我们会复制整个网页地址。比如极诣那篇广为流传的《数字营销术语词汇表》，它的网址是https://maxket.com/digital101-digital-ads-search-marketing/。但是问题是当你分享的时候或许只是让你的小伙伴去了解其中某个术语，碰巧这篇文章有很长，那怎么办呢？传统的做法是在某个HTML标签中添加一个id属性，然后给它赋一个值。第二步就是在链接后面加上#井号和这个id的值。

在这个例子中，假设你需要分享的是PageRank这个术语，那么我们找到id=”attachment_2950″的元素，然后把#attachment_2950加在网址后面。于是链接就变成了https://maxket.com/digital101-digital-ads-search-marketing/#attachment_2950 读者可以自行用上面链接试一下。

上面的例子中#后的部分就是我们说的片段标识符（Fragment Identifier），传统的文章内链接都是这么做的。不仅如此#还被用于其他文件类型，比如CSV，MP4，PDF文件内表示位置。当然#还被用作Ajax的参数传递。读者可以参考Wikipedia了解具体用法。

片段标识符虽然可以解决我们的问题但是它太麻烦了，因为需要id我们码字的时候还要告诉编辑或者前端工程师去埋码。这非常不方便，容易造成大面积996。于是谷歌在Chromium中进行了改进。

Link To Text Fragment

新的方法非常简单，你先找到你想要的目标内容，比如PageRank。然后在原来的页面代码中插入#:~:text=[关键字]。于是你得到了：https://maxket.com/digital101-digital-ads-search-marketing/#:~:text=PageRank 。试试看，你将得到下面的结果。

你可以看到页面不单自动滚动到了第一个PageRank部分而且该关键字还高亮了。也就是说你不用再去担心id这个属性，直接可以达成原来的效果甚至更好。另外，大小写不敏感，而且你不必担心关键字在两个不同的HTML标签中，只要连续就可以使用。比如这样：https://maxket.com/digital101-digital-ads-search-marketing/#:~:text=PageRank一说 。

这个新特性在所有Chromium80以上版本中皆可使用，安卓手机版和Webview也适用。上面的截屏就是在Edge中的效果。但是在Safari和FireFox中还不适用。

Link To Text Fragment插件

6月18日，谷歌发布了Link To Text Fragment插件，谙熟科学上网的你已经可以在插件商店免费下载了。

这个插件的用法也很简单。你只要在网页上选定一段文字，然后在右键菜单中选择Copy Link to Selected Text即可。如下图：

至此，我们不单解决了定位问题，还解决了获取定位的问题。

为什么这很重要？

最后我们讲一下这个新特性的重要意义。我们知道Web是由一个个网页构成的，它们是内容的主要载体。在大段文本中寻找你所关心的相关内容相当困难，通常的做法是打开网页后使用Ctrl+F来查找文本，这相当不方便。尤其是一些场景，比如搜索引擎或者站内搜索，当你打开结果链接后还需要花不少时间来定位文字段。Link to Text Fragment很好地解决了这一点，这也是作为浏览器一哥Chromium的担当。

事实上谷歌已经开始使用这一特性在它的搜索结果中，早先SEL就已经报道过谷歌在精选摘要（Featured Snippet）中使用该特性。这对我们找信息的用户来说节省了不少时间。

未来Web中会越来越多这样的链接以内链或外链出现，其他搜索引擎如何处理这些链接，如何判断相关性并计算权重将会是另外的考验。

这一特性的应用其实还提醒了某些妄图杀死Web端的互联网科技公司尽快回归到以用户价值为首位的价值观中。