javascript - 识别并提取图像的标题/说明(数据剪贴Pinterest)

Question

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

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

var title = document.title;

我相信Pinterest的Pin-it小书签已成功完成了此任务。我猜想它与找到最近的 h1， h2， h3或图像的​​ alt属性的算法有关，如果算法无法识别图像的描述，则回退到 document.title在页面上。

任何想法，不胜感激！

编辑

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

Answer 1

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

我刚刚重写了该jsFiddle，因此它是Pinterest特定的，并且直接使用了Metatag Object Numbers（稍后会详细介绍），这使得该jsFiddle与该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，因此我们需要分析与每个 content关联的返回的 Metatag Object Number。

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

当然，Pinterest应该为其中的图片使用多个URL模板，然后需要相应地进行调整。

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

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

现在紧接着是我编写的实时循序渐进教程，该教程基于此在线 article中的数据抓取技术/脚本。



jsFiddle Pinterest Data Scraping DEMO





小费：
尽管未进行演示，但是您可以使用一个总数为找到的元标记的数值，可以将其与页面应包含的内容的预定值进行比较，以指示 head section已更改。例如，当前的元标记计数是 25个项目。如果返回的值不等于任何其他Pinterest固定项目网页上的值，则您知道正在使用不同的 head section ...，这可能会影响脚本，因为它只希望25，并直接调用其中的两个 Metatag Object Number。



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

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

 "href": "/pin/15833036160340477/"

这些 href fragments将作为重新创建URL的起点。重要说明：某些引脚可能是 repins，这意味着您返回的引脚少于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?