从window.location获取当前URL的文本片段部分

Question

我希望让访问我网站的任何人都可以使用text fragment链接，来获得一个自定义的页面布局。

例如：https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats

这个链接中:~:后面的部分是text fragment。我想要获取这部分内容。

我尝试过window.location.href和window.location.hash。但是window.location.href只返回没有text fragment的URL，而window.location.hash则返回空字符串。

您可以通过复制并粘贴此链接https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats到新标签页中来复制这个问题，并尝试从window.location中获取text fragment（markdown链接似乎存在text fragment的问题）。

那么有没有其他方法可以从地址栏中获取text fragment部分呢？

- GAGANDEEP SINGH

---

.hash 将包含它。 - Lawrence Cherone

我已经在Firefox和Chrome中尝试过了，但好像没有包含window.location.hash。它只返回一个空字符串。你在那个维基百科页面上使用window.location.hash可以吗？ - GAGANDEEP SINGH

是的，你如何执行它？ - Lawrence Cherone

它有哈希值，但我不知道为什么从markdown链接直接点击时文本片段不起作用。当在markdown链接上单击时，它会打开维基百科，但也不选择文本片段所在的位置。请通过将https://en.wikipedia.org/w/index.php?title=Cat&oldid=916388819#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats从这里复制粘贴然后尝试获取哈希值 - GAGANDEEP SINGH

空哈希字符串 - GAGANDEEP SINGH

@LawrenceCherone，你的截图片段被 URL 转义了，浏览器没有将其解释为文本片段。不，最近版本的 Chrome 中，.hash 并不包含 文本片段。Firefox 没有问题。我认为这是一个破坏性的变化，Chrome 应该修复 window.location.hash，让它恢复之前的功能。 - Zamicol

Answer 1

目前因浏览器而异。

Firefox

window.location.href和window.location.hash工作方式与JavaScript诞生以来一样，行为与您预期完全相同。

Chrome

最近的更改修改了片段行为。 如果URL中出现:~:，Chrome将删除URL的部分内容。

正如@DenverCoder9指出的那样，获取整个URL的唯一保证方法，本应该是一项简单的任务，现在只有通过performance API才能在Chrome中完成，即performance.getEntriesByType("navigation")[0].name。使用window.location.href、window.location.hash和document.URL曾经能够完成的任务，现在除非注意这个问题，否则不再可能完成。

我们希望Chrome撤销“删除URL的部分内容”的新行为，重新采用需要比较performance.getEntriesByType("navigation")[0].name和window.location.href的旧行为。此“删除URL的部分内容”的新行为是前所未有的，我们认为它是有害的。

更糟糕的是，如果使用协议file://，则无法像performance一样报告URL，因此无法获取URL。

相关问题，请参见：

• https://github.com/WICG/scroll-to-text-fragment/issues/193
• https://github.com/WICG/scroll-to-text-fragment/issues/74#issuecomment-1215767738

关键词：“文本片段”、“片段指令”。

- Zamicol

Answer 2

你可以通过 performance.getEntriesByType("navigation")[0].name 获得文本片段（你可以运行正则表达式来获取实际值，如 performance.getEntriesByType("navigation")[0].name.split('#:~:text=')[1]【但是你可能希望使其更具有容错性和错误抗性】）。

- DenverCoder9

---

在这里使用 performance 是一个相当大的hack/变通方法。Chrome应该修复 window.location.hash 以前的行为。整个未解释的哈希值应该被给出。 - Zamicol

我总体上同意。请阅读并跟踪规范问题上的对话，以了解一些背景信息。 - DenverCoder9