如何使用Javascript / jQuery来识别与具有多个图像和描述的网页上的图像相对应的描述或标题？
可以很容易地提取页面标题，但是标题可能与图像不对应，特别是如果页面上存在很多图像
var title = document.title;
我相信Pinterest的Pin-it小书签已成功完成了此任务。我猜想它与找到最近的
h1，h2，h3或图像的alt属性的算法有关，如果算法无法识别图像的描述，则回退到document.title在页面上。任何想法，不胜感激！
编辑
这是用于数据抓取其他网站
最佳答案
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?
关于javascript - 识别并提取图像的标题/说明(数据剪贴Pinterest)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13796859/