从字符串中提取图像src

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 src of 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”

5 个解决方案

#1

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 exec in a loop (match ignores 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" ]

#2

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

#3

As Mathletics mentioned in a comment, there are other more straightforward ways to retrieve the src attribute 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 标记中检索src属性，例如通过id、名称、类等检索对DOM节点的引用，然后使用引用来提取所需的信息。如果需要对所有的元素执行此操作，可以执行以下操作:

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.

但是，如果您有一些限制，迫使您使用regex，那么所提供的其他答案将非常有效。

#4

Perhaps this is what you are looking for:

也许这就是你想要的:

What I did is slightly modified your regex then used the exec function to get array of matched strings. if you have more then 1 match the other matches will be on results[2], results[3]...

我所做的是稍微修改您的regex，然后使用exec函数获取匹配字符串的数组。如果你有超过1个匹配项，其他匹配项将会在结果[2]上，结果[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);

#5

You can access the src value 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

#1