javascript - 在 Javascript 字符串中查找 标签的 src 属性值

Question

我一直在尝试在 JavaScript 变量内获取 img 标签中的“src”，该变量包含动态生成/分配的 HTML 代码块。

例如:

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 来完成此操作而不会失败？

Answer 1

使用纯 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") : "";