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

Find src attribute value of <img> tag in a Javascript string

本文关键字：src 属性 img 查找 Javascript 字符串      更新时间：2023-09-26

我一直在尝试在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来完成此操作而不会失败？

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

将$(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');

也许您可以尝试将 id 添加到img标签中，然后访问它。

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

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

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

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

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

相关文章：