Javascript 查找并滚动到文本

Question

我需要一些 Javascript 来在 html 页面中找到一些文本，然后滚动到该点。

比如“您是自由民主党还是保守党的支持者，您对这笔交易有何看法？”将向下滚动到该 BBC 新闻页面的页面底部：http://news.bbc.co.uk/1/hi/uk_politics/election_2010/8676607.stm

我希望有一个用于查找文本和滚动的内置功能。

Answer 1

试试这个。它可以在您提供的网站上运行：

$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);

它找到页面上包含给定短语的最后一个、最深的元素并滚动到它。

---

如果你想在没有 jQuery 的情况下做同样的事情，你需要使用 XPath，因为 CSS 没有获得

contains()

选择器。

window.scrollBy(0, document.evaluate("//*[text()[contains(., 'Lib Dem')]][last()]", document.body).iterateNext().getBoundingClientRect().top);

如果您需要滚动到第一个出现的位置，而不是最后一个出现的位置，请从此代码中删除

[last()]

。

Answer 2

当您访问页面时，您还可以使用谷歌正在使用的功能滚动并突出显示搜索结果的特定部分。

它会生成这样的 URL：

https://www.inc.com/peter-roesler/heres-what-googles-new-highlight-feature-means-for-your-website.html#:~:text=If%20you%20see%20a %20精选，在%20的%20精选%20片段中看到了%20。

这有点俏皮。语法似乎是：

https://example.com/#:~:beginning_of_text,end_of_text

请参阅以下博客文章了解更多详细信息：

https://web.dev/text-fragments/

它受版本 80 及以上基于 chromium 的浏览器的支持。因此，目前的支持有限，但根据您的用例，它可能很有用。

Answer 3

我在尝试滚动到除最后一个事件之外的任何事件时遇到了类似的问题。 （例如“n”出现）。 [下面的代码使用jquery，您必须下载并包含它。]

以下代码将从第一个文本开始循环显示所选输入文本的每次出现。我留下了一些警报，用于查看每次通话发生的情况。

    var i = 0;

function findtext(text){
var x = $("*:contains('" + text + "'):eq(" + i + ")").offset();
var y = $("*:contains('" + text + "'):last").offset();
i++;
if (x.top == y.top)
{alert("no more occurences of this term");}
else if (x.top > 0)
    {
    alert("Top: " + x.top + " Left: " + x.left + " i:" + i);
    $(window).scrollTop(x.top);
    }
else
    { //call itself again
        alert("i:"+i);
        findtext();            
    }

}

我还必须输入“if not 0”逻辑，因为如果我使用“*”作为元素类型。有几个父元素从零行开始，所以我想跳过它们。例如，如果您知道您的单词将在标签内，您可以将其更改为以下内容以减少额外的调用。

var x = $("div:contains('" + text + "'):eq(" + i + ")").offset();