使用Javascript从HTML代码中提取图片URL

Question

我正在从Facebook API的页面笔记中获取信息。在输出中，我得到一个嵌入HTML代码的图像URL。如何使用JavaScript从下面的HTML代码中提取图像URL？

<img class=\"photo_img img\" src=\"http://photos-c.ak.fbcdn.net/hphotos-ak-ash4/373909_207177302696060_189175211162936_438410_6588114253_a.jpg\" alt=\"\" />

更新

上述图像标签嵌入了Facebook API的JSON响应中。 我还使用Appcelerator创建iOS应用程序。

更新2

我通过以下方式解决了它：

json.data[i].message.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]

感谢您的所有帮助！

- Jonathan Clark

---

你需要使用正则表达式或某种字符串解析来获取URL。你熟悉这些吗？ - Shamim Hafiz - MSFT

不好意思，只能根据名称回答。你知道这个的正确语法吗？ - Jonathan Clark

这个相对于这个来说非常简单。但是它可以提取包括双引号在内的URL，所以我在正则表达式规则后面加上了.slice(1, -1)，像这样String.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1].slice(1,-1)，现在它完美地工作了。谢谢。 - ronaldtgi

Answer 1

当然，您可以使用DOM提取这些数据。但问题是有多少个img标签？或者你能为这些标签提供一些id吗？

如果有id，则return document.getElementById(id).src;就可以了。

否则，您可能需要使用getElementsByTagname('img')获取img标签数组。

如果只有一个标签，那么使用这个方法很容易。您还可以进行第二级类匹配。

- Kris

---

这个不起作用：var imgObj = json.data[i].message.getElementsByTagName('img'); - Jonathan Clark

但输出是HTML代码。难道没有一种方法可以提取img标记的src吗？ - Jonathan Clark

你确定要在JSON消息中应用DOM吗？它不是一个字符串吗？我建议使用DOMParser或ActiveXobject将其作为XML文档加载。然后，可以使用XML解析和XPath查找具有类名属性的节点。获取节点后，您可以提取任何参数。 - Kris

Answer 2

您可以使用jQuery从html中提取任何数据。使用以下代码：

$(function() {
  $('img').attr("src");
});

这将仅返回第一个img标签的src值。如果您想要特定的img标签，可以将其包含在div中。

- rdsoze

---

你怎么知道他在使用jQuery？ - Grrbrr404

Answer 3

你可以使用类似这样的代码。

var imgObj = document.getElementsByTagName('img')[0];
alert(imgObj.getAttribute('src'));

更新

如果您能够使用jQuery，您可以执行以下操作

// select all images with the class 'photo_img'
var elements = $('img .photo_img').attr('src');

你可以使用循环或jQuery的each函数来遍历元素。

- Grrbrr404

---

这个不起作用：var imgObj = json.data[i].message.getElementsByTagName('img')[0]; - Jonathan Clark

我从未建议您将其添加到JSON对象中。我以为它是渲染的HTML页面，但现在我看到您已经更新了您的问题。 - Grrbrr404

抱歉，我已经更新了我的问题。但是，是否有一种使用正则表达式来提取img标签的src的方法？ - Jonathan Clark