Javascript 从字符串中提取图像 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14939296/
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
Extract image src from a string
提问by MikeM
I'm trying to match all the images elements as strings,
我正在尝试将所有图像元素匹配为字符串，
This is my regex:
这是我的正则表达式：
html.match(/<img[^>]+src="http([^">]+)/g);
This works, but I want to extract the srcof all the images. So when I execute the regular expression on this String:
这有效，但我想提取src所有图像的 。所以当我在这个字符串上执行正则表达式时：
<img src="http://static2.ccn.com/ccs/2013/02/img_example.jpg />
<img src="http://static2.ccn.com/ccs/2013/02/img_example.jpg />
it returns:
它返回：
"http://static2.ccn.com/ccs/2013/02/img_example.jpg"
"http://static2.ccn.com/ccs/2013/02/img_example.jpg"
回答by MikeM
You need to use a capture group ()to extract the urls, and if you're wanting to match globally g, i.e. more than once, when using capture groups, you need to use execin a loop (matchignores capture groups when matching globally).
您需要使用捕获组()来提取 url，如果您想全局匹配g，即不止一次，在使用捕获组时，您需要exec在循环中使用（match全局匹配时忽略捕获组）。
For example
例如
var m,
urls = [],
str = '<img src="http://site.org/one.jpg />\n <img src="http://site.org/two.jpg />',
rex = /<img[^>]+src="?([^"\s]+)"?\s*\/>/g;
while ( m = rex.exec( str ) ) {
urls.push( m[1] );
}
console.log( urls );
// [ "http://site.org/one.jpg", "http://site.org/two.jpg" ]
回答by aleph_null
var myRegex = /<img[^>]+src="(http:\/\/[^">]+)"/g;
var test = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';
myRegex.exec(test);
回答by Default
As Mathletics mentioned in a comment, there are other more straightforward ways to retrieve the srcattribute from your <img>tags such as retrieving a reference to the DOM node via id, name, class, etc. and then just using your reference to extract the information you need. If you need to do this for all of your <img>elements, you can do something like this:
正如 Mathletics 在评论中提到的那样，还有其他更直接的方法可以从您的标签中检索src属性，<img>例如通过 id、name、class 等检索对 DOM 节点的引用，然后仅使用您的引用来提取您的信息需要。如果您需要对所有<img>元素执行此操作，您可以执行以下操作：
var imageTags = document.getElementsByTagName("img"); // Returns array of <img> DOM nodes
var sources = [];
for (var i in imageTags) {
var src = imageTags[i].src;
sources.push(src);
}
However, if you have some restriction forcing you to use regex, then the other answers provided will work just fine.
但是，如果您有一些限制迫使您使用正则表达式，那么提供的其他答案就可以正常工作。
回答by Stasel
Perhaps this is what you are looking for:
也许这就是您正在寻找的：
What I did is slightly modified your regex then used the execfunction to get array of matched strings. if you have more then 1 match the other matches will be on results[2], results[3]...
我所做的是稍微修改您的正则表达式，然后使用该exec函数来获取匹配字符串的数组。如果您有超过 1 场比赛，则其他比赛将进行results[2]，results[3]...
var html = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />';
var re = /<img[^>]+src="http:\/\/([^">]+)/g
var results = re.exec(html);
var source = results[1];
alert(source);
回答by Anirudha
You can access the srcvalue using groups
您可以src使用组访问该值
|->captured in group 1
----------------------------------
var yourRegex=/<img[^>]+src\s*=\s*"(http://static2.ccn.com/ccs[^">]+)/g;
var match = yourRegex.exec(yourString);
alert(match[1]);//src value
