滚动到具有特定文本内容的元素

Question

在页面中我有时间和右边的一些图片。我想创建一个按钮，使用Tampermonkey跳转到当前时间。当前时间是<h1>中的文字。你可以在下面看到截图。

如何跳到某个位置。例如07:39。 如果您想建议外部库，请告诉我如何在Tampermonkey中使用它。

Answer 1

通过XPath查找H1

如果文档树稳定（元素的顺序始终相同），您可以获得XPath和get the H1 element by xPath。这将是最快（以CPU时间为中心）的解决方案。

随着时间的推移找到H1

否则，我会使用正则表达式来检测H1元素中的时间格式。

var headers = document.getElementsByTagName("h1");
//Regexp: Any amount of whitespace; One or two numbers; :; Two numbers; any ammount of whitespace
var check = /\s*[0-9]{1,2}:[0-9]{2}\s*/;
//Position
var pos = 0;
for(var i=0, l=headers.length;i<l;i++)
{
    if(check.test(headers[i].textContent))
    {
        pos = headers[i].offsetTop;
        //After finding the element, do not loop any more.
        break;
    }
}
//Scroll to pixel position [0; pos]
window.scrollTo(0,pos);

获取具体时间并找到它

如果您想跳转到特定时间（例如，任何时刻的当前时间），请转到Date object。有了它，你可以这样做：

var date = new Date();
var time_string = zeroFill(date.getHours())+":"+zeroFill(date.getMinutes());
//Procceed with the loop

使用zeroFill功能。

Answer 2

似乎我的javascript体验增长了：）

var myList = document.getElementsByTagName("h1");
var time = "07:39";
for(var i=0;i<myList.length;i++)
{
    if(myList[i].textContent == time)
    {
        var pos = myList[i].offsetTop;
    }
}
window.scrollTo(0,pos);