javascript - 网页抓取图像的鼠标悬停标签

问题描述

我有一个网站，如果我将鼠标悬停在图像的特定部分上，就会出现一些有趣的信息。

我想将其提取为结构化格式，即：

Zürich, 2000 und mehr
Hinwil, 1400 bis 1600
Zug, 2000 und mehr
...

这是它的样子：

要查看实时示例，只需滚动到此处的第一张图片： https ://www.republik.ch/2020/01/27/stadt-land-graben-die-hotspots

如果我将鼠标悬停在图像的不同部分，我会看到不同的标签出现。

我无法在源代码中轻松找到此信息。图像至少有数百个部分，因此手动浏览它需要相当长的时间。

将鼠标悬停在不同部分时，抓取我看到的数据的最佳方法是什么？

标签： javascriptjqueryseleniumweb-scraping

我不确定这是否是您正在寻找的：

document.querySelector('figure[data-css-18r0zrg] svg').addEventListener("mousemove",function(){
if(document.querySelector('div[data-css-5rrfwp]') !== null)
{
    console.log(document.querySelector('div[data-css-5rrfwp]').innerText.replace(/\n/g, " "));
}

});

更新

document.querySelector('figure[data-css-18r0zrg] svg').addEventListener("mouseover",function(){
  if(document.querySelector('div[data-css-5rrfwp]') !== null)
  {
    console.log(document.querySelector('div[data-css-5rrfwp]').innerText.replace(/\n/g, " "));
  }
});

document.querySelectorAll("[data-css-11e8ajt]").forEach(el=>{
    setTimeout(function(){
        el.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));
    },5000);
});

粘贴上面的代码并在网页控制台中按 Enter 键

javascript - 网页抓取图像的鼠标悬停标签

问题描述

解决方案

推荐阅读