使用 javascript/jQuery 从 HTML 字符串中获取属性值答案

【问题标题】：Using javascript/jQuery to get attribute values from an HTML string使用 javascript/jQuery 从 HTML 字符串中获取属性值
【发布时间】：2011-04-12 07:42:09
【问题描述】：

我有一个包含文本和图像的 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

谢谢

【问题讨论】：

您的问题不够清楚，无法回答，可能是一个示例可以提供帮助。你可以发布一个例子吗？你的代码中的content 是什么？
content 指的是 HTML 字符串。 HTML 字符串描述了一篇新闻文章——它可以包含文本、图像或视频。该字符串来自 JSON 对象，例如var 内容 = myJSONObj.articleText;其中值可能类似于：Some text...<img src="http://..." border="0" alt="My alt text"><br>More text...

标签： javascript jquery attributes

【解决方案1】：

我尝试从 iframe 中提取 src url 解决了同样的问题。这是一个适用于任何字符串的纯 JavaScript 函数：

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

【讨论】：

【解决方案2】：

我通常使用以下：

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

【讨论】：

【解决方案3】：

这个

$("<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"

【讨论】：

为什么要用 blargh 代替 img？
@DB 提到他最初的方法，根据他的代码加载 jQuery 对象，导致浏览器下载所有资源。通过摆脱img标签，我希望避免这个问题。
这种方法行得通，但我不得不这样做$(content.replace(/<img/gi, "<blargh")).find("blargh:first").attr("src"); 感觉有点脏...
哇..这是我迄今为止找到的最佳解决方案。只是一件事。在您的解决方案中，您必须扫描两次字符串，如果是一个大字符串，这不是最好的解决方案.. 是否有另一种方法可以在不加载资源的情况下在字符串中查找 img 标签？像 $.parseHTML(myHTML).find('img:first') 这样的东西给了我错误..
请注意 img 不能单独存在于字符串中以使其正常工作，因此您需要先将其包围起来，例如，像示例中那样使用
。

【解决方案4】：

这应该可行：

<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>

【讨论】：

你只需要注意有一个根元素......也许你必须封装你的HTML，例如。 $('' + htmlStuff + '').find...
我认为即使您没有将html附加到dom，下载图像文件仍然会有问题。如果您创建新的图像元素，浏览器会立即下载文件，无论您是否将图像元素附加到 dom。
Dave Aaron Smith 是对的——外部资源仍在下载中。