2

如何使用 Javascript/jQuery 识别具有多个图像和描述的网页上的图像对应的描述或标题？

可以很容易地提取页面标题，但标题可能与图像不对应，尤其是当页面上存在许多图像时

var title = document.title;

我相信 Pinterest 的 Pin-it 小书签已经成功地做到了这一点。我猜它与找到最近h1的h2,h3或图像alt属性的算法有关，然后document.title如果算法无法识别页面上的图像描述，则回退到。

任何想法都非常感谢！

编辑

这是用于抓取其他网站的数据

4

2 回答 2

2

OP提供了一个很好的问题来扩展。我最近为来自新Yahoo!的数据抓取URL、标题和缩略图的另一个SO 答案创建了一个 jsFiddle ！屏幕视频播放器网页。

我刚刚重写了那个 jsFiddle，所以它是 Pinterest 特有的，并且直接使用了Metatag Object Numbers（稍后会详细介绍），这使得这个 jsFiddle 与那个非常不同。

整个过程涉及使用Yahoo 的查询语言和 jQuery.ajax()函数来获取所需的抓取数据，这些数据通常在网页源metatag部分中可用。


首先，让我解释一些事情。

我将使用的Pinterest 链接将是固定项目的直接链接。这意味着网页将包含主要的固定项目以及许多其他较小的固定项目，这与包含大量仅固定项目的主页不同。

该Pinterest 链接的网页标题为固定项目的网页标题以及Title组成固定项目的几个单词Description。这很可能是不需要的，只需要固定的项目Title即可。

查看Pinterest 链接的 HTML 源页面向我们展示了当前使用的元标记。这是其中的大多数： 

<meta property="fb:app_id" content="274266067164"/>

<meta property="og:site_name" content="Pinterest"/>
<meta property="og:type" content="pinterestapp:pin"/>
<meta property="og:url" content="http://pinterest.com/pin/40250990391375228/"/>
<meta property="og:title" content="FUNNY!!"/>
<meta property="og:description" content="Someone please do this."/>
<meta property="og:image" content="http://media-cache0.pinterest.com/upload/62980094758941134_yXgT124O_c.jpg"/>
<meta property="og:see_also" content="http://9gag.com/gag/2934786" />

<meta property="pinterestapp:pinboard" content="http://pinterest.com/amjo32/funny/"/>
<meta property="pinterestapp:pinner" content="http://pinterest.com/amjo32/"/>
<meta property="pinterestapp:source" content="http://9gag.com/gag/2934786"/>
<meta property="pinterestapp:likes" content="21"/>
<meta property="pinterestapp:repins" content="30"/>
<meta property="pinterestapp:comments" content="0"/>
<meta property="pinterestapp:actions" content="51"/>

<meta name="twitter:card" content="photo">
<meta name="twitter:url" content="http://pinterest.com/pin/40250990391375228/">
<meta name="twitter:site" content="@pinterest">

<meta name="google-site-verification" content="NvDayNupl7R0MDceeuRcs7xUf9yqUsxg6WGjEeRdAnc" />
<meta name="application-name" content="Pinterest" />
<meta name="msapplication-TileColor" content="#ffffff" />

如您所见，我们所追求的那些metatags包含og:title和数据。og:image然后意识到这些og metatags是执行数据抓取过程的直接目标。

可以肯定的是，os:image上面的内容链接是通过_c.jpg. 缩略图版本使用_b.jpg. 本质上，每个固定项目都有两个独特的图像尺寸。

由于数据抓取过程不返回这些og property names，只是Metatag Object Numbers，我们需要对返回content的每一个进行关联分析Metatag Object Number。

查看上面的metatag源代码，很明显image将始终位于以 . 开头的某个位置http://media-。这些13字符在所有元标记中是唯一的，因此当匹配时，整个 URL 就是image location.

当然，如果 Pinterest 对图片使用多个 URL 模板，则需要相应地进行调整。

看着你立即意识到内容部分og:title中没有唯一的字符串来表明这个标签是. 因此，假设所有元标记都遵循一个模板并且在一段时间内不会改变，我们将把它分配给提供. 需要明确的是，这个数字 7 是基于并来自这个脚本过程，而不是上面看到的源 HTML 结构。image's titleMetatag Object Number 7Pinterest Pinned Item's Image Title.ajax()YQL Results

同样，如果 Pinterest 更改了 的模板head section，则可能需要进行调整。

下面是我根据这篇在线文章中看到的数据抓取技术/脚本编写的实时分步教程。


jsFiddle Pinterest 数据抓取 DEMO


提示：
虽然没有演示，但您可以使用总找到的 Metatags的数值，可以根据页面应包含的预定值检查该数值，表明已更改。例如，当前元标记计数是项目。如果在任何其他Pinterest 固定项目网页上返回的值不等于此值，则您知道使用中存在不同...这可能会影响脚本，因为它只需要 25并通过它直接调用其中两个。head section25head sectionMetatag Object Number

额外的东西：
如果您对如何检索主页上看到的当前 Pinterest 固定项目感到好奇，请首先了解这个 jsFiddle 演示是如何工作的。然后，您需要制作自己的 jsFiddle 版本进行测试，并使用Pinterest 主页 URL以及更改对数据抓取XPATH的.ajax()调用relevant div's中的 body section. 要了解更多信息XPATH basics，请单击此处。然后你就可以理解：XPATH for Select Divs in Body on YQL Playground。

例如，该格式最多body section包含50个引脚：

 "href": "/pin/15833036160340477/"

这些href fragments将作为重新创建 URL 的起点。重要提示：某些引脚可能repins意味着您将返回少于 50 个引脚。

对于那些读到这里的人，这里是：

一些额外的 jsFiddle 演示。

这是YQL Playground 上 Body 中 Select Divs的改进XPATH ，但请理解上面较长的 XPATH 是如何工作的。

另请参阅我的其他 Pinterest SO 答案：

自定义 URL 的自定义 Pinterest 按钮（文本链接、图像或两者）

如何复制 Pinterest 网站的模态效果？

于 2012-12-11T06:25:16.377 回答
0

最好的答案是：看看 Pinterest 是如何做到的。

对于 jQuery，请查看“最近”函数。

这里只是一些快速而肮脏的未经测试的代码，为您提供思考这个问题的起点，但这是一个非常开放的问题，您的代码中的智能可以像您希望的那样复杂和健壮或简单。

$('img').each(function() {

    var title = $(this).prop('alt') || $(this).prop('title') || $(this).closest('h1,h2,h3').text();

   // do something with title

});​
于 2012-12-10T08:52:50.373 回答