使用javascript / jQuery從HTML字符串中獲取屬性值

Question

我有一個包含文本和圖像的HTML字符串，例如

<p>...</p>
<img src="..." />
<p>...</p>

我需要獲取第一個圖像的src屬性。 圖像可能會或可能不會在<p>之后出現，並且可能存在多個圖像，或者根本沒有圖像。

最初，我嘗試將字符串附加到DOM並進行過濾。 但是，如果我這樣做，瀏覽器會請求所有外部資源。 在我的情況下，這增加了許多不必要的開銷。

我的初步方法：

var holder = $('<div></div>'); 

holder.html(content);

var src = holder.find('img:first').attr('src');

如何在不附加HTML的情況下獲取第一張圖像的src？ 我需要使用正則表達式，還是有更好的方法？

解決方案需要基於javascript / jQuery - 我沒有使用任何服務器端語言。

我的問題非常類似於： http ： //forum.jquery.com/topic/parsing-html-without-retrieving-external-resources

謝謝

Answer 1

這個

$("<p><blargh src='whatever.jpg' /></p>").find("blargh:first").attr("src")

返回whatever.jpg所以我想你可以試試

$(content.replace(/<img/gi, "<blargh")).find("blargh:first").attr("src")

編輯

/<img/gi而不是"<img"

Answer 2

這應該工作：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        //Document Ready: Everything inside this function fires after the page is loaded
        $(document).ready(function () {
                    //Your html string
            var t = "<p><img src='test.jpg'/></p>"
            alert($(t).find('img:first').attr('src'));
        });
    </script>
</head>
<body>
</body>
</html>

Answer 3

我通常使用以下內容：

$(content).attr("src")
where 
content = "img src='/somesource/image.jpg'>" //removed < before img for html rendering in this comment

Answer 4

我解決了同樣的問題，試圖從iframe中取出src網址。 這是一個純JavaScript函數，適用於任何字符串：

function getSourceUrl(iframe) {
  var startFromSrc = iframe.slice(iframe.search('src'));
  return startFromSrc.slice(5, startFromSrc.search(' ') - 1);
}

使用javascript / jQuery從HTML字符串中獲取屬性值

問題描述

4 個解決方案

解決方案1
12 已采納 2010-09-14 18:25:06

解決方案2
5 2010-09-14 18:22:36

解決方案3
3 2016-07-05 07:01:44

解決方案4
0 2016-10-28 19:24:39

使用javascript / jQuery從HTML字符串中獲取屬性值

問題描述

4 個解決方案

解決方案1 12 已采納 2010-09-14 18:25:06

解決方案2 5 2010-09-14 18:22:36

解決方案3 3 2016-07-05 07:01:44

解決方案4 0 2016-10-28 19:24:39

解決方案1
12 已采納 2010-09-14 18:25:06

解決方案2
5 2010-09-14 18:22:36

解決方案3
3 2016-07-05 07:01:44

解決方案4
0 2016-10-28 19:24:39