使用 javascript/jQuery 从 HTML 字符串中获取属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3711710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using javascript/jQuery to get attribute values from an HTML string
提问by DB.
I have an HTML string that contains text and images, e.g.
我有一个包含文本和图像的 HTML 字符串，例如
<p>...</p>
<img src="..." />
<p>...</p>
I need to get the src attribute of the first image. The image may or may not come after a <p>and there could be more than one image, or no image at all.
我需要获取第一张图片的 src 属性。图像可能会也可能不会出现在 a 之后，<p>并且可能有多个图像，或者根本没有图像。
Initially, I tried appending the string to the DOM and filtering. But, if I do this the browser requests all of the external resources. In my situation, this adds a lot of unnecessary overhead.
最初，我尝试将字符串附加到 DOM 并进行过滤。但是，如果我这样做，浏览器会请求所有外部资源。在我的情况下，这会增加很多不必要的开销。
My initial approach:
我最初的做法：
var holder = $('<div></div>');
holder.html(content);
var src = holder.find('img:first').attr('src');
How can I get the src of the first image without appending the HTML? Do I need to use a regular expression, or is there a better way?
如何在不附加 HTML 的情况下获取第一张图像的 src？我需要使用正则表达式，还是有更好的方法？
The solution needs to be javascript/jQuery based – I'm not using any server side languages.
解决方案需要基于 javascript/jQuery——我没有使用任何服务器端语言。
My question is very similar to: http://forum.jquery.com/topic/parsing-html-without-retrieving-external-resources
我的问题非常类似于：http: //forum.jquery.com/topic/parsing-html-without-retrieving-external-resources
Thanks
谢谢
回答by Dave Aaron Smith
This
这个
$("<p><blargh src='whatever.jpg' /></p>").find("blargh:first").attr("src")
returns whatever.jpgso I think you could try
回来whatever.jpg所以我想你可以试试
$(content.replace(/<img/gi, "<blargh")).find("blargh:first").attr("src")
Edit
编辑
/<img/giinstead of "<img"
/<img/gi代替 "<img"
回答by Brandon Boone
This should work:
这应该有效：
<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>
回答by user1979077
I normally use the below:
我通常使用以下内容：
$(content).attr("src")
where
content = "img src='/somesource/image.jpg'>" //removed < before img for html rendering in this comment
回答by Adam T. Smith
I solved this same issue trying to pull out the src url from an iframe. Here is a plain JavaScript function that will work for any string:
我尝试从 iframe 中提取 src url 解决了同样的问题。这是一个适用于任何字符串的普通 JavaScript 函数：
function getSourceUrl(iframe) {
var startFromSrc = iframe.slice(iframe.search('src'));
return startFromSrc.slice(5, startFromSrc.search(' ') - 1);
}
