是否可以链接到HTML页面的第n个字符？

Question

在我打算编写的搜索组件中，我希望能够指向网页中的特定位置。

作为示例，搜索foo会将foo的所有实例带到我网站的所有页面上，我想提供一个链接（指向单词{{ 1}}，而不是页面上。

是否可以链接到HTML页面的第 n 个字符？

Answer 1

仅当元素的ID引用了元素时，才可以通过url链接到页面的一部分。因此，如果要使用相同的行为，则在生成源自搜索结果的页面时，需要将找到的每个字符包装到具有唯一ID的元素中。我不建议对这种事情使用后端操作，而建议使用前端JS解决方案，其中在url（或cookie，localstorage等）中，您可以指定关键字，也可以指定键（？keyword = foo＆key = 3）。然后使用JS遍历所有实例并滚动到所需的实例。这是JS外观的一个粗略示例：

var url = new URL(document.location.href);
var keyword = url.searchParams.get("keyword");
var key = url.searchParams.get("key");
$(window).scrollTop($("*:contains("+keyword+"):nth-child("+key+")").offset().top);

请记住，这将滚动到包含单词而不是确切行的元素，因此，如果您有一个带有大量文本的大容器，它将仍滚动到该容器的顶部。不过，您可以使用JS进一步扩展使其向下滚动到该行。如果您仍然要通过url中的ID引用容器，就会遇到此问题。