Question

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

页面标题可以很容易地提取，但标题可能与图像不对应，特别是如果页面上有很多图像

var title = document.title;

我相信Pinterest的Pin-it书签已成功完成。我猜它与算法有关，可以找到最近的h1，h2，h3或图片的alt属性，然后回退到{{1}如果算法无法在页面上识别图像的描述。

任何想法都非常感谢！

修改

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

Answer 1

OP提供了一个很好的问题来扩展。我最近为新的雅虎创建了另一个SO Answer jsFiddle，用于数据抓取网址，标题和缩略图！屏幕视频播放器网页。

我只是 重写了jsFiddle 所以它的Pinterest具体而且直接使用了 Metatag Object Numbers （以后的更多内容）这使得这个jsFiddle与那个非常不同。

整个过程涉及使用 Yahoo查询语言以及jQuery .ajax()功能来获取所需的抓取数据，这些数据通常位于网页来源metatag部分

首先，让我解释一下。

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

Pinterest Link已为其网页标题指定了固定项目的 Title 以及一些单词组成固定项 Description 。这很可能是不可取的，只需要固定的项目 Title 即可。

查看Pinterest Link的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，因此我们需要分析与每个{{1}相关联的返回 content }。

查看上面的Metatag Object Number来源，很明显metatag始终位于以 image 开头的某个地方。这些 http://media- 字符在所有元标记中都是唯一的，因此当匹配时，整个网址都是 13 。

当然，Pinterest应该为图像使用多个URL模板，然后需要相应调整。

查看image location您立即意识到 内容部分 中没有唯一的字符串，表示此标记为{{1} }。因此，假设所有元标签都遵循模板并且不会更改一段时间，我们将分配此 og:title 以提供 image's title 。需要说明的是，此数字7基于此脚本流程中的Metatag Object Number 7和Pinterest Pinned Item's Image Title，而不是上面显示的源HTML结构。

同样，如果Pinterest更改.ajax()的模板，则可能需要进行调整。

现在接下来是基于在线article中看到的数据抓取技术/脚本编写的实时分步教程。

jsFiddle Pinterest Data Scraping DEMO

提示
虽然未经过演示，但您可以使用数字值来查找找到的元标记，可以根据应该<页面< < / em> 包含，表示YQL Results已更改。例如，当前元标记计数为head section项。如果返回的值不等于任何其他 Pinterest固定商品网页上的此值，则表示您正在使用其他head section ...影响脚本，因为 只需要25 ，并直接通过 25 调用其中的两个。

额外的东西：
如果您对如何检索主页上显示的当前Pinterest Pinned ITEMS感到好奇，请首先了解这个jsFiddle DEMO的工作原理。然后，您需要制作自己的jsFiddle版本进行测试并使用 Pinterest主页网址并更改中的 head section Metatag Object Number 调用数据仅搜索 XPATH 中的 .ajax() 。要详细了解relevant div's，请点击HERE。然后你就可以理解：XPATH for Select Divs in Body on YQL Playground。
例如，body section包含 50 pin 格式：

XPATH basics

这些body section将作为重新创建网址的起点。 重要说明：某些引脚可能 "href": "/pin/15833036160340477/" ，这意味着您将返回少于50个引脚。

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

Something Extra jsFiddle DEMO

这是一个改进的XPATH for Select Divs in Body on YQL Playground，但要明白上面的长时间如何运作。

另见我的其他Pinterest SO答案：

Custom Pinterest button for custom URL (Text-Link, Image, or Both)

How can I duplicate Pinterest website's modal effect?

Answer 2

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

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

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

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

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

   // do something with title

});

识别＆amp;提取图像的标题/描述（Data Scraping Pinterest）

修改

2 个答案: