在Javascript字符串中找到<img>標籤的src屬性值

我一直試圖在包含一段HTML代碼的動態生成/分配的JavaScript變量的img標籤中獲取'src'。在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>"

「後」變量的內容不是預定義的，它是動態的，並在它的HTML代碼總是變化。爲了得到它的圖像的src，我做了以下。但它並不總是爲我工作。

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

我想從博客文章的內容的博客文章的第一形象，但這並不具有圖像一些職位的工作。這怎麼可以使用JavaScript或jQuery沒有失敗？

來源

2013-10-06 TechyTee

當您的變量名爲'post'時，您指的是'post_body'。 –

對不起，我已經相應地更改了問題的文字。 'post'必須改爲'post_body'。這就是爲什麼我在準備這個問題的時候使用了post_body之後的一個錯誤。 – TechyTee

它在這裏工作：http://jsfiddle.net/3SLJm/。它失敗的場景是什麼？ –

使用普通的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") : "";

來源

2013-10-06 12:34:55

我們不能說這個字符串以div或p標籤開頭。這是完全不可預知的，不能使用這個答案。 – TechyTee

嗯......爲什麼這個字符串以什麼開頭？此代碼適用於任何HTML ... –

正如你所說，這工作像一個魔術......非常感謝你！ – TechyTee

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

來源

2013-10-06 10:24:28

對不起，我已經相應地更改了問題的文字。 'post'必須改爲'post_body'。這就是爲什麼我在準備這個問題的時候使用了post_body之後的一個錯誤。 – TechyTee

@techytee上面的代碼對我來說很好用 –

由於html字符串中的引號，這不會有效，所以$（post）會給出錯誤。需要另一種方式。 – TechyTee

或許你可以嘗試加入id來img標記，然後訪問它。

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

這是一個純粹的js解決方案。

來源

2013-10-06 13:32:02

圖片標籤無法預定義，它們會從網上來源自動加載。 – TechyTee

回答

相關問題