在Javascript字符串中查找<img/>标记的src属性值

时间:2013-10-06 10:08:33

标签: javascript jquery html json

我一直试图在一个包含动态生成/分配的HTML代码块的javascript变量中的img标签中获取'src'。

例如:

var post_body = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>"

'post'变量的内容不是预定义的,而是动态的,其中的HTML代码总是会改变。为了获得图像的src,我做了以下操作。但它并不总是对我有用。

var firstimg = $(post_body).find("img:first").attr("src");

我试图从博客文章的内容中获取博客文章的第一张图片,但这对于某些有图片的帖子不起作用。如何在不失败的情况下使用javascript或jQuery来完成?

4 个答案:

答案 0 :(得分:7)

使用纯JavaScript,将HTML转储到临时元素中并提取它:

var div = document.createElement('div');
div.innerHTML = post_body;
var firstImage = div.getElementsByTagName('img')[0]
var imgSrc = firstImage ? firstImage.src : "";
// or, if you want the unresolved src, as it appears in the original HTML:
var rawImgSrc = firstImage ? firstImage.getAttribute("src") : "";

答案 1 :(得分:2)

$(post_body)更改为$(post)

尝试

var post = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>";
var firstimg = $(post).find('img:first').attr('src');

答案 2 :(得分:0)

也许您可以尝试将ID添加到img标记,然后再访问它。

var oImg = document.getElementById('myImg');
var attr = oImg.getAttribute('src');

这是一个纯粹的js解决方案。

答案 3 :(得分:0)

但是,如果不想加载图像,请使用以下内容。

var div = document.createElement('template');
div.innerHTML = post_body;

如果创建div元素,则在插入innerHTML时即会加载远程图像,模板会阻止请求。